Asp.net mvc 4 MVC4中的通用网格

我的应用程序中有五个页面是在ASP.NETMVC4.0中使用.aspx引擎创建的。 我必须在所有的五页中使用剑道网格。但是我想避免在五页中重复剑道网格代码。 因为将来可能会增加10-15页或更多。因此，此时需要创建一个通用剑道网格模板，而不是复制代码。即，我应该只创建一个分部类，但下面的详细信息将针对五个不同的页面进行更改

通用网格应该能够绑定到不同的模型。即，所有五页中的型号更改（例如：ProductModel， 销售模型、发票模型等）

每个型号的列数不同（例如：ProductModel（5列）、SalesModel（4列）、InvoiceModel（3列））

在每个页面中，有些列可排序，有些列不可排序。我应该可以具体说明

当点击编辑和删除按钮时，我应该根据页面填充不同的对话框，我应该通过 不同的参数（例如：当点击ProductModel的编辑按钮时，ProductCode应该作为参数传递，并且 应显示“编辑产品”对话框，类似于其他页面）

在每个页面中，当用户单击分页和排序按钮时，都会显示搜索参数，这些参数应该是 维护并传递这些参数（例如：每个页面的搜索参数也会有所不同 Grid I应该能够为不同的页面传递不同数量和类型的参数

不同页面的编辑和删除功能名称将不同。（例如：产品页面将具有编辑功能。） 名称为EditProduct，类似于其他页面EditInvoice等）

通过考虑上述要求，是否可以创建一个通用剑道网格。如果可以，请您提供不同技术/指南/示例代码段/项目方面的帮助

---

谢谢。

从概念上讲，这是可能的。我想到的一个想法是编写自己的HTML助手类，根据上述要求返回一个新的剑道UI网格。不过，在我看来，使用JavaScript实现比使用ASP.NET MVC包装器更容易做到这一点

更新：

我不会假装我对MVC包装器的理解足以提供一个代码示例，但是，我对JavaScript实现的理解要好得多

HTML

JavaScript

（函数（）{
"严格使用",；
变量peopleData=[
{姓名：'Bob'，年龄：37岁，性别：'M'}，
{姓名：'Sue'，年龄：26岁，性别：'F'}，
{姓名：'Joe'，年龄：42岁，性别：'M'}
];
var peopleCols=[
{字段：'name'，标题：'name'，模板：'#=name#'}，
{字段：'age'，标题：'age'}，
{字段：“性别”，标题：“性别”}
];
var peopleOptions={
数据来源：peopleData，
专栏：peopleCols，
可选：“行”
};
变量officeData=[
{部门：'人力资源'，办公室：'123'}，
{部门：'会计'，办公室：'321'}，
{部门：'法律'，办公室：'231'}
];
变量officeCols=[
{字段：'dept'，标题：'dept'，模板：'#=dept'}，
{字段：'office'，标题：'office}
];
var officeOptions={
数据来源：officeData，
栏目：officeCols，
可排序：正确
};
var grid1=createGrid（'#grid1'，peopleOptions），
grid2=createGrid（'#grid2'，officeOptions）；
//然后可以使用这些变量绑定其他事件或访问其API
grid1.removeRow（'tr:eq（1）'）；
函数createGrid（选择器、选项）{
返回$（选择器）.kendoGrid（选项）.data（'kendoGrid'）；
}
})();

---

但概念是一样的。定义一个接受网格选项的函数，根据这些选项创建网格，并返回对网格的引用。下面是上面代码的一部分。

使您的自定义网格帮助器与此类似

    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();
    }

public static Kendo.Mvc.UI.Fluent.GridBuilder
GridEx（此HtmlHelper帮助程序）
, 
)T:在哪里上课
{
返回helper.Kendo（）.Grid（）
.Name（）
.DataSource（DataSource=>DataSource
.Ajax（）
.模型(
型号=>
{
模型Id（“客户Id”）；
//可选foreach
}
)
//param1或字符串controllerName=helper.ViewBag.controllerName
.Create（Create=>Create.Action（“_Create”，controllerName））
.Read（Read=>Read.Action（“\u Read”，controllerName））
.Update（Update=>Update.Action（“\u Update”，controllerName））
.Destroy（Destroy=>Destroy.Action（“\u Delete”，controllerName））
)
.列（列=>
{
//您还可以访问helper.ViewBag以获取额外数据
foreach（新[]{“CustomerID”、“CustomerName”}中的var col）
{
列。绑定（col）；
}
columns.Command（commands=>
{
commands.Edit（）；
commands.Destroy（）；
}).标题（“命令”）。宽度（200）；
})
.ToolBar（ToolBar=>ToolBar.Create（））
.Editable（可编辑=>Editable.Mode（GridEditMode.InLine））
.Sortable（）；
}

在视图中将此帮助程序用作

@（Html.GridEx（）.Pageable（））

---

有关更多自定义信息，您也可以查看这两个链接&

关于此pleaseThanks Brett的任何更新。请您提供代码段/示例/链接。谢谢Brett。我实现了ASP.Net MVC包装。谢谢。我实现了上述代码，到目前为止没有任何问题。如果有任何问题，我将返回给您。再次感谢。谢谢@（Html.GridEx（）.Pageable（））-->您应该给出method路径而不是“Html”。例如ProjectName.GridEx

(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');
  }
})();

    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();
    }