ASP.NET MVC 3.0(十五): MVC 3.0 实例系列之表格的排序

时间:2021-08-06 05:11:58

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

ASP.NET MVC 3.0(十五): MVC 3.0 实例系列之表格的排序

代码如下

 
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文件夹放进去

ASP.NET MVC 3.0(十五): MVC 3.0 实例系列之表格的排序

你也可以前往微软官网下载完整实例进行下载

   

创建视图View

  

为Sortable的Action添加一个视图View,选择强类型为EmployeeGridModel

 

ASP.NET MVC 3.0(十五): MVC 3.0 实例系列之表格的排序

修改代码为

 

 
@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>
 

 

到目前为止,我们的页面基本就做好了,运行起来看看

ASP.NET MVC 3.0(十五): MVC 3.0 实例系列之表格的排序

看了效果之后,你会发现这和前面的没有什么区别啊,呵呵,要排序必须有数据,没有数据排序从何谈起?好!排序马上进行。

 

添加排序头

   

结合上图我们设想一下,要实现排序是不是要点击编号或者姓名,然后在根据所点击的列进行排序呢,那么我们怎么样才能把这个头标题,变成一个能排序的头标题呢?

那就是使用自定义控件。

右击Shared文件夹--新建视图--命名为_SmartLink

注意:

选择强类型视图,模型为EmployeeGridModel

创建为分部视图。这样其他页面就可以调用他了。大概这就是所谓的自定义控件吧。(*^__^*) 嘻嘻

ASP.NET MVC 3.0(十五): MVC 3.0 实例系列之表格的排序

添加了分部视图之后,生成一段代码,只是单单作为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>
..................
 

  

 运行效果

   

ASP.NET MVC 3.0(十五): MVC 3.0 实例系列之表格的排序

ASP.NET MVC 3.0(十五): MVC 3.0 实例系列之表格的排序

 大功告成!!!

    

总结

  

对于Grid的排序,我们就是利用了MVC的分部视图来实现的,通过对RouteValueDictionary数据字典的控制,来实现数据的传递,调用Controller中的Action方法。

 

下节预告

  

下节我们继续学习使用多个分部视图来实现分页控件,大家可以先想想怎么做。

 

 

 


转记忆逝去的青春出处:http://www.cnblogs.com/lukun/