部分視圖和CSS/Javascript

我試圖確定構建我的應用程序的最佳方式，以便我不會在各處散落大量的JavaScript。部分視圖和CSS/Javascript

我有一個ASP.NET MVC應用程序的視圖加載sllooooowwwww部分視圖使用邁克爾·肯尼迪的方法Improve perceived performance of ASP.NET MVC websites with asynchronous partial views。部分視圖本身呈現DataTables網格（其具有其自己的CSS/JS文件）以及網格本身的基於Javascript的配置（列格式設置，排序默認值，編輯器配置等）。

我的問題是什麼是一個乾淨的方式來構建和維護所有這一切？我在這裏涉及至少3種腳本（CSS和/或JS）：

加載部分視圖的主視圖上的JS。
DataTables的CSS/JS文件
部分視圖中的JS在$(document).ready()上運行並配置該特定網格。

我還可以控制（主視圖），其中CSS/JS使用Razor的@section爲腳本/樣式（上述項目＃1）呈現。但是，局部視圖不能利用功能，因此局部視圖中的任何CSS/JS都會注入到頁面的中間。這對我來說並不是很好，因爲然後渲染的HTML看起來都很討厭，CSS/JS出現在主視圖的中間。我知道像Cassette這樣的東西可以幫助項目＃2當CSS/JS都存儲在外部文件中。

但是對於項目＃3來說，我有哪些CSS/JS非常特定於部分視圖？它可能與附加視圖的單擊事件處理程序或配置JQuery插件一樣小，但是這是否意味着我應該將它分離出來放入另一個JS文件中？如果我不需要，我不喜歡分開這些東西，特別是每個局部視圖的網格配置。

在我的情況，我有一個應用程序包含這些部分視圖呈現網格，並沒有一個網格包含相同的一組列 - 所以每個網格的JS配置是不同的，在$(document).ready()上運行。

來源

2014-01-14 David McClelland

因爲您提到的原因，我會考慮不使用部分視圖。不要用ajax加載部分視圖，而是從控制器加載json數據。使用像handlebars.js這樣的JavaScript模板來獲得客戶端的剃鬚刀效果。更清潔。較小的http有效負載。

來源

2014-01-14 23:37:57 CodeToad

感謝您的想法 - 我將研究handlebars.js，你有任何資源，有ASP.NET MVC Web應用程序使用handlebars.js的概念驗證嗎？另外（僅僅爲了參數的緣故），假設我想堅持使用Razor模板進行部分視圖 - 組織部分視圖本身內使用的Javascript的好方法是什麼？ –

對不起大衛，但我也沒有。如果這是一個新項目，您可能需要考慮使用服務器通過rest API返回裸數據的方法，而不是服務器中的UI。沒有服務器頁面，根本沒有.cshtml。在客戶端，靜態html頁面從服務器獲取JSON，並使用模板/客戶端MVC（如ember或angular）從數據生成ui。以這種方式完成，你在服務器和客戶端之間有很好的分離，它不關心客戶端的服務器，反之亦然。客戶端最終可能是非HTML的，如本地智能手機應用程序。 – CodeToad

我有類似的情況使用JQGrid。我最終在使用網格的任何視圖上使用了JavaScript。我的解決辦法是把任何繁重工作的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() { 

     }); 
    } 

};

嘗試抽象儘可能多的可重複使用的數據表綁定和初始化代碼，則只需撥打您的抽象方法部分視圖上的JavaScript。

如果您採用外部JavaScript文件的方式，請確保您在適當的時候加載它們，而不是在初始頁面加載時加載它們。

來源

2014-01-15 14:30:46 user3119537

部分視圖和CSS/Javascript

回答

相關問題