欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ASP.NET MVC4 HtmlHelper扩展类,实现分页功能

程序员文章站 2023-12-17 12:26:58
1、扩展htmlhelper类方法showpagenavigate public static htmlstring showpagenavigate(this...

1、扩展htmlhelper类方法showpagenavigate

public static htmlstring showpagenavigate(this htmlhelper htmlhelper, int currentpage, int pagesize, int totalcount)
{
  var redirectto = htmlhelper.viewcontext.requestcontext.httpcontext.request.url.absolutepath;
  pagesize = pagesize == 0 ? 3 : pagesize;
  var totalpages = math.max((totalcount + pagesize - 1) / pagesize, 1); //总页数
  var output = new stringbuilder();
  if (totalpages > 1)
  {
    output.appendformat("<a class='pagelink' href='{0}?pageindex=1&pagesize={1}'>首页</a> ", redirectto, pagesize);
    if (currentpage > 1)
    {//处理上一页的连接
      output.appendformat("<a class='pagelink' href='{0}?pageindex={1}&pagesize={2}'>上一页</a> ", redirectto, currentpage - 1, pagesize);
    }

    output.append(" ");
    int currint = 5;
    for (int i = 0; i <= 10; i++)
    {//一共最多显示10个页码,前面5个,后面5个
      if ((currentpage + i - currint) >= 1 && (currentpage + i - currint) <= totalpages)
      {
        if (currint == i)
        {//当前页处理              
          output.appendformat("<a class='cpb' href='{0}?pageindex={1}&pagesize={2}'>{3}</a> ", redirectto, currentpage, pagesize, currentpage);
        }
        else
        {//一般页处理
          output.appendformat("<a class='pagelink' href='{0}?pageindex={1}&pagesize={2}'>{3}</a> ", redirectto, currentpage + i - currint, pagesize, currentpage + i - currint);
        }
      }
      output.append(" ");
    }
    if (currentpage < totalpages)
    {//处理下一页的链接
      output.appendformat("<a class='pagelink' href='{0}?pageindex={1}&pagesize={2}'>下一页</a> ", redirectto, currentpage + 1, pagesize);
    }

    output.append(" ");
    if (currentpage != totalpages)
    {
      output.appendformat("<a class='pagelink' href='{0}?pageindex={1}&pagesize={2}'>末页</a> ", redirectto, totalpages, pagesize);
    }
    output.append(" ");
  }
  output.appendformat("<label>第{0}页 / 共{1}页</label>", currentpage, totalpages);//这个统计加不加都行

  return new htmlstring(output.tostring());
}

2、添加公共类pagerinfo,pagequery

public class pagerinfo
{
  public int recordcount { get; set; }

  public int currentpageindex { get; set; }

  public int pagesize { get; set; }
}


public class pagerquery<tpager, tentitylist>
{
  public pagerquery(tpager pager, tentitylist entitylist)
  {
    this.pager = pager;
    this.entitylist = entitylist;
  }
  public tpager pager { get; set; }
  public tentitylist entitylist { get; set; }
}

3、然后在controller里面添加action

public actionresult index(int? pagesize, int? pageindex)
{
  int pageindex1 = pageindex ?? 1;
  int pagesize1 = pagesize ?? 5;
  int count = 0;
  //从数据库在取得数据,并返回总记录数
  var temp = newsser.loadpageentities(c => true, c => c.id, false, pagesize1, pageindex1, out count);
  pagerinfo pager = new pagerinfo();
  pager.currentpageindex = pageindex1;
  pager.pagesize = pagesize1;
  pager.recordcount = count;
  pagerquery<pagerinfo, iqueryable<news>> query = new pagerquery<pagerinfo, iqueryable<news>>(pager, temp);
  return view(query);
}

4、view里的部分代码

<tbody>
  @foreach (var item in model.entitylist)
  {
    <tr>
      <td class="checkbox">
        <input name="ids[]" type="checkbox" value="" />
      </td>
      <td>
        @item.author
      </td>
      <td>
        @item.title
      </td>
      <td>
        @item.ctime
      </td>
      <td>
        @html.actionlink("编辑", "edit", new { id = item.id }) |
        @html.actionlink("删除", "delete", new { id = item.id })
      </td>
    </tr>
  }
  @*分页*@
  <tr class="">
    <td colspan="5" align="center" class="paginator">
      <span>
        @html.showpagenavigate(model.pager.currentpageindex, model.pager.pagesize, model.pager.recordcount)
      </span>
    </td>
  </tr>
</tbody>

5、添加一些样式

.paginator
{
  font: 12px arial, helvetica, sans-serif;
  padding: 10px 20px 10px 0;
  margin: 0px auto;
}
 
.paginator a
{
  border: solid 1px #ccc;
  color: #0063dc;
  cursor: pointer;
  text-decoration: none;
}
 
.paginator a:visited
{
  padding: 1px 6px;
  border: solid 1px #ddd;
  background: #fff;
  text-decoration: none;
}
 
.paginator .cpb
{
  border: 1px solid #f50;
  font-weight: 700;
  color: #f50;
  background-color: #ffeee5;
}
 
.paginator a:hover
{
  border: solid 1px #f50;
  color: #f60;
  text-decoration: none;
}
 
.paginator a, .paginator a:visited, .paginator .cpb, .paginator a:hover
{
  float: left;
  height: 16px;
  line-height: 16px;
  min-width: 10px;
  _width: 10px;
  margin-right: 5px;
  text-align: center;
  white-space: nowrap;
  font-size: 12px;
  font-family: arial,simsun;
  padding: 0 3px;
}
 
.paginator label
{
  display:block;  
  float:left;  
}

6.总结

这个案例简单实现了在mvc中快速分页,其实很多开源的项目中都有相关的htmlhepler的扩展函数,其中也不乏带有分页的扩展,例如著名的开源商城项目nopcommerce,其中有就一个htmlextensions.cs扩展类,里面就有关于分页的扩展,人家写的可是相当专业哦,有兴趣的可以研究一下。

上一篇:

下一篇: