3

我在几个局部视图中有几个 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>
4

5 回答 5

3

我假设仅对 js 代码使用 Razor 部分不是一个选项。在这种情况下，您可以使用这种方法：

在你的 view.cshtml

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

在你 customScript.js

$.ajax({
    url: Namespace.urlForModule,
})

这个想法是从 js 代码中分离出 Asp.Net MVC 特定代码。

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

于 2012-08-07T12:04:47.453 回答
1

一种解决方案是创建具有所需动态值的meta标记或属性，并使用 JavaScript 捕获它。data-*通过这种方式，您可以通过微小的更改完全分离代码。

于 2012-08-07T11:58:51.920 回答
0

创建一个文件“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>

现在您有一个模块化功能，它将启动您的页面/部分和一个不直接依赖于服务器状态并且可以在相同或另一个页面上重用的脚本文件。

如果部分视图在每页中多次呈现，则此方法特别有用。

于 2012-08-07T11:58:31.277 回答
0

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

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

// js-file
function loadResultForm() {
    url = $("#LoadResultFormUrl").val();
    ...
};
于 2012-08-07T12:22:24.627 回答
0

为什么不只创建一个只包含 js 代码的局部视图，
而renderpartial不是添加脚本标记？

于 2012-08-07T12:24:48.073 回答