软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > 网络编程 > ASP.NET > ASP.NET MVC实践系列7-Grid实现[利用Contrib实现](下)

ASP.NET MVC实践系列7-Grid实现[利用Contrib实现](下)

很多情况下我们展示数据都是通过网格来做的,在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中下载

七、源码下载

文章转自:http://www.cnblogs.com/nuaalfm/

    相关阅读
    网友评论
    栏目导航
    推荐软件