2

我正在尝试确定构建我的应用程序的最佳方式，这样我就不会到处乱扔 javascript。

我有一个带有视图的 ASP.NET MVC 应用程序，该应用程序使用 Michael Kennedy 的方法来加载 sllooooowwwww 局部视图，以提高异步局部视图的 ASP.NET MVC 网站的感知性能。部分视图本身正在渲染一个DataTables网格（它有自己的 CSS/JS 文件），以及网格本身的基于 Javascript 的配置（列格式、排序默认值、编辑器配置等）。

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

  1. 加载局部视图的主视图上的 JS。
  2. 数据表的 CSS/JS 文件
  3. 局部视图内的 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().

4

2 回答 2

2

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

于 2014-01-14T23:37:57.780 回答
1

我在使用 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 文件的方式，请确保您在适当的时间加载它们，而不是在初始页面加载时将它们全部加载。

于 2014-01-15T14:30:46.667 回答