在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代碼

回答

相關問題