概述
上节我们学习了如何在MVC应用程序中实现一个简单表格,并使用Linq to sql映射工具,读取了数据库中的Employee表数据对表格进行了填充,还对日期及相关数据进行了格式化。使得表格在整体上看起来美观了不少。
从这节开始,我们就使用MVC不断的加深对Grid的改造工作,包括对Grid中数据的排序、筛选、分页等比较困难的操作。
这节我们先从排序开始。通过这节学习,我们就可以给普通的表格加上复杂的排序功能,使表格在使用起来显得更加人性化。
问题分析
在MVC程序中很多功能都是通过传递参数来实现的,同样的实现排序功能也可以采用这种理念,那么我们要传递那些参数呢?
①SortBy列名称:显示用户是通过那个列来排序的。
②ascending排序标识:显示要排序的列名是升序还降序排列。
创建辅助类
右击Model文件夹--新建--类--EmployeeGridModel
代码如下
public class EmployeeGridModel { public IEnumerable<Employee> Employees { get; set; } /// <summary> /// 数据库列的名称,通过它对数据进行排序 /// </summary> public string SortBy { get; set; } /// <summary> /// 一个布尔值,指示是否升序排序数据 /// </summary> public bool SortAscending { get; set; } /// <summary> /// 一个只读属性,返回一个排序的值的字符串SortBy SortAscending属性 /// </summary> public string SortExpression { get { return this.SortAscending ? this.SortBy + " desc" : this.SortBy + " asc"; } } }
因为我们的排序sql语句为
select * from dbo.Employee order by EmployeeNo asc
所以上面出现了SortExpression的属性,只是为排序的列名后面自动加上了升序和降序的标识,希望大家不要误解。
该类包含一个Employee的list,在界面上可以根据该list绑定数据列表。
创建Action
在EmployeeController添加名为Sortable的方法
该方法包含两个参数ascending和SortBy
代码如下
public ActionResult Sortable(bool? ascending, string sortBy = "EmployeeNO") { var model = new EmployeeGridModel() { SortBy = sortBy, SortAscending = ascending.GetValueOrDefault(), Employees = DataContext.Employee }; model.Employees = DataContext.Employee.OrderBy(model.SortExpression); return View(model); }
首先我们初始化一个辅助类EmployeeGridModel,为相关属性设置默认值,返回一个辅助类的Employeelist
注意:此处我们的OrderBy是微软实例里面提供的一个封装类,可以在这里下载,然后在项目中创建一个HelperClasses文件夹放进去
你也可以前往微软官网下载完整实例进行下载
创建视图View
为Sortable的Action添加一个视图View,选择强类型为EmployeeGridModel
修改代码为
@model MVC3.Grid.Models.EmployeeGridModel @{ ViewBag.Title = "Sortable"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h2>排序列表</h2> <table border="1" width="100%" style="text-align:center;border-collapse:collapse"> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>生日</th> <th>是否婚配</th> </tr> @foreach (var item in Model.Employees) { <tr> <td>@item.EmployeeNO</td> <td>@item.EmployName</td> <td>@item.Sex</td> <td>@string.Format("{0:yyyy年MM月dd日}", item.Birthday)</td> <td> @if (item.Marital == "1") { @:@("是") } @if(item.Marital!="1") { @:@("否") } </td> </tr> } </table>
到目前为止,我们的页面基本就做好了,运行起来看看
看了效果之后,你会发现这和前面的没有什么区别啊,呵呵,要排序必须有数据,没有数据排序从何谈起?好!排序马上进行。
添加排序头
结合上图我们设想一下,要实现排序是不是要点击编号或者姓名,然后在根据所点击的列进行排序呢,那么我们怎么样才能把这个头标题,变成一个能排序的头标题呢?
那就是使用自定义控件。
右击Shared文件夹--新建视图--命名为_SmartLink
注意:
选择强类型视图,模型为EmployeeGridModel
创建为分部视图。这样其他页面就可以调用他了。大概这就是所谓的自定义控件吧。(*^__^*) 嘻嘻
添加了分部视图之后,生成一段代码,只是单单作为Model的命名空间,其他的逻辑代码都没有写,我们需要在这个基础上面修改他。
添加下面的代码
@model MVC3.Grid.Models.EmployeeGridModel @{ //判断传过来的列名是否一致 是降序还是升序排列 var isDescending = string.CompareOrdinal(Model.SortBy, ViewData["ColumnName"].ToString()) == 0 && Model.SortAscending; //路由数据 如:Employee/Sortable?sortBy=EmployeeNO&ascending=False var routeData = new RouteValueDictionary { { "sortBy", ViewData["ColumnName"].ToString() }, { "ascending", !isDescending } }; var htmlAttributes = new Dictionary<string, object>(); if (string.CompareOrdinal(Model.SortBy, ViewData["ColumnName"].ToString()) == 0) { if (Model.SortAscending) { htmlAttributes.Add("class", "sortAsc");//添加css样式 } else { htmlAttributes.Add("class", "sortDesc"); } } @Html.ActionLink( ViewData["DisplayName"].ToString(), // 链接文本 Html.ViewContext.RouteData.Values["action"].ToString(), // Action Html.ViewContext.RouteData.Values["controller"].ToString(), // Controller routeData, // 路由数据 htmlAttributes //HTML属性适用于超链接 ) }
可以在Site.css中添加如下样式
a.sortAsc { padding-right: 16px; background-image: url(up.png); background-position: right; background-repeat: no-repeat; } a.sortDesc { padding-right: 16px; background-image: url(down.png); background-position: right; background-repeat: no-repeat; }
这样一来,一个排序的自定义控件就做好了,我们怎么在页面上引用他呢?
将头标题换为我们的自定义控件即可。将当前的EmployeeGridModel传递过去,通过访问后返回到界面
修改Sortable.cshtml代码
<table border="1" width="100%" style="text-align:center;border-collapse:collapse"> <tr> <th>@Html.Partial("_SmartLink", Model, new ViewDataDictionary { { "ColumnName", "EmployeeNO" }, { "DisplayName", "编号" } }) </th> <th>@Html.Partial("_SmartLink", Model, new ViewDataDictionary { { "ColumnName", "EmployName" }, { "DisplayName", "姓名" } }) </th> <th>性别</th> <th>生日</th> <th>是否婚配</th> </tr> ..................
运行效果
大功告成!!!
总结
对于Grid的排序,我们就是利用了MVC的分部视图来实现的,通过对RouteValueDictionary数据字典的控制,来实现数据的传递,调用Controller中的Action方法。