ASP.NET MVC3中扩展分页方法

ASP.NET MVC3中分页据说可以用WebGrid,但是一直没有用过,这次在网上找到一个方法,小改了一下之后,能够非常好的适用一般项目中。下面是本文生成的最后效果图:

asp.net mvc3 中的分页效果.

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;}

这样,就将整个分页功能实现了。

你可以试试,效果如下:

asp.net mvc3 中的分页效果.

 

Thursday, June 07, 2012 | .NET技术

文章评论

No comments posted yet.

发表评论

Please add 1 and 3 and type the answer here:

关于博主

  一枚成分复杂的网络IT分子,常年游弋于电子商务,属于互联网行业分类中的杂牌军。当前正在待业中...