我要学ASP.NET MVC 3.0（十五）： MVC 3.0 实例系列之表格的排序-CSDN博客

概述

上节我们学习了如何在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> 
..................