Javascript 在MVC应用程序中组织JS代码

我在几个部分视图中有几个JS代码

我认为最好将所有这些代码放在分离的JS文件中，以将JS代码与HTML代码分离

但是如何处理JS中的MVC代码呢

下面的例子是我在局部视图中看到的JS代码。我想放入JS文件，但JS代码有MVC代码

@Url.Action（“ResultForm”，“file”）

，它不会在JS文件中执行

有什么建议吗

Javascript代码

<script type="text/javascript">
    var varTimerSpeed = 5000;
    var varTimerInterval;
    var onlyOneInstance = false;

    startTimer();

    function startTimer() {
        onlyOneInstance = false;
        varTimerInterval = setInterval(loadResultForm, varTimerSpeed);
    }

    function loadResultForm() {
        if (onlyOneInstance) return;
        clearInterval(varTimerInterval);
        onlyOneInstance = true;
        $.ajax({
            url: '@Url.Action("ResultForm", "File")',
            data: '',
            dataType: 'html',
            success: function (data) {
                $('#ResultForm').html(data);
                startTimer();
            }
        });
    };
</script>

var varTimerSpeed=5000；
var varTimerInterval；
var onlyOneInstance=false；
startTimer（）；
函数startTimer（）{
onlyOneInstance=false；
varTimerInterval=setInterval（loadResultForm，varTimerSpeed）；
}
函数loadResultForm（）{
如果（仅限即时）返回；
clearInterval（varTimerInterval）；
onlyOneInstance=true；
$.ajax({
url:'@url.Action（“结果格式”，“文件”），
数据：“”，
数据类型：“html”，
成功：功能（数据）{
$（'#ResultForm'）.html（数据）；
startTimer（）；
}
});
};

创建一个文件“somescript.js”，将代码放在一个唯一的公共函数中，提取硬编码的外部依赖项，并将其替换为参数

var startXyz = function(resultFormUrl) {
    var varTimerSpeed = 5000;
    var varTimerInterval;
    var onlyOneInstance = false;

    startTimer();

    function startTimer() {
        onlyOneInstance = false;
        varTimerInterval = setInterval(loadResultForm, varTimerSpeed);
    }

    function loadResultForm() {
        if (onlyOneInstance) return;
        clearInterval(varTimerInterval);
        onlyOneInstance = true;
        $.ajax({
            url: resultFromUrl,
            data: '',
            dataType: 'html',
            success: function (data) {
                $('#ResultForm').html(data);
                startTimer();
            }
        });
    };
};

然后，在页面中执行以下操作：

<script>
   $(function(){ 
       startXyz('@Url.Action("ResultForm", "File")');
   });
</script>

$（函数（）{
startXyz（'@Url.Action（“ResultForm”，“File”））；
});

现在，您有了一个模块化函数，可以启动页面/部分，还有一个脚本文件，它不直接依赖于服务器状态，可以在同一页面或其他页面上重用

---

如果一个局部视图每页呈现不止一次，这种方法尤其有用。

解决方案是使用所需的动态值创建一个

meta

标记或

data-*

属性，并用JavaScript捕捉它。通过这种方式，您可以通过细微的更改将代码完全分离。

我假设只对js代码使用Razor partial是不可取的。在这种情况下，您可以使用这种方法：

在your view.cshtml中

<script type="text/javascript">
    var Namespace.urlForModule = '@Url.Action("ResultForm", "File")';
</script>
<script type="text/javascript" src="customScript.js"></script>

其思想是将Asp.NETMVC特定代码与js代码分开

---

你想怎么做取决于你自己。正如其他人所建议的，您可以将data-*属性附加到某个div并读取它们。我更喜欢这样，因为它清楚地表达了我的意图。

您可以使用url添加隐藏字段：

// View:   
@Html.Hidden("LoadResultFormUrl", @Url.Action("ResultForm", "File"))

// js-file
function loadResultForm() {
    url = $("#LoadResultFormUrl").val();
    ...
};

---

为什么不创建一个只包含js代码的局部视图

---

而不是添加脚本标记，而是执行一个

renderpartial

。

不采用这种方法的原因是，它要求您以无法缓存的方式在每个页面上输出相同的JS，从而增加站点中每个页面的总下载大小。相反，如果包含引用外部文件的脚本标记，则该文件可以在客户端缓存，并且只有在进行更改时才能重新下载。

// View:   
@Html.Hidden("LoadResultFormUrl", @Url.Action("ResultForm", "File"))

// js-file
function loadResultForm() {
    url = $("#LoadResultFormUrl").val();
    ...
};