在js文件中，asp.net-mvc：razor'@'符号

我有一个JavaScript函数的.csHtml -razor文件，它使用@Url.Content C＃函数里面的ajax URL。
我想将该函数移动到从我的视图引用的.js文件。

问题是，JavaScript不“知道” @符号，并不parsingC＃代码。
有没有办法引用.js文件从视图与“@”符号？

Answer 1

您可以使用HTML5 data-*属性。 假设您想要在点击某个DOM元素（如div）时执行一些操作。 所以：

 <div id="foo" data-url="@Url.Content("~/foobar")">Click me</div> 

然后在你的单独的JavaScript文件中，你可以不显眼地使用DOM：

 $('#foo').click(function() { var url = $(this).data('url'); // do something with this url }); 

这样，你可以在标记和脚本之间进行纯粹的分离，而不需要在JavaScript文件中使用任何服务器端标记。

Answer 2

那么我刚刚在nuget上find了一个razor引擎呢！ 意思解决@语法！
它的名字是RazorJS 。

Nuget包

---

2016更新：
该软件包未更新5年，项目网站链接已经死亡。 我不build议人们再使用这个库。

Answer 3

解决这个问题的一个办法是：

将javascript函数的局部视图添加到视图中。
这样你可以使用@符号，所有的javascript函数都与视图分开。

Answer 4

你有两个select：

• 使用该值作为函数中的参数 ，并在视图中进行布线
• 创build一个名称空间（而不是在JS中被认为是不好的做法的公共级variables），并将该值设置在页面的顶部，然后在你的js中使用它

例如：

  var MyCompany = { MyProject: { MyVariable:"" } }; 

然后在你看来，设置它：

 MyCompany.MyProject.MyVariable = @.... 

---

UPDATE

你可能会想，因为耦合，没有什么是好的，那么这是事实，你正在耦合js和视图。 这就是为什么脚本必须忽略它们运行的​​位置，所以它是非最佳文件组织的症状。

无论如何，还有第三个选项来创build一个视图引擎，并对剃刀运行js文件并将结果发送回去。 这是更干净，但更慢，所以不build议。

Answer 5

为了让@variables到你的.js文件中，你必须使用一个全局variables，并从使用该.js文件的mvc视图中设置该variables的值。

JavaScript文件：

 var myValue; function myFunc() { alert(myValue); } 

MVC查看文件：

 <script language="text/javascript"> myValue = @myValueFromModel; </script> 

只要确保任何调用你的函数发生后，视图设置的值。

Answer 6

可能这不是正确的做法。 考虑到问题的分离。 你的JavaScript类应该有一个data injector ，而在大多数情况下，数据是JSON 。

在您的script文件夹中创build一个JS文件，并将此引用添加到您的View

 <script src="@Url.Content("~/Scripts/yourJsFile.js")" type="text/javascript"></script> 

现在，请考虑yourJsFile.js的JavaScript文字类：

 var contentSetter = { allData: {}, loadData: function (data) { contentSetter.allData = eval('(' + data + ')'); }, setContentA: function () { $("#contentA").html(allData.contentAData); }, setContentB: function () { $("#contentB").html(allData.contentAData); } }; 

同时声明一个类

 public class ContentData { public string ContentDataA { get; set } public string ContentDataB { get; set } } 

现在，从你的Action做到这一点：

 public ActionResult Index() { var contentData = new ContentData(); contentData.ContentDataA = "Hello"; contentData.ContentDataB = "World"; ViewData.Add("contentData", contentData); } 

从你的观点来看：

 <div id="contentA"></div> <div id="contentB"></div> <script type="text/javascript"> contentSetter.loadData('@Json.Encode((ContentData) ViewData["contentData"])'); contentSetter.setContentA(); contentSetter.setContentB(); </script> 

Answer 7

我最近在博客上讨论了这个话题： 使用部分Razor视图生成外部JavaScript文件 。

我的解决scheme是使用自定义属性（ ExternalJavaScriptFileAttribute ），它呈现一个部分Razor视图，然后返回它没有周围的<script>标记。 这使得它成为一个有效的外部JavaScript文件。

Answer 8

我通常将需要访问模型属性的JS包装到函数中，然后在视图中传递@something。 例如

 <script type="text/javascript"> function MyFunction(somethingPresentInTheView) { alert(somethingPresentInTheView); } </script> 

在视图中添加函数调用通过（只是一个例子）：

 <input type='button' onclick="MyFunction('@Model.PropertyNeeded')" /> 

Answer 9

我认为你坚持不得不把这个JS代码放在视图中。 据我所知，Razorparsing器不会查看.js文件，因此任何使用@都不起作用。 正如你所看到的PLus，Javascript本身不会像这个字符一样，无缘无故地挂在上面，除此之外，就是用一个string。