在cshtml razor视图中分离JavaScript

Question

我是ASP.NET/MVC3的新手,我正试图弄清楚如何将我的JavaScript(包含C#)与HTML的其余部分分开.

如果我将它们放入.JS文件并使用脚本标记插入它们,那么它们的C#方面就会停止工作.在MVC 3 razor中分离包含C#代码的JavaScript代码的最佳方法是什么？

谢谢.

Answer 1

出于多种原因,您最好将大部分(如果不是全部)JS放入单独的JS文件中(这样您就可以利用重用,缩小,浏览器优化,内容交付网络等).

要将服务器端razor代码的结果读入JS文件,请使用以下方法之一:

1)将您的剃刀代码放入视图中的javascript变量(未测试代码)

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

2)使用自定义属性(最好使用HTML 5规范中建议的数据前缀).请参阅此处的相关讨论:我可以将自定义属性添加到HTML标记吗？

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

然后,在jQuery中使用$(this).attr("data-index-url")来访问渲染的剃刀标记.

3)将C#放入视图中的隐藏输入字段,并读取JS文件中的隐藏输入.

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

要在jQuery中读取它,您将使用$("#indexUrl").val()

Answer 2

如果在引用外部 js 文件时出现任何问题，则可能是您做错了什么。向我们提供一些有关如何引用外部文件的示例代码。另一种方法是将 JavaScript 代码放置在文件中某处的脚本标记之间。如果它在 _Layout.cshtml 中，您可以将其放置在 head-tag 中，并在另一个 cshtml 文件中，将其放置在 script-tag 之间的顶部。