过滤器组件简介

过滤器的一部分Telerik UI for ASP。网络核心，一个具有 110+ 组件的专业级UI库，用于构建现代和功能丰富的 应用程序。想要试用它，可以注册一个30天的免费试用期。

下载免费试用

Telerik UI过滤器TagHelper和HtmlHelper。网络核心are server-side wrappers for the Kendo UI Filter widget. To add the component to your ASP.NET Core app, you can use either.

属性的数据绑定组件进行过滤的统一控件数据源．Filter的用户界面对于没有用于过滤的内置UI但需要提供过滤选项的数据绑定组件非常有用——例如，ListView、Chart和Scheduler。

您可以添加或删除用于筛选数据的字段，并选择筛选器的全局逻辑(例如，和或或)和每个字段的过滤操作符(例如，包含或=)．您可以通过内置按钮或API调用应用过滤。您还可以选择将字段显示给用户和的名称本地化筛选操作符和消息。

• Filter HtmlHelper的演示页面

• Filter TagHelper的演示页面

初始化过滤器

要使用筛选器，必须定义一个独立数据源，并按名称将其传递给筛选器和将使用它的数据绑定控件。

下面的示例演示如何:

• 将筛选器绑定到数据源。
• 在列表视图中显示过滤后的数据。
• 为字段使用人类可读的名称。
• 设置一个初始过滤器表达式。

• 不需要提供字段，因为Filter可以从数据源中提取字段。如果在筛选器设置中不设置字段，则实际字段的名称，而不是人类可读的标签，将显示给用户。如果在筛选器设置中设置字段，则它们必须与数据源的模式匹配。
• 不需要提供初始筛选器表达式。此特性用于恢复以前的状态．

 @(Html.Kendo(). datasource () .Name("dataSource1") . ajax (d=>d. ajax)。Read(r => r. action ("GetPeople"， "Filter")))) @(Html.Kendo().Filter() . name (" Filter") . mainlogic (FilterCompositionLogicalOperator.And) . expressionpreview() //显示过滤器表达式的文本预览. applybutton() //显示内置的Apply按钮. fields (f => //定义字段不是强制的。否则，它们将从数据源模式中获取。//如果你定义了字段，它们的名称和类型必须匹配数据源定义。{f.Add (p = > p.Name) .Label(“名字”);f.Add (p = > p.a ge) .Label(“年龄”);f.Add (p = > p.IsOnLeave)。标签(“度假”);}) . filterexpression (f =>{//不需要定义初始过滤器表达式。f.Add(p => p. age).IsGreaterThanOrEqualTo(30);f.Add(p => p. name).Contains("Doe"); }) .DataSource("dataSource1") ) @(Html.Kendo().ListView() .Name("listView") .TagName("ul") .DataSource("dataSource1") .ClientTemplateId("itemTemplate") ) 

< kendo-datasource type = " DataSourceTagHelperType。Ajax" name="dataSource1" server-operation="false"> <传输> <读取url="@Url。行动(“GetPeople”、“过滤器”)”/>   @{@using Kendo。Mvc var InitialExpression = new CompositeFilterDescriptor {LogicalOperator = FilterCompositionLogicalOperator。};InitialExpression.FilterDescriptors。添加(new FilterDescriptor {Member = "Age"， Value = 30, Operator = FilterOperator.)IsGreaterThanOrEqualTo});InitialExpression.FilterDescriptors。新增(new FilterDescriptor {Member = "Name"， Value = "Doe"， Operator = FilterOperator.)包含});}              

使用Kendo.Mvc.Extensions;使用Kendo.Mvc.UI;公开课FilterController: BaseController{公共ActionResult GetPeople ([DataSourceRequest] DataSourceRequest请求){var =新列表< SampleData >(){新SampleData () {Name = " Jane Doe”,= 25岁IsOnLeave = false},新SampleData () {Name =“John Doe”= 33岁IsOnLeave = true},新SampleData () {Name =“约翰·史密斯”= 37岁IsOnLeave = true},新SampleData () {Name =“Nathan Doe”= 42岁IsOnLeave = false}};返回Json (people.ToDataSourceResult(请求));} public ActionResult Index() {return View();}}

公共类SampleData{公共int年龄{获取;设置;}公共字符串名称{获取;设置;} public bool IsOnLeave{获取;设置;}}

功能和特性

• 设置操作符
• 持久化状态
• 全球化

引用现有实例

要引用现有筛选器实例，请使用jQuery.data ()方法。建立了引用之后，使用筛选客户端API控制它的行为。