界面组件Telerik ASP.NET MVC使用指南 - 如何自定义网格过滤（一）

Telerik ASP.NET MVC拥有使用JavaScript和HTML5构建网站和移动应用所需的70UI部件来满足开发者的各种需求提供无语伦比的开发性能和用户体验。它主要是针对专业级的 ASP.NET开发通过该产品的强大功能开发者可以开发出功能丰富、适应标准广泛的响应式应用程序。对于任何长度的网格如果用户没有能力将条目过滤到他们真正感兴趣的条目那么开发的页面体验就会很差只有在让用户找到他们需要的项目才能体现开发的应用的价值。更具体地说虽然提供了用户可能需要的每个过滤选项但默认设置并不关注用户在这个UI中需要什么。Telerik ASP.NET MVC的网格组件提供了创建专注于用户实际需求的过滤体验所需的所有选项。下面是添加到应用程序默认索引中的网格标记例如cshtml Razor Page(它几乎MVC视图中使用的内容相同)kendo-grid nameproducts datasource nameproductsDS typeDataSourceTagHelperType.Ajax transport read urlUrl.Page(/Index,Read) datadataFunction / /transport schema model fields field nameTotalQuantity typenumber/field field nameLastDelivery typedate/field field nameInStock typeboolean/field /fields /model /schema /datasource columns column fieldProductId titleId width100 / column fieldProductName titleName width240/ column fieldLastDelivery format{0:MMM-dd} titleLast Delivery width150 / column fieldInStock titleIn Stock width150 / column fieldTotalQuantity titleQuantity on Hand width150 / /columns filterable enabledtrue moderow / /kendo-grid从过滤的角度来看标记中有趣的元素是最后一个可过滤元素它通过将Grid的过滤模式设置为“row”将所有列的过滤菜单配置为用户更友好的内容。虽然可过滤元素是自定义网格Grid过滤功能的第一步但在自定义网格Grid过滤功能时网格Grid标记中的其他部分也很重要。数据源传输元素中的read元素指定将Grid下载到浏览器后从哪里获取数据传输元素还支持更新/删除/插入请求因此它的所有调用都作为POST请求发送到数据源。这也是反映Grid在Razor Page上的唯一区域将读取选项设置为指向Razor Page中处理程序方法的URL使用 Url. Page只需要传递页面名称和处理程序名称。模式该元素允许开发者为网格列出的复杂对象属性指定数据类型在本文示例中是Product对象默认情况下所有对象的属性都假定为字符串类型所以开发者只需要为那些不是字符串的属性提供类型TotalQuantity(一个数字)LastDelivery(一个日期)和InStock(一个布尔值)。列该元素定义Grid中的列指定要显示对象上的属性和一些附加选项例如列的标题、数据的格式字符串等。当网格显示一个对象时筛选是围绕Grid的列组织的。代码为了记录这里是页面代码隐藏文件中的c#代码。当页面第一次被请求时OnGet方法被自动调用并加载一个名为ps的Product对象集合。在浏览器中显示网格时调用OnPostRead方法使用在网格的传输部分中设置的URL。由于Grid的调用总是POST请求并且将处理程序名称指定为“Read”所以方法必须调用OnPostRead。这个例子返回将ps List转换成网格可以使用的JSON结果public class IndexModel : PageModel { public static IListProduct ps; public async void OnGet() { if ( ps null) { ProductRepo pr new ProductRepo(); ps await pr.GetAllAsync(); } } public JsonResult OnPostRead([DataSourceRequest] DataSourceRequest request) { return new JsonResult(ps.ToDataSourceResult(request)); } }可以设置网格来调用任何想要的Web服务开发者更偏爱Razor Pages将所有内容捆绑到一个包中的方式也可以很容易地使用实体框架上下文和表来构建网格的对象列表。