ASP.NET MVC雕虫小技 3、Pager

上篇过后,被评为没有什么技术含量了,但我觉得这并没有什么问题,因为文章不一定会让所有人群受益,文章或适于新手,或适于熟手。但凡是对人有所启发,我觉得写文章有值得。

而且我觉得这一系列主要是在开发中遇到的问题及解决方法,有容易想到的,有经过几次开发迭代才形成的。还是那句话,这些未必是一些高效的技巧,但是的确是能解决问题,也未必有什么高深的原理,只是我觉得值得分享。

3.Pager

3.1需求及模拟代码

需求,假设我们有个列表,有分页功能,我们可能需要一个页码列表,如

image

我们模拟写一下Action:

   1: public ActionResult Index(int? p)
   2: {
   3:     if (!p.HasValue) p = 1;//如果未对p传值就是第1页
   4:     var list = new List<int>();//生成一个模拟列表
   5:     for (var i = 0; i < 10;i++ )
   6:     {
   7:         list.Add(p.Value);//是第几页就向中填充几个这个页码的数
   8:     }
   9:     return View(list);//强型传递给View
  10: }

View中我写以下显示方式:

   1: <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<List<int>>" %>
   2:  
   3: <asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
   4:     Pager for List
   5: </asp:Content>
   6:  
   7: <asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
   8:     <div>
   9:         <ul>
  10:             <%foreach (int i in Model){//显示这个列表%>
  11:             <li><%=i %></li>
  12:             <%} %>
  13:         </ul>
  14:     </div>
  15:     <!--将在这里显示分页的部分-->
  16:    </asp:Content>

下面是运行后的结果:

第一页URL类似/Home/Index?p=1

image

第二页URL类似/Home/Index?p=2

image

其它页面以此类推

3.2最简单的解决方案

我想最简单无非就是直接写链接,当然也要考虑更换Routing规则的问题,所以我们可以最简单如下来写:

   1: <%
   2:           int p = 1;
   3:           int.TryParse(Request.QueryString["p"], out p);
   4: %>
   5: <div>
   6: <%=Html.ActionLink("上一页", "Index", new { p= p-1})%>
   7: <strong>当前页:<%=p %></strong>
   8: <%=Html.ActionLink("下一页", "Index", new { p= p+1})%>
   9: </div>

这样就可以得到如果下的分页样式

image

当然,也可以根据这个来写1,2,3,4,5页的链接,而不写“上一页”或“下一页”

但是这种方法有个问题,就是使用Html.ActionLink的时候要用字符串来指定Action和Controller。下面我们来改换另一种方法来实现

3.3使用RouteLink来实现

我们使用Html.RouteLink就可以实现不与Action或Controller的名称相耦合,例如:

   1: <%for (int i = 1; i < 10; i++)
   2:     {
   3:         ViewContext.RouteData.Values["p"] = i;//设置页码
   4:         Writer.Write(
   5:             Html.RouteLink(i.ToString(), ViewContext.RouteData.Values)
   6:             );//显示设置页面后的链接
   7:         Writer.Write(" ");//连接后显示个空格,好看点
   8:       
   9:     }%>

这个列表,我们就可以显示为

image

3.4完善这个Pager并封装成一个Helper

上面列出了Pager,但是有几个问题

  1. 没有上下页
  2. 没有指定当前页的特殊显示
  3. 每次调用时都要写一次
  4. 如果QueryString有其它参数时无法处理

那我们下面来完善这个Pager

并将之封装成一个Helper

   1: /// <summary>
   2:      /// 分页Pager显示
   3:      /// </summary>
   4:      /// <param name="html"></param>
   5:      /// <param name="currentPageStr">标识当前页码的QueryStringKey</param>
   6:      /// <param name="pageSize">每页显示</param>
   7:      /// <param name="totalCount">总数据量</param>
   8:      /// <returns></returns>
   9:      public static string Pager(this HtmlHelper html, string currentPageStr, int pageSize, int totalCount)
  10:      {
  11:          var queryString = html.ViewContext.HttpContext.Request.QueryString;
  12:          int currentPage = 1; //当前页
  13:          int.TryParse(queryString[currentPageStr], out currentPage); //与相应的QueryString绑定
  14:          var totalPages = Math.Max((totalCount + pageSize - 1) / pageSize, 1); //总页数
  15:          var dict = new RouteValueDictionary(html.ViewContext.RouteData.Values);
  16:  
  17:          var output = new StringBuilder();
  18:  
  19:          foreach (string key in queryString.Keys)
  20:              if (queryString[key] != null && !string.IsNullOrEmpty(key))
  21:                  dict[key] = queryString[key];
  22:          if (totalPages > 1)
  23:          {
  24:              if (currentPage != 1)
  25:              {//处理首页连接
  26:                  dict["p"] = 1;
  27:                  output.AppendFormat("{0} ",html.RouteLink("首页", dict));
  28:              }
  29:              if (currentPage > 1)
  30:              {//处理上一页的连接
  31:                  dict["p"] = currentPage - 1;
  32:                  output.Append(html.RouteLink("上一页", dict));
  33:              }
  34:              else
  35:              {
  36:                  output.Append("上一页");
  37:              }
  38:              output.Append(" ");
  39:              int currint = 5;
  40:              for (int i = 0; i <= 10; i++)
  41:              {//一共最多显示10个页码,前面5个,后面5个
  42:                  if ((currentPage + i - currint) >= 1 && (currentPage + i - currint) <= totalPages)
  43:                      if (currint == i)
  44:                      {//当前页处理
  45:                          output.Append(string.Format("[{0}]", currentPage));
  46:                      }
  47:                      else
  48:                      {//一般页处理
  49:                          dict["p"] = currentPage + i - currint;
  50:                          output.Append(html.RouteLink((currentPage + i - currint).ToString(), dict));
  51:                      }
  52:                  output.Append(" ");
  53:              }
  54:              if (currentPage < totalPages)
  55:              {//处理下一页的链接
  56:                  dict["p"] = currentPage + 1;
  57:                  output.Append(html.RouteLink("下一页", dict));
  58:              }
  59:              else
  60:              {
  61:                  output.Append("下一页");
  62:              }
  63:              output.Append(" ");
  64:              if (currentPage != totalPages)
  65:              {
  66:                  dict["p"] = totalPages;
  67:                  output.Append(html.RouteLink("末页", dict));
  68:              }
  69:              output.Append(" ");
  70:          }
  71:          output.AppendFormat("{0} / {1}", currentPage, totalPages);//这个统计加不加都行
  72:          return output.ToString();
  73:      }

效果

image

image

image

image

 

OK这回我们算是解决了这个问题

posted @ 2009-05-10 23:59  重典  阅读(13713)  评论(45编辑  收藏  举报