ASP.NET MVC 3.0（一）： MVC 3.0 的新特性 摘要
ASP.NET MVC 3.0（二）： MVC的概念及MVC 3.0开发环境
ASP.NET MVC 3.0（三）： 初识MVC的Url映射潜规则Routing
ASP.NET MVC 3.0（四）： 我要MVC潜规则之配置Routing
ASP.NET MVC 3.0（五）： 入手Controller/Action
ASP.NET MVC 3.0（六）： MVC 3.0创建你的View视图
ASP.NET MVC 3.0（七）： MVC 3.0 新的Razor引擎
ASP.NET MVC 3.0（八）： MVC 3.0 传递和保存你的Model
ASP.NET MVC 3.0（九）： MVC 3.0 验证你的Model
ASP.NET MVC 3.0（十）： MVC 3.0 使用 Forms身份验证
ASP.NET MVC 3.0（十一）： MVC 3.0 使用筛选器
ASP.NET MVC 3.0（十二）： MVC 3.0 使用自定义的Html控件
ASP.NET MVC 3.0（十三）： MVC 3.0 防止跨站点请求伪造 (CSRF) 攻击
ASP.NET MVC 3.0（十四）： MVC 3.0 实例系列之创建数据表格
ASP.NET MVC 3.0（十五）： MVC 3.0 实例系列之表格的排序
ASP.NET MVC 3.0（十六）： MVC 3.0 实例系列之表格数据的分页
ASP.NET MVC 3.0（十七）： MVC 3.0 实例之表格中数据的筛选
ASP.NET MVC 3.0（十八）： MVC 3.0 实例系列之表格中合并排序、分页和筛选
ASP.NET MVC 3.0（十九）： MVC 3.0 实例之使用开源控件实现表格排序和分页
概述
上节我们学习了如何在MVC应用程序中实现一个简单表格，并使用Linq to sql映射工具，读取了数据库中的Employee表数据对表格进行了填充，还对日期及相关数据进行了格式化。使得表格在整体上看起来美观了不少。
从这节开始，我们就使用MVC不断的加深对Grid的改造工作，包括对Grid中数据的排序、筛选、分页等比较困难的操作。
这节我们先从排序开始。通过这节学习，我们就可以给普通的表格加上复杂的排序功能，使表格在使用起来显得更加人性化。
问题分析
在MVC程序中很多功能都是通过传递参数来实现的，同样的实现排序功能也可以采用这种理念，那么我们要传递那些参数呢？
①SortBy列名称：显示用户是通过那个列来排序的。
②ascending排序标识：显示要排序的列名是升序还降序排列。
创建辅助类
右击Model文件夹--新建--类--EmployeeGridModel
代码如下
publicclass EmployeeGridModel
{
public IEnumerable<Employee> Employees { get; set; }
///<summary>
/// 数据库列的名称，通过它对数据进行排序
///</summary>
publicstring SortBy { get; set; }
///<summary>
/// 一个布尔值，指示是否升序排序数据
///</summary>
publicbool SortAscending { get; set; }
///<summary>
/// 一个只读属性，返回一个排序的值的字符串SortBy SortAscending属性
///</summary>
publicstring SortExpression
{
get
{
returnthis.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方法。
下节预告
下节我们继续学习使用多个分部视图来实现分页控件，大家可以先想想怎么做。
转记忆逝去的青春出处：http://www.cnblogs.com/lukun/