MVC4中的通用网格

时间:2014-12-09 23:53:45

标签: asp.net-mvc-4 kendo-ui kendo-grid kendo-asp.net-mvc

我在使用.aspx引擎在ASP.Net MVC 4.0中创建的应用程序中有五个页面。 我必须在所有五个页面中使用Kendo Grid。但我希望避免在五页中复制Kendo Grid代码。 因为将来可能会增加10-15页或更多。所以那个时候而不是复制代码,需要创建一个通用的Kendo Grid模板。即,我应该只创建一个部分类,但下面的细节将改变五个不同的页面。

  1. 通用网格应该能够绑定到不同的模型。即,所有五个页面中的模型更改(例如:ProductModel, SalesModel,InvoiceModel等)
  2. 每个型号的列数不同(例如:ProductModel(5列),SalesModel(4列),InvoiceModel(3列))
  3. 在每个页面中,有些列是可排序的,有些列不可排序。我应该可以指定。
  4. 当点击编辑和删除按钮时,我应该根据页面填充不同的对话框,我应该通过 不同的参数(例如:当点击ProductModel的编辑按钮时,ProductCode应作为参数传递 应显示“编辑产品”对话框,类似于其他页面)
  5. 在每个页面中,当用户点击分页和排序按钮时,应该有搜索参数 维护并传递这些参数(例如:每个页面的搜索参数也会有所不同。在Read函数中 网格我应该能够为不同的页面传递不同数量和类型的参数。
  6. 不同页面的编辑和删除功能名称会有所不同。 (例如:产品页面将具有编辑功能 名称为EditProduct,类似于其他页面EditInvoice等)
  7. 通过考虑上述要求,是否可以创建通用剑道网格。如果是这样,请帮助您使用不同的技术/指南/示例代码段/项目。

    感谢。

2 个答案:

答案 0 :(得分:2)

制作像这样的自定义网格助手。

    public static Kendo.Mvc.UI.Fluent.GridBuilder<T>
    GridEx<T>(this HtmlHelper helper
               , <other parameters that you like e.g. IList for column and field definition>
             ) where T : class
    {
        return helper.Kendo().Grid<T>()
            .Name(<your parameter>)
            .DataSource(dataSource => dataSource
            .Ajax()
            .Model(
                model =>
                {
                    model.Id("CustomerID");
                    // optional foreach
                }
        )
        // param1 or string controllerName= helper.ViewBag.controllerName
        .Create(create => create.Action("_Create", controllerName)) 
        .Read(read => read.Action("_Read", controllerName))
        .Update(update => update.Action("_Update", controllerName))
        .Destroy(destroy => destroy.Action("_Delete", controllerName))
        )
        .Columns(columns =>
        {
            // you can also access helper.ViewBag to get extra data
            foreach (var col in new[] { "CustomerID", "CustomerName" })
            {
                columns.Bound(col);
            }
            columns.Command(commands =>
            {
                commands.Edit();
                commands.Destroy();
            }).Title("Commands").Width(200);
        })
        .ToolBar(toolBar => toolBar.Create())
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Sortable();
    }

在视图中将此助手用作@( Html.GridEx<CustomerViewModel>().Pageable() )

要获得更多自定义功能,您还可以看到这两个链接1&amp; 2

答案 1 :(得分:0)

从概念上讲,这可能是可能的。想到的一个想法是编写自己的HTML Helper类,以根据上述要求返回新的Kendo UI Grid。但在我看来,使用JavaScript实现而不是ASP.NET MVC包装器更容易做到这一点。

<强>更新

我不会假装我理解MVC包装器足以提供代码示例,但是,我确实更了解JavaScript实现。

HTML

<body>
  <div id="grid1"></div>
  <br/>
  <div id="grid2"></div>
</body>

的JavaScript

(function() {
  'use strict';

  var peopleData = [
    { name: 'Bob', age: 37, gender: 'M' },
    { name: 'Sue', age: 26, gender: 'F' },
    { name: 'Joe', age: 42, gender: 'M' }
  ];
  var peopleCols = [
    { field: 'name', title: 'Name', template: '<em>#=name#</em>' },
    { field: 'age', title: 'Age' },
    { field: 'gender', title: 'Gender' }
  ];
  var peopleOptions = {
    dataSource: peopleData,
    columns: peopleCols,
    selectable: 'row'
  };

  var officeData = [
    { dept: 'Human Resoures', office: '123' },
    { dept: 'Accounting', office: '321' },
    { dept: 'Legal', office: '231' }
  ];
  var officeCols = [
    { field: 'dept', title: 'Dept.', template: '<strong>#=dept#</strong>' },
    { field: 'office', title: 'Office#' }
  ];
  var officeOptions = {
    dataSource: officeData,
    columns: officeCols,
    sortable: true
  };

  var grid1 = createGrid('#grid1', peopleOptions),
      grid2 = createGrid('#grid2', officeOptions);

  // you can then use these vars to bind additional events or access its API
  grid1.removeRow('tr:eq(1)');

  function createGrid(selector, options) {
    return $(selector).kendoGrid(options).data('kendoGrid');
  }
})();

虽然概念是一样的。定义一个接受网格选项的函数,根据这些选项创建网格,并返回对网格的引用。以下是上述代码的JSBin example