在cshtml razor视图中分离JavaScript

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

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

谢谢。

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

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

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

  

2)使用自定义属性 (最好以数据为前缀 – 如HTML 5规范中所建议的)。 请参阅此处的相关讨论: 我可以向HTML标记添加自定义属性吗?

 

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

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

  

要在jQuery中读取它,您将使用$(“#indexUrl”)。val()

Javascript代码不应包含任何动态生成的代码。 如果需要加载某些配置设置,则应使用单个内联脚本标记来定义变量。 其他选项是加载到json配置文件中,该文件是动态生成的,或者根据您需要的特定动态信息将其基于dom内容。 (Ajax是我说的最常见的方式,但这确实取决于你的情况)。 不管怎样,这个想法是javascript和css文件总是静态的。

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

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

然后打电话给:

 myJavascriptObject.init(options); 

让Javascript使用传入的选项来控制流量等。

如果在引用外部js文件时有什么东西停止工作,也许你做错了什么。 向我们提供一些有关如何引用外部文件的示例代码。 另一种方法是将JavaScript代码放在文件中某处的脚本标记之间。 如果它在_Layout.cshtml中,您可以将它放在head-tag和另一个cshtml文件中,将它放在script-tags之间。

正如其他人所说的那样,将c#写入你的.js文件可能不是出于各种原因(如缓存动态变量)的最佳选择。 但有时我们都必须做我们不应该做的事情。 如果是这样的话,那么有一个NuGet包允许你在.js文件中编写Razor语法,它可以在这里找到http://nuget.org/packages/RazorJS

我们将C#对象转换为Json,并在object和JavaScriptSerializer上进行扩展:

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

然后我们将它设置在变量上(或者在我们的例子中将它传递给JavaScript控制器的构造函数)