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 spec中所述）。请参阅此处的相关讨论：Can I add custom attribute to HTML tag?

<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

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

Answer 3

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

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

然后打电话给：

myJavascriptObject.init(options);

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

Answer 4

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

Answer 5

我们将C＃对象转换为Json，扩展名为object和JavaScriptSerializer：

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

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

在cshtml razor视图中分离JavaScript

5 个答案: