将Razor嵌入式JavaScript代码提取到单独文件中的最佳实践

Question

我有一个包含大量内联JavaScript的大型.cshtml文件。对我来说，做这样的事情的能力非常有用：

function submitForm() {
    $.ajax({
        url: "@Url.Action("Action", "Controller")",
        type: "post",
        data: $form.serialize()
    });
}

然而，随着代码大小的增长，Intellisense变得非常慢，我想将我的JavaScript代码提取到一个单独的.js中。文件。我知道有RazorJS但我不想在我的项目中使用它。

我是否应该将这些Razor表达式提取到JavaScript变量中，将剩余的代码提取到单独的文件中，然后从那里引用值？对此最好的做法是什么？

Answer 1

你可以用不引人注目的JS技术做一些事情，例如：将操作放在表单上（即使您实际上没有提交表单）。

查看

<!-- Of course, you would probably use Html.BeginForm() here -->
<form action="@Url.Action("Action", "Controller")" id="form1"></form>

脚本文件

function submitForm() {

    // you can abstract this further if you don't like having IDs 
    // hardcoded (I don't). Data attributes can help with this.
    var form = $("#form1");

    $.ajax({
        url: form.attr("action"),
        type: "post",
        data: form.serialize()
    });
}

  

然而随着代码大小的增加，Intellisense变得非常缓慢   我想将我的JavaScript代码解压缩到一个单独的.js中。   文件。

通过向相关元素添加data-*属性，可以执行更广泛的抽象。虽然这很干净，但它也可能使您的代码过于复杂。

如果您有数百行JavaScript，请务必花时间提取它。如果你只有几十行纯粹的“管道”代码，我会试着找出为什么Intellisense很慢。

Answer 2

还有另一种技术可以做你想做的事，但我不确定它是否理想。

只需创建一个仅包含<script></script>元素的局部视图（.cshtml），并在内部放置您愿意提取的js。

然后您可以将您的Html助手留在JS中，只需在原始页面中使用Html.Partial助手，即可使用您的JS代码显示新创建的局部视图。

由于你的文件是一个cshtml文件，razor会解析它，因为它已经在你当前的页面中进行了。