Question

我正在尝试确定构建应用程序的最佳方法，以便我不会在整个地方散布大量的javascript。

我有一个ASP.NET MVC应用程序，其视图使用Michael Kennedy对Improve perceived performance of ASP.NET MVC websites with asynchronous partial views的方法加载sllooooowwwww局部视图。部分视图本身呈现DataTables网格（具有自己的CSS / JS文件），以及网格本身的基于Javascript的配置（列格式化，排序默认值，编辑器配置等）。

我的问题是，构建和维护所有这些的干净方法是什么？我在这里涉及至少3种脚本（CSS和/或JS）：

加载局部视图的主视图上的JS。
DataTables的CSS / JSfiles
部分视图中的JS，它在$(document).ready()上运行并配置该特定网格。

我可以控制（在主视图上）使用Razor的@section渲染CSS / JS的脚本/样式（上面的项目＃1）。但是，部分视图无法利用@section功能，因此局部视图中的任何CSS / JS都会被注入页面中间。这并不适合我，因为那时呈现的HTML看起来很讨厌，CSS / JS出现在主视图的中间。当CSS / JS全部存储在外部文件中时，我知道像Cassette这样的东西可以帮助解决第2项。

但是对于第3项，那里我有CSS / JS，这是非常特定的部分视图？它可能是为视图附加click事件处理程序或配置JQuery插件的小事，但这是否意味着我应该将其分成另一个JS文件？如果我不需要，我不喜欢分离这些东西，尤其是每个局部视图的网格配置。

在我的例子中，我有一个包含几个视图的应用程序，这些视图包含渲染网格的部分视图，并且没有网格包含相同的列集 - 所以每个网格的JS配置都不同，它在{{1}上运行}。

Answer 1

由于您提到的原因，我认为根本不会使用部分视图。而不是使用ajax加载部分视图，从控制器加载json数据。使用像handlebars.js这样的JavaScript模板来获取客户端的剃刀效果。更清洁。较小的http负载。

Answer 2

我使用JQGrid的情况类似。在任何使用网格的视图上，我最终使用了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文件的方式，请确保在适当的时候加载它们，而不是在初始页面加载时加载它们。

部分视图和CSS / Javascript

2 个答案: