asp.net-mvc:js文件中的razor'@'符号

Question

我有一个.csHtml带有javascript函数的-razor文件,它使用@Url.Content内部的C#函数作为ajax URL.
我想将该函数移动到.js从我的视图引用的文件.

问题是javascript不"知道" @符号并且不解析C#代码.
有没有办法.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上发现了一个剃刀引擎!意义解决了@语法问题!
它的名字是RazorJS.

该的NuGet包

2016年更新:
该软件包未更新5年,项目站点链接已停止.我不建议人们再使用这个库.

Answer 3

解决问题的一种方法是:

使用javascript函数将部分视图添加到视图中.
这样您就可以使用@符号,并且所有javascript功能都与视图分开.

Answer 4

您有两种选择:

• 使用该值作为函数中的参数并在视图中进行连线
• 创建一个命名空间(而不是在JS中被认为是不好的公共级变量),并将此值设置在页面顶部,然后在js中使用它

例如:

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

然后在您的视图中,设置它:

MyCompany.MyProject.MyVariable = @....

UPDATE

你可能想知道因为耦合没有任何好处,这是真的,你是耦合js和视图.这就是为什么脚本必须忘记它们运行的​​位置,因此它是文件非最佳组织的症状.

无论如何,还有第三个选项来创建一个视图引擎并对剃刀运行js文件并将结果发回.这个更干净但速度慢得多,所以也不推荐.

Answer 5

为了将@变量放入.js文件中,您必须使用全局变量,并从使用该.js文件的mvc视图中设置该变量的值.

JavaScript文件:

var myValue;

function myFunc() {
  alert(myValue);
}

MVC查看文件:

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

只需确保在视图设置了值之后,对函数的任何调用都会发生.

Answer 6

也许这不是正确的方法。考虑关注点分离。data injector您的班级上应该有一个JavaScript，在大多数情况下数据是JSON。

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

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

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

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 文件。

我的解决方案是使用自定义属性 ( ExternalJavaScriptFileAttribute)，它按原样呈现部分 Razor 视图，然后在没有周围<script>标记的情况下返回它。这使它成为有效的外部 JavaScript 文件。