ASP.NETMVC3.0（十八）：MVC3.0实例系列之表格中合并排序、分页和筛选 ...

public ActionResult SortPageAndFilter(bool? ascending, int? employeeNO, int? departmentID, bool? isMarital =null,
string sortBy ="EmployeeNO", int page =1, int pageSize =5)
        {

            var model =new EmployeeGridModel()
            {
//排序默认 
                SortBy = sortBy,
                SortAscending = ascending.GetValueOrDefault(),

// 分页默认
                CurrentPageIndex = page,
                PageSize = pageSize,

// 筛选默认
                DepartmentID = departmentID,
                EmployeeNO = employeeNO.ToString(),
                IsMarital = isMarital.HasValue ? isMarital.Value : false,
                DepartmentList =this.DataContext.Department
                .OrderBy(c => c.DepartName)
                .Select(c =>
new SelectListItem
                {
                    Text = c.DepartName,
                    Value = c.DepartmentID.ToString()
                }
                )
            };

// 筛选结果
            var filteredResults =this.DataContext.Employee.AsQueryable();

if (employeeNO !=null)
                filteredResults = filteredResults.Where(o => o.EmployeeNO == employeeNO.ToString());
if (departmentID >0)
                filteredResults = filteredResults.Where(o => o.DepartmentID == departmentID.ToString());
if (isMarital !=null&& isMarital.Value ==true)
                filteredResults = filteredResults.Where(o => o.Marital =="1");

//获取筛选结果的总条数
            model.TotalRecordCount = filteredResults.Count();

// 为筛选结果分页 
            model.Employees = filteredResults
            .OrderBy(model.SortExpression)
            .Skip((model.CurrentPageIndex -1) * model.PageSize)
            .Take(model.PageSize);

return View(model);
        }

首先我们按照以前的思路，初始化一个辅助类EmployeeGridModel，读取了数据库中表的记录条数，为相关属性设置默认值，返回一个辅助类的Employeelist

注意：此处我们的OrderBy可以参照上篇中的具体操作，这里就不多赘述。

创建视图View

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

按照以前的代码我们复制过来，该加的加该减的减

最后代码变为

@model MVC3.Grid.Models.EmployeeGridModel

@{
    ViewBag.Title = "SortPageAndFilter";
    Layout = "~/Views/Shared/_Layout.cshtml";
   int i = 0;
}
<h2>排序、分页和筛选</h2>

@using (Html.BeginForm("SortPageAndFilter", "Employee", FormMethod.Get))
{ 
<fieldset class="filtering">
<legend>内容筛选</legend>
<div>
<b>编号：</b>
            @Html.TextBoxFor(o => o.EmployeeNO, new { size = 8 })
<b>种族：</b>
            @Html.DropDownListFor(o => o.DepartmentID, Model.DepartmentList, "-- 所有分类 --")
<b>是否婚配：</b>
            @Html.CheckBoxFor(o => o.IsMarital)
<input type="submit" value="查询"/>
</div>
<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>
            @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> 
                        i++;
            }
            @if (i < 5)
            {
                while (i < Model.PageSize)
                {
                    i++;
                <tr>
<td colspan="5">
&nbsp
</td>
</tr>
                }
            }
<tr>
<td colspan="5">
                    @Html.Partial("_Pager", Model)
</td>
</tr>
</table>
</fieldset>
}

运行起来看看

呵呵，效果已经出来了，功能怎么样啊我们试试。

我们叫三选手来试试看：

①号选手：点击编号倒序排序，然后点击下一页。

我晕，神马情况？？倒叙居然该为了顺序。完全与上下页无关。。呜呜杯具了。。。

②号选手：选择了筛选条件为羊族。点击查询后，发现上下也能用。窃喜中。。。点击下一页　　

奇迹发生了

筛选的数据部是六条的嘛，分页怎么还是8条？？而且刚刚选择的羊族也不知去哪里了，筛选和分页没有连接起来。。。晕死啊。

③号选手：采用了迂回策略，点击筛选了羊族作为筛选条件点击查询

点击按编号排序

啊啊~~~不会吧我筛选的羊族唉怎么灰太狼都排在里面了呀？太离谱了吧。筛选和排序都没有连接在一起。

经过这三位选手的测试我们不难看出，即便是单纯的合并还不能满足我们的需求。

下面我们来一步步把这些错误处理掉。。

合并分页和排序

原因分析：先看看当我们点击排序的时候路由是怎么样通知的

/?sortBy=EmployeeNO&ascending=False

然而当我们点击下一页的时候路由就会变成

/?page=2&pageSize=5

要是我们把这两个路由合并在一起，那问题不就解决了吗。

所以我们在分页链接里面要读取早先存储的排序标识，然后将排序标识添加到路由数据里面，在指向Action的时候，路由不是就完整了吗。

分析到这里我们就开始做吧

为_PagerLink.cshtml中添加分割线内的内容。

//路由参数
        var routeData =new RouteValueDictionary { { "page", ViewData["PageIndex"].ToString() }, { "pageSize", Model.PageSize } };
............................................................................................

//记录排序历史
//获取路由参数的sortBy排序列和ascending排序方法
//如果没有排序则给路由参数加如该参数
if (!string.IsNullOrEmpty(Request.QueryString["sortBy"]))
        {
            routeData.Add("sortBy", Request.QueryString["sortBy"]);
        }

if (!string.IsNullOrEmpty(Request.QueryString["ascending"]))
        {
            routeData.Add("ascending", Request.QueryString["ascending"]);
        }

...........................................................................................
        var htmlAttributes =new Dictionary<string, object>();

看看效果

选择倒叙排列点击下一页

上面的代码看起来不错但是复用性太差，我们进行小小的封装

在前面我们已经建好了一个名为HelperClasses的文件夹

我们在此文件夹中添加一个名为RouteValueDictionaryExtensions的类

代码如下

publicstaticclass RouteValueDictionaryExtensions
    {
///<summary>
/// 路由扩展
/// 添加路由历史记录，确保路由字典键与Action参数一致
///</summary>
///<param name="dict"></param>
///<returns></returns>
publicstatic RouteValueDictionary AddQueryStringParameters(this RouteValueDictionary dict)
        {
            var querystring = HttpContext.Current.Request.QueryString;

foreach (var key in querystring.AllKeys)
if (!dict.ContainsKey(key))
                    dict.Add(key, querystring.GetValues(key)[0]);
return dict;
        }

///<summary>
/// 路由扩展
/// 从路由字典中移除指定的路由参数
///</summary>
///<param name="dict"></param>
///<param name="keysToRemove"></param>
///<returns></returns>
publicstatic RouteValueDictionary ExceptFor(this RouteValueDictionary dict, paramsstring[] keysToRemove)
        {
foreach (var key in keysToRemove)
if (dict.ContainsKey(key))
                    dict.Remove(key);
return dict;
        }
    }

上面的代码可以看出，我们之间为路由创建了扩展方法，来实现对历史路由参数的添加。　　

既然有了扩展方法，那我们可以把PagerLink.cshtml添加的内容替换为

完整代码

@model MVC3.Grid.Models.EmployeeGridModel
@using MVC3.Grid.HelperClasses;           
@{
//文本编写器
    var razorWriter = ViewContext.Writer;

//判断当前链接是否选中
if ((bool)ViewData["Inactive"])
    {
//将当前的Text输出 加入了css样式 该样式可以写在样式表、母版页、当前页中
        razorWriter.Write(string.Format("<span class=\"{0}\">{1}</span>", "pagerButtonDisabled", ViewData["Text"]));
    }
else
    {
//路由参数
        var routeData =new RouteValueDictionary { { "page", ViewData["PageIndex"].ToString() }, { "pageSize", Model.PageSize } };

////记录排序历史
////获取路由参数的sortBy排序列和ascending排序方法
////如果没有排序则给路由参数加如该参数
//if (!string.IsNullOrEmpty(Request.QueryString["sortBy"]))
//{
//    routeData.Add("sortBy", Request.QueryString["sortBy"]);
//}

//if (!string.IsNullOrEmpty(Request.QueryString["ascending"]))
//{
//    routeData.Add("ascending", Request.QueryString["ascending"]);
//}

// 添加排序历史参数
        routeData.AddQueryStringParameters();

        var htmlAttributes =new Dictionary<string, object>();

//判断是否为选中状态 添加CSS样式
if ((bool)ViewData["Selected"])
        {
            htmlAttributes.Add("class", "pagerButtonCurrentPage");
        }
else
        {
            htmlAttributes.Add("class", "pagerButton");
        }

        var linkMarkup = Html.ActionLink(
                ViewData["Text"].ToString(),                                    // 超链接文本
                Html.ViewContext.RouteData.Values["action"].ToString(),         // Action
                Html.ViewContext.RouteData.Values["controller"].ToString(),     // Controller
                routeData,                                                      // 路由参数
                htmlAttributes                                                  // HTML属性适用于超链接
            ).ToHtmlString();

        razorWriter.Write(linkMarkup);
    }
}

运行效果是一样的。。　　

合并筛选和排序

我们继续看看排序的路由

/?sortBy=EmployeeNO&ascending=True

而筛选的路由则是

/?EmployeeNO=&DepartmentID=1&IsMarital=false

可以看到在筛选的时候完全没有在排序的条件下筛选。

因此我们在筛选的时候，将排序标识隐藏在界面中，只用于读取和传递，这样两个参数就有了。

看SortPageAndFilter.cshtml代码：

...........................................
@using (Html.BeginForm("SortPageAndFilter", "Employee", FormMethod.Get))
{ 
    @Html.Hidden("sortBy", Model.SortBy)
    @Html.Hidden("ascending", Model.SortAscending) 
<fieldset class="filtering">
<legend>内容筛选</legend>
............................................

效果

选择排序然后使用羊族为关键字筛选

但是这里还是不完美，如果重新排序的话，就又乱了。。

仔细思考思考，原来我们在分页控件里面没有添加分页的历史记录导致分页失效

所以_SmartLink.cshtml完整代码

@model MVC3.Grid.Models.EmployeeGridModel
@using MVC3.Grid.HelperClasses;     
@{
//判断传过来的列名是否一致 是降序还是升序排列
    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 } };

//添加分页历史记录
    routeData.AddQueryStringParameters().ExceptFor("page", "pageSize");

    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属性适用于超链接
) 
}