将JavaScript从cshtml razor视图中分离出来

Question

我是ASP.NET/MVC3的新手，正在努力弄清楚如何将JavaScript（包含C#代码）与其他HTML分离。

如果我将它们放入.js文件中并使用脚本标签插入，则其中的C#部分将无法工作。在MVC 3 Razor中分离包含C#代码的JavaScript代码的最佳方法是什么？

谢谢。

- user1157885

---

为什么你的JavaScript代码中有一个C#方面（aspect）？这是不应该存在的。 - Darin Dimitrov

Answer 1

出于多种原因，最好将大部分甚至全部JS代码放入单独的JS文件中（这样您可以利用重用、缩小、浏览器优化、内容传递网络等）。

要将服务器端razor代码的结果读取到JS文件中，请使用以下方法之一：

1）将您的razor代码放入视图中的javascript变量（未经测试的代码）

<script type="text/javascript">
  if(!MyGlobalVariables){
     MyGlobalVariables = {};
  }
  MyGlobalVariables.IndexUrl = "@Url.Action("Index")";
</script>

2) 使用自定义属性（最好使用data-前缀，如HTML 5规范中建议的那样）。请参见相关讨论：我可以向HTML标签添加自定义属性吗？

<div data-index-url="@Url.Action("Index")"></div>

然后，使用jQuery中的$(this).attr("data-index-url")来访问已呈现的razor标记。

3) 在视图中将C#代码放入隐藏的输入字段 ，然后在JS文件中读取这些隐藏的输入字段。

<input id="indexUrl" type="hidden" value="@Url.Action("Index")" />

如果要在jQuery中读取这个值，你可以使用$("#indexUrl").val()

- Zaid Masud

Answer 2

相反，在您的视图页面中执行以下操作：

var options = {
    parameter1 : '@(SomeC#Value)',
    parameter2 : '@(SomeC#Value)',
    parameter3 : '@(SomeC#Value)',
}

然后调用类似于以下的内容：

myJavascriptObject.init(options);

并且使用传递进来的选项来控制流程等等。

- Dave Bish

Answer 3

Javascript代码不应包含任何动态生成的代码。如果您需要加载某些配置设置，则应使用单个内联脚本标记定义变量。其他选项是加载动态生成的json配置文件或基于dom内容，具体取决于您需要的特定动态信息。 （我认为Ajax是最常见的方式，但这确实取决于您的情况）。无论哪种方式，JavaScript和CSS文件始终是静态的。

- David Mulder

Answer 4

如果在引用外部js文件时出现任何问题，也许您做错了什么。请提供一些示例代码，说明如何引用外部文件。另一种方法是将JavaScript代码放置在文件中的某个位置之间的脚本标记之间。如果它在_Layout.cshtml中，则可以将其放置在head标记中，在另一个cshtml文件中，请将其放置在脚本标记之间的顶部。

- Abbas

Answer 5

正如其他人所说，将C#代码写入.js文件可能不是最好的选择，原因有很多，比如动态变量的缓存等。但有时我们都必须做一些不应该做的事情。如果是这种情况，那么有一个NuGet包可以让你在.js文件中编写Razor语法，它可以在这里找到http://nuget.org/packages/RazorJS

- Simon West

Answer 6

我们使用对象扩展和JavaScriptSerializer将C#对象转换为Json：

public static string ToJson(this object item)
    {
        return new JavaScriptSerializer().Serialize(item);
    }

然后我们将其设置为一个变量（或在我们的情况下将其传递给JavaScript控制器的构造函数）

- Kevin Boss