(三) MVC实现表格排序

出处：http://www.cnblogs.com/lukun/archive/2011/08/16/2139541.html

数据库为上文中数据库

1. 下载用于Linq中OrderBy中的类，链接为http://files.cnblogs.com/lukun/Dynamic.rar

2. 右击Model文件夹添加EmployeeGridModel类

代码如下：

  public class EmployeeGridModel
    {
        public IEnumerable<Employee> Employees { get; set; }
        public string SortBy { get; set; }
        public bool SortAscending { get; set; }
        public string  SortExpression
        {
            get
            {
                return this.SortAscending ? this.SortBy + " desc" : this.SortBy + " asc";
            }
        }
     }

3. 添加下载文件中的Dynamic类，否则OrderBy编译不会通过

4. 右击Shared文件夹,添加分布视图，_SmartLink.cshtml代码如下：

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

5. 添加EmployeeController控制类

代码如下：

  public class EmployeeController : BaseController
    {
        //
        // GET: /Employee/

       public ActionResult Index()
       {
           var list = this.DataContext.Employees;
           return View(list);
       }
       public ActionResult Sortable(bool? ascending,string sortBy="EmployeeNo")
       {
           var model = new EmployeeGridModel()
                           {
                               SortBy = sortBy,
                               SortAscending = ascending.GetValueOrDefault(),
                               Employees = DataContext.Employees
                           };
           model.Employees = DataContext.Employees.OrderBy(model.SortExpression);
           return View(model);
           
       }
    }

 

6.添加样式（Content/Site.css）：

a.sortAsc   
{
      padding-right: 16px;   
     background-position: right;  
     background-repeat: no-repeat;
     color:Maroon;
}
  a.sortDesc  
 {
      padding-right: 16px;
      background-position: right;   
      background-repeat: no-repeat;
      color:ActiveBorder;
}

7. 添加视图类，代码如下：

@model MvcApplication3.Models.EmployeeGridModel
@{
    ViewBag.Title = "Sortable";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>
    Sortable</h2>
<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", "EmployeeName" }, { "DisplayName", "姓名" } })
        </th>
        <th>
            性别
        </th>
        <th>
            生日
        </th>
        <th>
            是否婚配
        </th>
    </tr>
    @foreach (var item in Model.Employees)
    {
        <tr>
            <td>@item.EmployeeNo
            </td>
            <td>@item.EmployeeName
            </td>
            <td>
                @if (item.Sex == "1")
                {
                    @:@("Male")
                                            }
                @if (item.Sex != "1")
                {
                    @:@("falmale")
                                            }
            </td>
            <td>@string.Format("{0:yyyy-MM-dd}", item.Birthday)
            </td>
            <td>
                @if (item.Marital == "1")
                {
                    @:@("YES")
                                            }
                @if (item.Marital != "1")
                {
                    @:@("No")
                                            }
            </td>
        </tr>
    }
</table>

 自定义分页源码：http://files.cnblogs.com/byzy/MVCPage1Self.rar

出处和上面一样