MVC4中的通用网格
MVC4中的通用网格
提问于 2014-12-09 23:53:44
我的应用程序中有五页是使用ASP.Net MVC4.0使用.aspx引擎创建的。我必须在所有五页中使用Kendo Grid。但我希望避免在五页内复制Kendo网格代码。因为在未来可能有10-15页或更多的将被添加。因此，与其重复代码，还需要创建一个通用的Kendo模板。ie，我应该只创建一个部分类，但下面的详细信息将更改为五个不同的页面。
- 泛型网格应该能够绑定到不同的模型。所有五页的模型更改( Ex: ProductModel、SalesModel、InvoiceModel等)
- 每个模型的列数不同( Ex: ProductModel (5列)、SalesModel (4列)、InvoiceModel (3列))
- 在每一页中，有些列是可排序的，有些列是不可排序的。我应该能具体说明。
- 单击“编辑”和“删除”按钮时，应根据页面填充不同的对话框，并传递不同的参数( Ex:单击ProductModel的“编辑”按钮时，ProductCode应作为参数传递，“编辑产品”对话框应显示，其他页面也应如此)
- 在每个页面中，当用户单击分页和排序按钮时，应该维护并传递这些参数( Ex: search参数也会因每个页面而异)。在中，我应该能够为不同的页面传递不同数量和类型的参数。
- 对于不同的页面，编辑和删除函数名将有所不同。(例如:产品页将有编辑函数名为EditProduct，类似于其他页面EditInvoice等)
通过考虑上述需求，是否有可能创建一个通用的Kendo网格。如果是这样的话，您可以帮助使用不同的技术/指南/示例代码片段/项目。
谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-12-11 11:24:18
让您的定制网格助手像这样。
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() )。
Stack Overflow用户
发布于 2014-12-10 20:10:53
从概念上讲，这是可能的。想到的一个想法是编写您自己的Helper类，以便根据上述需求返回一个新的Kendo。不过，在我看来，使用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实例。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27391069
复制相关文章
相似问题
腾讯云开发者
