如何在 .js 文件中嵌入 Razor C# 代码？

Posted 2023-02-22

【中文标题】如何在 .js 文件中嵌入 Razor C# 代码？

【英文标题】：How to embed Razor C# code in a .js file?

【发布时间】：2012-03-13 11:31:53

【问题描述】：

必须嵌入javascript代码块

<script type='text/javascript'>
  ...
</script>

但 Razor 代码不会在 .js 文件中编译，该文件包含在 .cshtml 文件中。

如何做到这一点？或者有没有其他优雅的方式来产生类似的效果？

谢谢。

【问题讨论】：

... 动态生成 JavaScript 的人深受其害。您不会在 javascript 文件中嵌入 Razor 代码，因为 JAVASCRIPT 文件是静态的。

您最好寻求帮助以解决您正在尝试解决的问题。因此，从详细说明问题开始，然后是您尝试的解决方案。您目前尝试解决它的方式不好。

我会尝试找到一个更通用的解决方案，否则我需要在这里多次询问不同的情况。

【参考方案1】：

你不能。你也不应该尝试。将它们分开。这反过来也适用，但您应该查看Unobtrusive JavaScript。在整个项目中应用的设计模式是个好主意。

【讨论】：

我确实尝试过 Unobtrusive JavaScript，但在某些情况下，我需要更新不同的元素，或者更新可以使用 jQuery 语句 $('#bla').parent 检索的 parent 元素()，或者只是根据响应采取不同的行动。我可能没有深入研究它，但 AFAIK 它不能满足我的需要。

【参考方案2】：

当我遇到这个问题时，有时我会在 .js 文件中提供一个可以在 .cshtml 文件中访问的函数...

// someFile.js
var myFunction = function(options)
    // do stuff with options
;

// razorFile.cshtml
<script>
    window.myFunction = new myFunction(@model.Stuff);
    // If you need a whole model serialized then use...
    window.myFunction = new myFunction(@Html.Raw(Json.Encode(model)));
</script>

不一定是最好的选择，但如果你必须这样做，它会做......

您可以尝试的另一件事是在您的 html 元素上使用数据属性，就像 jQuery.validate.unobtrusive 所做的那样......

//someFile.js
var options = $("#stuff").data('stuff');

// razorFile.cshtml
<input type="hidden" id="stuff" data-stuff="@model.Stuff" />

【讨论】：

+1，我也会在视图中设置变量/js 对象。通常这是需要通过 ajax 访问的 URL 的情况。例如<script>var ajaxUrl = '@Url.Action('Blah", "Blah", new id = Model.Id);</script>

我喜欢他的第二个选项。这有点奇怪，但它有效。

您可以在 cshtml 视图中添加一个“部分”并定义一个变量，如：variable = @Model.Parameter。在 js 文件的开头定义：var Parameter; 然后你可以在 js 文件中访问这个变量，只需在其中输入你想要的参数。

【参考方案3】：

虽然我同意您在 Javascript 文件中使用 Razor 时应该三思而后行，但有一个 Nuget 包可以为您提供帮助。它叫做RazorJS。

包的作者有一个关于它的blog post，它解释了如何使用它。

【参考方案4】：

也许我可以提供一个有用的解决方法，具体取决于您希望完成的工作。

我很想找到一种方法来评估 Java 脚本文件中的剃刀表达式。我想附加一个 jQuery click 事件处理程序来提交在许多页面上找到的特定类。这应该在 jQuery 文档就绪事件处理程序中完成。此单击事件将执行 ajax 调用。

这些 url 应该是应用程序相关的，而不是绝对的，以防应用程序位于根级别以下。所以，我想使用类似

$(document).ready(function () 
    $('input[type="submit"].checkit)').click(function (e) 
        $.ajax(
            type: 'POST',
            url: '@Url.Content("~/checkit")', //Razor expression here
            dataType: 'json',
            success: function (data) 
                if (!data) 
                    e.preventDefault();
                    handleResponse(data);
                
            ,
            data: null,
            async: false
        );
    );
);

我通过将代码包装在函数 Checkit 中并将调用移动到布局视图来解决这个问题：

        $(document).ready(function () 
            Checkit('@Url.Content("~/checkit")');
        );

大部分 javascript 代码仍在 javascript 文件中。

【参考方案5】：

这里有一个示例 Razor 网页（不是 MVC 视图，虽然类似），它将提供 Javascript。当然，动态编写 Javascript 文件是不典型的，但这里有一个示例。我曾经在我希望提供 JSON 数据和其他一些计算成本高且很少更改的东西的情况下使用它——因此浏览器可以包含它并像普通的 JS 文件一样缓存它。这里的技巧只是设置Response.ContentType，然后在你的Javascript中使用类似Razor的<text>标签。

@
Response.ContentType = "text/javascript";
Response.Cache.SetLastModified(System.Diagnostics.Process.GetCurrentProcess().StartTime);
Response.Cache.SetExpires(System.DateTime.Now.Date.AddHours(28));
Response.Cache.SetCacheability(System.Web.HttpCacheability.Public);
<text>
var someJavaScriptData = @someSortOfObjectConvertedToJSON;
function something(whatever)

</text>

然后您可以将其包含在您的其他 Razor 文件中：

<script src="MyRazorJavascriptFile.cshtml"></script>

【参考方案6】：

那么包含一个只包含 js 的 .cshtml 呢？

.csthml 父级

@RenderPage("_scripts.cshtml")

包含js的_scripts.cshtml

<script type="text/javascript">
alert('@Datetime.ToString()');
</script>

【参考方案7】：

如果您的目标是根据用户角色应用/触发有效的 JS 代码，那么您可以执行以下操作：

在 Views/Shared/js 文件夹中创建局部视图。

这里的 js 文件夹是我手动创建的。你可以给任何名字。

然后添加带有前缀_符号的布局页面（部分视图）。

我在这里创建 _mypageScrtipts.cshtml

将你的JS文件代码移动到_mypageScrtipts.cshtml中，并根据它放置角色条件和触发JS代码。

示例：

@var role = User.Identity.GetRole(); //came from "AspNetRoles" table

@if(role=="Admin") 

  <script> alert("I am admin user."); </script>

else

  <script>alert("I am normal user.");</script>