我的应用程序中有五个页面 ASP.Net 使用.aspx引擎在 MVC 4.0 中创建。我必须在所有五个页面中使用剑道网格。但我想避免在五页中重复剑道网格代码。因为将来可能会添加10-15页或更多。因此,该时间需要创建一个通用的剑道网格模板,而不是复制代码。即,我应该只创建一个分部类,但以下详细信息将针对五个不同的页面进行更改。
- 通用网格应该能够绑定到不同的模型。 即,所有五个页面中的模型更改( 例如:产品模型,销售模型、发票模型等(
- 每个模型的列数会有所不同(例如:产品模型(5 列(、销售模型(4 列(、发票模型(3 列(( 在每个页面中,有些列是可排序的
- ,有些列是不可排序的。我应该能够指定。
- 当单击编辑和删除按钮时,我应该根据页面填充不同的对话框,我应该通过不同的参数( 例如:当单击产品模型的编辑按钮时,产品代码应作为参数传递和应该显示"编辑产品"对话框,其他页面也是如此(
- 在每个页面中,当用户单击分页和排序按钮时,都有搜索参数,这些参数应该是维护并传递这些参数( 例如:每个页面的搜索参数也会有所不同。在读取函数中网格 I 应该能够为不同的页面传递不同数量和类型的参数。
- 不同页面的编辑和删除函数名称会有所不同。(例如:产品页面将具有编辑功能名称为编辑产品,类似于其他页面编辑发票等(
通过考虑上述要求,是否可以创建通用剑道网格。如果是这样,您可以帮助不同的技术/指南/示例代码片段/项目。
谢谢。
像这样制作自定义网格助手。
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和2
从概念上讲,这可能是可能的。我想到的一个想法是编写自己的 HTML 帮助程序类,以根据上述要求返回新的 Kendo UI 网格。不过,在我看来,使用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示例。