部分視圖和CSS / Javascript

Question

我正在嘗試確定構造應用程序的最佳方法，以免到處散布很多JavaScript。

我有一個帶有視圖的ASP.NET MVC應用程序，該視圖使用Michael Kennedy的方法來加載sllooooowwwww部分視圖，以改善具有異步部分視圖的ASP.NET MVC網站的感知性能 。 局部視圖本身正在呈現DataTables網格（具有自己的CSS / JS文件），以及網格本身的基於Javascript的配置（列格式，默認排序，編輯器配置等）。

我的問題是構造和維護所有這些內容的干凈方法是什么？ 我至少涉及3種腳本（CSS和/或JS）：

1. 主視圖上的JS將加載部分視圖。
2. DataTables的CSS / JSfiles
3. 在$(document).ready()並配置該特定網格的部分視圖內的JS。

我可以控制（在主視圖上）使用Razor的@section腳本/樣式（上面的項目1）來呈現CSS / JS。 但是，部分視圖無法利用@section功能，因此部分視圖中的所有CSS / JS都將注入到頁面中間。 這對我來說真的不是很好，因為渲染的HTML看起來很討厭，而CSS / JS出現在主視圖的中間。 我知道，當CSS / JS全部存儲在外部文件中時，類似Cassette的東西可以對Item＃2有所幫助。

但是，對於第3項，我有專門針對該局部視圖的CSS / JS呢？ 它可能很小，例如為視圖附加單擊事件處理程序或配置JQuery插件，但這是否意味着我應該將其分離到另一個JS文件中？ 如果不需要，我不喜歡分離這些東西，尤其是每個局部視圖的網格配置。

在我的情況下，我有一個帶有多個視圖的應用程序，這些視圖包含渲染網格的這些局部視圖，並且沒有一個網格包含相同的列集-因此每個網格的JS配置都不同，它們在$(document).ready() 。

Answer 1

由於您提到的原因，我將考慮完全不使用局部視圖。 而不是使用Ajax加載部分視圖，而是從控制器加載json數據。 使用諸如handlebars.js之類的JavaScript模板在客戶端獲得剃刀效果。 干凈得多。 較小的http有效負載。

Answer 2

我在使用JQGrid時遇到了類似的情況。 在使用網格的任何視圖上，我最終都將JavaScript放到了wazoo上。 我的解決方案是將任何繁重的javascript放入外部文件，並按如下所示對它們命名空間：

var JqGridHelper = JqGridHelper || {};
JqGridHelper.SetupGrid = function (gridTable, pager, gridJson, colNameJson, colModelJson, label, rowNum, gridCompleteFunc, columnChooser) {
    gridTable.jqGrid({
        datatype: "local",
        data: gridJson,
        colNames: colNameJson,
        colModel: colModelJson,
        rowNum: rowNum,
        autowidth: true,
        height: '100%',
        pager: pager,
        sortname: 'id',
        viewrecords: true,
        sortorder: "desc",
        caption: label,
        gridComplete: gridCompleteFunc
    });

    gridTable.jqGrid('navGrid', pager, { edit: false, add: false, del: false });
    if (columnChooser == true) {
        JqGridHelper.AddColumnChooser(gridTable, pager, function() {

        });
    }

};

嘗試提取盡可能多的可重復使用的DataTable綁定和初始化代碼，然后僅在局部視圖上從JavaScript調用抽象的方法。

如果您使用外部javascript文件，請確保在適當的時間加載它們，而不是在初始頁面加載時全部加載它們。