在MVC应用程序中组织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>

来源

2012-08-07 Tomas

我假设使用剃刀局部只有js代码不是一个选项。在这种情况下，你可以使用这种方法：

在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, 
})

的想法是分离出Asp.Net MVC特定代码来自js代码。

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

来源

2012-08-07 12:04:47

创建一个文件“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-07 11:58:31 devundef

一个解决方案是创建一个meta标签或一个data-*属性与所需的动态值并用JavaScript来捕获它。通过这种方式，您可以将代码完全分开，只需稍作更改

来源

2012-08-07 11:58:51 rcdmk

您可以添加隐藏字段与网址：

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

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

来源

2012-08-07 12:22:24 Sufflavus

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

来源

2012-08-07 12:24:48

不走这条路线的原因是它需要你以不能缓存的方式将相同的JS输出到每个页面上，从而增加了站点中每个页面的整体下载大小。相反，如果您包含引用外部文件的脚本标记，那么该文件可以是客户端缓存的，并且只要进行了更改就可以重新下载。 – 2012-08-08 22:12:27

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

回答

相关问题