ASP.NET MVC实践系列7-Grid实现（下-利用Contrib实现）

我的ASP.NET MVC实践系列

ASP.NET MVC实践系列1-UrlRouting

ASP.NET MVC实践系列2-简单应用

ASP.NET MVC实践系列3-服务器端数据验证

ASP.NET MVC实践系列4-Ajax应用

ASP.NET MVC实践系列5-结合jQuery

ASP.NET MVC实践系列6-Grid实现（上）

 

其他：

在ASP.NET MVC中对表进行通用的增删改

很多情况下我们展示数据都是通过网格来做的，在webform中我们常使用GridView或ListView，实际上简单实现这些网格也并不困难，上节讲了在mvc中Grid的简单实现，但是如果很多页面都要使用网格来显示，每次都要写循环的td，tr就有点麻烦了，当然在mvc中我们可以继续使用GridView或ListView，但是使用的时候很多地方很蹩脚，这里我们可以利用Helper的方式来封装这个过程。Mvc Contrib中帮我们实现好了一套Grid，所以这里我不重新搞个新的了，Contrib的源码可以到http://www.codeplex.com/MVCContrib 中下载

一、准备工作

1、准备一个模拟类和类的集合

模拟类
public class News
{
    public int ID { get; set; }
    public string Author { get; set; }
    public string Title { get; set; }
    public DateTime CreateTime { get; set; }
}
public class ListNews
{
    public static List<News> GetList()
    {
        List<News> list = new List<News>();
        list.Add(new News { ID = 1, Author = "lfm1", Title = "中华人民共和国60周年", CreateTime = DateTime.Now });
        list.Add(new News { ID = 2, Author = "lfm2", Title = "中华人民共和国61周年", CreateTime = DateTime.Now.AddHours(1) });
        list.Add(new News { ID = 3, Author = "lfm3", Title = "中华人民共和国62周年", CreateTime = DateTime.Now.AddHours(2) });
        list.Add(new News { ID = 4, Author = "lfm3", Title = "中华人民共和国63周年", CreateTime = DateTime.Now.AddHours(3) });
        list.Add(new News { ID = 5, Author = "lfm2", Title = "中华人民共和国64周年", CreateTime = DateTime.Now.AddHours(4) });


        return list;
    }
}

2、为了在View中输入时不用每页使用<%@ Import Namespace="MvcContrib.UI.Grid" %>导入命名空间，我们需要在webconfi的<pages>中输入如下：

 

webconfig配置
        <pages>
            <namespaces>
                <add namespace="System.Collections.Generic"/>
                <add namespace="MvcContrib.UI.Grid"/>
        <add namespace="MvcContrib.UI.Pager"/>
        <add namespace="MvcContrib.Pagination"/>
            </namespaces>
        </pages>

 

二、简单应用

在View中输入 <%=Html.Grid(Model).AutoGenerateColumns() %>，Grid根据Model中的内容反射得到相应的列和行，非常简单，但并不实用。一般我们需要定义需要显示的列：

View

View
<%=Html.Grid(Model).Columns(column=>{
    column.For(x=>x.ID).Named("News ID");
    column.For(x => Html.ActionLink(x.Title, "NewsDetils", new { newsId = x.ID })).DoNotEncode();
    column.For(x => x.Author);
    column.For(x=>x.CreateTime);
})
    %>

Columns的参数是一个Action<ColumnBuilder<T>的委托，Grid方法会利用你传入的这个委托来帮你处理表格显示。column.For是用来处理每个列的，Named用来重新标示列名，如果不使用Named，列名直接为For参数的ToString()内容。默认情况下列中显示的内容都会被编码，所以如果不需要编码则需要使用DoNotEncode()方法。

 三、分页显示

1、简单分页：

View：

View
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IPagination<News>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    ListPager
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <%=Html.Grid(Model).Columns(column=>{
    column.For(x=>x.ID).Named("News ID");
    column.For(x => Html.ActionLink(x.Title, "NewsDetils", new { newsId = x.ID })).DoNotEncode();
    column.For(x => x.Author);
    column.For(x=>x.CreateTime);
})
    %>
<%= Html.Pager(Model)%>
</asp:Content>

这里需要注意Inherits="System.Web.Mvc.ViewPage<IPagination<News>>" ，这个强类型是用于分页的

Controller：

         public  ActionResult ListPager( int ?  page)
        {
            var pagedNews  =  ListNews.GetList().AsPagination(page.GetValueOrDefault( 1 ),  5 );
             return  View(pagedNews);
        }

这里不要忘了要引入命名空间MvcContrib.Pagination;

这个AsPagination是IEnumerable<T>的扩展方法，是将实现了IEnumerable的集合类转换成IPagination<T>

2、自定义分页

上面的那个简单分页实现起来很容易，但对于大数据量的情况往往性能不佳，所以我们常常要自定义分页，contrib中也很好的支持了自定义分页

自定义分页代码
      public ActionResult CustomPager(int? page)
        {
            int pageSize=5;
            int pageNumber = page ?? 1;
            var list = ListNews.GetList().Skip((pageNumber-1) * pageSize).Take(pageSize);
            int total = ListNews.GetList().Count;
            CustomPagination<News> customes = new CustomPagination<News>(list, pageNumber, pageSize, total);
            return View(customes);
        }

3、分页中有用的属性

默认分页的页面展示如下：

估计这不会是你想要的分页格式，下面我们自定义一下这个分页 

将分页输出改为： 

<%= Html.Pager(Model).First("第一页").
    Last("最后一页").Previous("上一页").Next("下一页").Format("当前为从{0}行到{1}行，总{2}行，") %>

会得到如下结果：

当前为从1行到5行，总10行， 第一页 | 上一页 | 下一页 | 最后一页

 

4、分页的格式

格式控制可以使用css

分页的前端输出为：

分页前端输出
<div class='pagination'>
   <span class='paginationLeft'>当前为从1行到5，总10行，
    </span>
   <span class='paginationRight'>第一页 | 上一页 | <a href="/Home/ListPager?page=2">下一页</a> | <a href="/Home/ListPager?page=2">最后一页</a>
   </span>
</div>

默认情况下有两个class可控制。

四、颜色分隔

View：

行颜色分隔代码
<%Html.Grid(Model).Columns(column =>
  {
      column.For(x => x.ID).Named("News ID");
      column.For(x => Html.ActionLink(x.Title, "NewsDetils", new { newsId = x.ID })).DoNotEncode();
      column.For(x => x.Author);
      column.For(x => x.CreateTime);
  }).RowStart((p, row) =>
            {
                if (row.IsAlternate)
                {
                    %><tr style="background-color:#CCDDCC"><%
                                                           
    }
                else
                {
                    %><tr><%
                    
    }
            }
         ).Render(); %>

要注意的是这里要引入<%@ Import Namespace="MvcContrib.UI.Grid.ActionSyntax" %>命名空间

五、排序

1、默认排序

contrib的grid中默认排序很简单

你希望按哪列排序就改写那列

column.For(x => x.Author).Sortable(true);

但这种排序可能不符合你的要求，因为它只会将本Model的数据进行排序，当自定义分页的时候得到的往往不是你想要的结果。

2、自定义排序

可以改写需要排序的列：

    column.For(x => x.Author).Header("<th>"+Html.ActionLink("作者","CustomPager",new{desc = Convert.ToBoolean(ViewData["desc"]),sortName="Author"})+"</th>");

Controller中的做法可以参考ASP.NET MVC实践系列6-Grid实现（上）

六、其他

参见MvcContrib.Samples.UI，可以在http://www.codeplex.com/MVCContrib 中下载

七、源码下载