ASP.NET MVC 混合 Razor 和 JavaScript答案

【问题标题】：ASP.NET MVC mix Razor and JavaScriptASP.NET MVC 混合 Razor 和 JavaScript
【发布时间】：2018-01-04 09:23:24
【问题描述】：

我们如何将 JavaScript 变量传递给 Razor 代码？

这里有一个简单的标签

<div id="AboutDoctor" style="min-height:34vh;">
<div class="row text-center text-primary">@MEDONET.Language.Doctor.Texts.About</div>
<div class="col-xs-2">
    <!-- required for floating -->
    <!-- Nav tabs -->
    <ul class="nav nav-tabs tabs-left">
        <li><a href="#_Info" data-toggle="tab" onclick="GetTabPane('_Info')">@MEDONET.Language.Doctor.Texts.Info</a></li>
        <li><a href="#_Diplomas" data-toggle="tab" onclick="GetTabPane('_Diplomas')">@MEDONET.Language.Doctor.Texts.Diplomas</a></li>
        <li><a href="#profile" data-toggle="tab">@MEDONET.Language.Common.Texts.Licenses</a></li>
        <li><a href="#messages" data-toggle="tab">@MEDONET.Language.Doctor.Texts.Summary</a></li>
        <li><a href="#settings" data-toggle="tab">@MEDONET.Language.Common.Texts.Reviews</a></li>
        <li><a href="#_Contacts" data-toggle="tab" onclick="GetTabPane('_Contacts')">@MEDONET.Language.IndexTexts.Contact</a></li>
    </ul>
</div>
<div class="col-xs-9" style="margin-top:3vh">
    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane" id="_Info">@MEDONET.Language.Common.Texts.Loading...</div>
        <div class="tab-pane" id="_Diplomas">@MEDONET.Language.Common.Texts.Loading...</div>
        <div class="tab-pane" id="profile">Licenses</div>
        <div class="tab-pane" id="messages">Summary</div>
        <div class="tab-pane" id="settings">Reviews</div>
        <div class="tab-pane" id="_Contacts">@MEDONET.Language.Common.Texts.Loading...</div>
    </div>
</div>

通过单击选项卡，用户调用 GetTabPane() 函数并将函数名称传递给它。该函数本身如下所示：

 function GetTabPane(val) {
    $('#'+val).load("@Url.Action("val", "Doctors", new { id = Model.Id })",
        function () { $('#'+val).tab-pane('show') });
 }

除了我试图将 val 作为动作名称传递的部分之外，几乎所有的工作都有效

...Action("val",...

那么如何在脚本块内将 JavaScript 值传递给 Razor？

【问题讨论】：

不，你不能用 JS 变量做Url.Action。唯一的办法是在标准 URL 中组合 JS 变量（例如"/Doctors/" + val + "/id=...），或者使用 AJAX 调用来检索它。

标签： javascript asp.net asp.net-mvc razor

【解决方案1】：

您不能将 JavaScript 值传递给 Razor。原因是在页面页面生命周期中代码执行的时候：

Razor 代码在服务器上在页面返回给客户端之前执行
页面返回后在客户端执行JS代码

但是您可以通过最初使用占位符创建 URL，然后在 JS 代码中替换它来解决您的具体问题。

<script type="text/javascript">

var urlPattern = '@Url.Action("__ACTION_NAME_TO_BE_REPLACED__", "Doctors", new { id = Model.Id })';

function GetTabPane(val) {
    var url = urlPattern.replace('__ACTION_NAME_TO_BE_REPLACED__', val);
    $('#'+val).load(url, function () { $('#'+val).tab-pane('show'); });
}
</script>

【讨论】：

很高兴为您提供帮助:)