部分视图和 CSS/Javascript答案

【问题标题】：Partial Views and CSS/Javascript部分视图和 CSS/Javascript
【发布时间】：2014-01-14 22:26:42
【问题描述】：

我正在尝试确定构建我的应用程序的最佳方式，这样我就不会得到大量的 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。
数据表的 CSS/JS 文件
部分视图内的 JS 在 $(document).ready() 上运行并配置该特定网格。

我可以控制（在主视图上）使用 Razor 的 @section 用于脚本/样式（上面的第 1 项）呈现 CSS/JS 的位置。但是，局部视图无法利用@section 功能，因此局部视图中的任何 CSS/JS 都会被注入到页面中间。这对我来说并不是很好，因为渲染的 HTML 看起来很糟糕，CSS/JS 显示在主视图的中间。我知道当 CSS/JS 都存储在外部文件中时，Cassette 之类的东西可以帮助解决第 2 项。

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

在我的例子中，我有一个应用程序，其中包含多个视图，这些视图包含渲染网格的这些局部视图，并且没有一个网格包含相同的列集 - 因此每个网格的 JS 配置是不同的，它们在 $(document).ready() 上运行。

【问题讨论】：

标签： javascript asp.net-mvc partial-views asp.net-mvc-partialview cassette

【解决方案1】：

出于您提到的原因，我会考虑完全不使用部分视图。不是使用 ajax 加载部分视图，而是从控制器加载 json 数据。使用像 handlebars.js 这样的 JavaScript 模板在客户端获得剃须刀效果。干净多了。较小的 http 有效负载。

【讨论】：

感谢您的想法 - 我将研究 handlebars.js，您是否有任何资源对使用 handlebars.js 的 ASP.NET MVC Web 应用程序进行概念验证？另外（只是为了论证），假设我想坚持使用 Razor 模板来处理部分视图 - 有什么好方法可以组织部分视图本身使用的 Javascript？
对不起，大卫，但我也没有。如果这是一个新项目，您可能需要考虑使用服务器仅通过 REST API 返回裸数据，服务器中没有 UI 的方法。没有服务器页面，根本没有 .cshtml。在客户端，静态 html 页面从服务器获取 JSON，并使用模板/客户端 MVC（如 ember 或 Angular）从数据中生成 ui。通过这种方式，您可以很好地分离服务器和客户端，服务器是什么对客户端无关紧要，反之亦然。客户端最终可能是非 html，例如原生智能手机应用程序。

【解决方案2】：

我在使用 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() {

        });
    }

};

尝试抽象出尽可能多的可重用 DataTable 绑定和初始化代码，然后在局部视图上从 JavaScript 调用抽象方法。

如果您采用外部 javascript 文件的方式，请确保在适当的时间加载它们，而不是在初始页面加载时全部加载。

【讨论】：