在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控制器的构造函数)