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

时间:2012-08-07 11:24:36

标签: javascript asp.net-mvc-3

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

我认为将所有这些代码放在单独的JS文件中以将JS代码与HTML代码分开是个好主意。

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

以下示例是我在部分View中看到的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>

5 个答案:

答案 0 :(得分:3)

我假设使用Razor部分仅用于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,
})

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

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

答案 1 :(得分:1)

解决方案是使用所需的动态值创建meta标记或data-*属性,并使用JavaScript捕获它。这样,您可以完全分离代码并进行微小更改。

答案 2 :(得分: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>

现在你有了一个模块化的功能,可以启动你的页面/部分和一个不直接取决于服务器状态的脚本文件,可以在同一个页面或另一个页面上重复使用。

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

答案 3 :(得分:0)

您可以使用网址添加隐藏字段:

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

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

答案 4 :(得分:0)

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