ASP.NET MVC3中分页据说可以用WebGrid,但是一直没有用过,这次在网上找到一个方法,小改了一下之后,能够非常好的适用一般项目中。下面是本文生成的最后效果图:
1. 该方法是扩张MVC 中HtmlHelper的方法的,方法如下:
public static MvcHtmlString Pager(this HtmlHelper helper, int startPage, int currentPage, int totalPages, int pagesToShow, string currentPageUrlParameter)
{
System.Web.Routing.RouteData routeData = helper.ViewContext.RouteData;
string actionName = routeData.GetRequiredString("action");
string controller = routeData.GetRequiredString("controller");
System.Web.Routing.RouteValueDictionary values = routeData.Values;
if (!values.ContainsKey(currentPageUrlParameter))
values.Add(currentPageUrlParameter, currentPage);
values[currentPageUrlParameter] = 1;
StringBuilder html =
Enumerable.Range(startPage, totalPages)
.Where(i => (currentPage - pagesToShow) < i & i < (currentPage + pagesToShow))
.Aggregate(new StringBuilder(@"<div class=""pager-bar""><span>当前第 " + currentPage + " 页/共 " + totalPages + " 页</span>")
.Append(currentPage == startPage ? "<span class=\"pagerPage currentPage pagerPrefix\"> 首页 </span>" : helper.ActionLink("首页", actionName, controller, values, new Dictionary<string, object>{{ "class", "pagerPage firstPage pagerPrefix" }}).ToHtmlString()),
(seed, page) =>
{
values[currentPageUrlParameter] = page;
string style = "pagerPage";
if (page == startPage)
style += " firstPage";
if (page == totalPages)
style += " lastPage";
var htmlDic = new Dictionary<string, object>();
htmlDic.Add("class", style);
if (page == currentPage)
seed.AppendFormat("<span class=\"pagerPage currentPage\">{0}</span>", page);
else
seed.Append(helper.ActionLink(page.ToString(), actionName, controller, values, htmlDic).ToHtmlString());
return seed;
});
values[currentPageUrlParameter] = totalPages;
html.Append(currentPage == totalPages ? "<span class=\"pagerPage currentPage pagerSubfix\"> 末页 </span>" : helper.ActionLink("末页", actionName, controller, values, new Dictionary<string, object> { { "class", "pagerPage lastPage pagerSubfix" } }).ToHtmlString())
.Append(@"</div>");
return MvcHtmlString.Create(html.ToString());
}
2. 该方法随便你放在那里,记住引用:
using System.Web.Mvc;
using System.Web.Mvc.Html;
这样即可
3. 而后在视图中引用你这个方法所在的类:
@using namespace.XXXX
4. 在视图中直接调用:
@Html.Pager(startPageNo, CurrentPageNo, totalPageNo, needToShow, "p")
这样就可以实现输出了。
5. 为了控制样式,我们需要定义CSS,如下:
.pager-bar {height: 20px;line-height:20px;}
.pager-bar span {font-weight:bold;}
.pager-bar .pagerPage{display: inline-block;height:20px; width:20px; text-align:center;margin:0 2px;border:1px solid #9BB3FF;}
.pager-bar .currentPage{border:none;}
.pager-bar .firstPage, .pager-bar .lastPage{font-weight:bold;}
.pager-bar .pagerPrefix, .pager-bar .pagerSubfix{width: 60px; border: 1px solid #9BB3FF;}
这样,就将整个分页功能实现了。
你可以试试,效果如下: