Ignite UI for JavaScript控件与ASP.NET MVC应用程序无缝协作。只需使用几行代码，就可以将高性能Ignite UI for JavaScript Grid的强大功能引入ASP.NET MVC应用程序。
除了无缝呈现大型数据集之外，Ignite UI for JavaScript网格还加载了许多其他功能，如筛选、分页和排序。在这篇博客文章中，您将学习如何在网格上配置各种重要功能，包括排序、筛选和分页。这些功能可用作本地客户端功能或远程服务器端功能。在这篇文章中，我们将重点介绍这些功能的本地版本; 远程版本将在以后的文章中介绍。
要开始，请按照最近的博客文章 “ 添加Ignite UI for JavaScript网格到ASP.NET MVC应用程序 ” 中的步骤操作。完成后，应用程序将显示在Ignite UI网格中呈现的学生数据表。
从这里开始，我们将在这个网格上启用各种功能。请记住，在这篇文章中，您将学习使用GridModel类选项启用各种功能。(我们将在以后的博客文章中学习使用链接语法选项启用各种功能。)
启用分页
您可以通过向网格添加 “分页” 的功能配置对象，在Ignite UI for JavaScript网格上启用分页。在GridModel类方法中，要在控制器中启用分页，请添加下面列出的代码:
GridPaging分页 = 新建GridPaging()；PageSize = 3；paging.Type = OpType.Local;studentGrid.Features.Add (分页)；
与在GridModel类中一样，GridPaging类是Infragistics.Web.Mvc的一部分。在上面的代码片段中，您正在创建GridPaging类的实例，并设置所需的属性，如PageSize (设置每页的记录数) 和Type (本地或远程)。要启用分页功能，您需要将GridPaging对象添加到GridModel功能列表中。
把所有的东西放在一起，你的控制器中的索引方法应该是这样的:
公共ActionResult索引 (){StudentsEntities模型 = 新StudentsEntities()；IQueryable studentsData = model.Students.ToList().AsQueryable(); GridModel studentGrid = 新GridModel(); studentGrid.ID = "studentgrid"; studentGrid.PrimaryKey = "Id" "；gridPaging分页 = 新建GridPaging(); 分页.PageSize = 3; 分页.Type = OpType.Local; studentGrid.Features.Add (分页); 返回视图 (studentGrid); }
视图的代码中不会有任何更改。当您运行应用程序时，您将看到一个配置为分页的网格:
启用排序
您可以通过向网格添加 “排序” 功能的功能配置对象，在Ignite UI for JavaScript网格中启用排序。在GridModel类方法中，要向网格添加排序，请将下面列出的代码添加到控制器的Index方法中:
GridSorting排序 = 新的GridSorting()；sorting.Type = OpType.Local;sorting.Mode = SortingMode.Multiple;studentGrid.Features.Add (排序)；
GridSorting类是Infragistics.Web.Mvc的一部分。在上面的代码片段中，您正在创建GridSorting类的实例，并设置所需属性 (如Type和Mode) 的值。Type属性的值确定是本地排序还是远程排序，Mode属性的值确定是对单列还是多列启用排序。如果已对多个列启用排序，则可以对多个列的网格进行排序。例如，您可以在 “年龄” 列中对网格进行排序，然后在 “名称” 列中添加辅助排序。这里，该值被设置为允许对多个列进行排序。要启用排序功能，您需要将GridSorting对象添加到GridModel功能列表中。
把所有的东西放在一起，你的控制器的索引方法现在应该是这样的；
公共ActionResult索引 (){StudentsEntities模型 = 新StudentsEntities()；IQueryable studentsData = model.Students.ToList().AsQueryable(); GridModel studentGrid = 新GridModel(); studentGrid.ID = "studentgrid"; studentGrid.PrimaryKey = "Id" "；gridPaging分页 = 新的GridPaging(); 分页.PageSize = 3; 分页.Type = OpType.Local; studentGrid.Features.Add (分页); GridSorting排序 = 新的GridSorting(); 排序.Type = OpType.Local; 排序.Mode = SortingMode.Multiper；studentGrid.Features.Add (排序); 返回视图 (studentGrid); }
在上面的代码片段中，已经为网格启用了排序和分页功能。同样，由于我们使用的是GridModel方法，因此视图没有任何变化。运行应用程序时，您将看到一个配置了分页和排序的网格，如下所示:
启用筛选
您可以通过向网格添加用于 “过滤” 的功能配置对象，在JavaScript网格的Ignite UI上启用过滤。要在GridModel类方法中执行此操作，请将下面列出的代码添加到控制器的Index方法中:
GridFiltering filtering = 新建GridFiltering()；filering.Mode = FilterMode.Simple;studentGrid.Features.Add(filering);
GridFiltering类是Infragistics.Web.Mvc的一部分。在上面的代码片段中，您正在创建GridFiltering类的实例并设置required属性模式的值。Mode属性的值确定筛选是高级还是简单。高级筛选器允许您根据等效性以及比较 (如大于、小于等) 筛选网格。在这种情况下，该值设置为simple以启用简单过滤。要启用过滤功能，您需要将GridFiltering对象添加到GridModel功能列表中。
把所有的东西放在一起，你的控制器的索引方法应该是这样的:
公共ActionResult索引 (){StudentsEntities模型 = 新StudentsEntities()；IQueryable studentsData = model.Students.ToList().AsQueryable(); GridModel studentGrid = 新GridModel(); studentGrid.ID = "studentgrid"; studentGrid.PrimaryKey = "Id" "；gridPaging分页 = 新的GridPaging(); 分页.PageSize = 3; 分页.Type = OpType.Local; studentGrid.Features.Add (分页); GridSorting排序 = 新的GridSorting(); 排序.Type = OpType.Local; 排序.Mode = SortingMode.Multiper；studentGrid.Features.Add (排序); GridFiltering fillering = 新GridFiltering(); filering.Mode = FilterMode.Simple; studentGrid.Features.Add(filering); 返回视图 (studentGrid); }
在上面的代码片段中，排序、过滤和分页功能都已为网格启用。
运行应用程序时，您将看到一个配置了分页，过滤和排序的网格，如下所示:
在本文中，您学习了如何在ASP.NET MVC应用程序的Ignite UI中为JavaScript网格添加各种功能。通过以下几个步骤，您可以将Ignite UI Grid的所有功能和功能引入MVC应用程序。
Ignite UI for JavaScript为您提供了60多个组件，这些组件可以通过几个非常简单的步骤集成到任何Web应用程序中。下载免费试用版以浏览组件
Ignite UI for JavaScript可用于构建出色的Angular应用程序。Ignite UI for JavaScript Angular Demp应用程序显示了使用所有客户端Ignite UI for JavaScript Angular组件 (如Angular中的网格和图表) 是多么容易。如果您是Angular的新手，或者只是想了解更多信息，请下载免费的Angular Essentials电子书
Dhananjay Kumar作为Infragistics的开发人员布道者。他是七次微软MVP。你可以在Twitter上找到他: @debug_mode。</p