MVC如何生成页码选择器返回HTML代码-创新互联

小编给大家分享一下MVC如何生成页码选择器返回HTML代码，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

10多年的城固网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站的优势是能够根据用户设备显示端的尺寸不同，自动调整城固建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联公司从事“城固网站设计”,“城固网站推广”以来，每个客户项目都认真落实执行。

我主要讲此代码用于MVC的分布页。

先看最终效果最终效果：

MVC如何生成页码选择器返回HTML代码

样式为bootstrap3中的分页“pagination”，如果不使用bootstrap单独提出来并不大

页码生成代码为：

public string GetPaginationHtml(PaginationViewModel p)
{
  var PageNum = p.Page;//当前页码（页码从1开始）
  var PageCount = p.PageCount;//总页数
  var ItemCount = p.ItemCount;//总条数

  var showPageNum = 6;//显示数字的页面数量

  var html = new StringBuilder();
  html.Append(string.Format("<ul class='pagination' id='{0}' data-data='{1}'>", p.ULID, p.Data));//ULID和Data是方便在前台增加事件用的
  if (PageCount > 1)
  {
    var startPage = 1;
    if (showPageNum > PageCount)
    {
      startPage = 1;
    }
    else
    {
      if (PageNum - (showPageNum / 2) <= 0)
      {
        startPage = 1;
      }
      else if (PageNum + (showPageNum / 2) >= PageCount)
      {
        startPage = PageCount - showPageNum;
      }
      else
      {
        startPage = PageNum - (showPageNum / 2);
      }
    }
    startPage = (startPage == 0 ? 1 : startPage);//第一个开始显示数字的页码
    //上一页按钮
    html.Append(string.Format("<li class='{0}'><a href='#' class='js-pageSelect' data-page='{1}'><span>上一页</span></a></li>", PageNum <= 1 ? "disabled" : "", PageNum - 1));

    if (startPage > 1)//生成第一页按钮和中间省略号
    {
      html.Append("<li><a class='js-pageSelect'' href='#' data-page='1'>1</a></li>");
      if (startPage > 2)
      {
        html.Append("<li><span>...</span></li>");
      }
    }
    for (int i = startPage; i <= (startPage + showPageNum); i++)//生成页码
    {
      if (i > PageCount)
      {
        break;
      }
      html.Append(string.Format("<li class='{0}'><a class='js-pageSelect'' href='#' data-page='{1}'>{2}</a></li>", i == PageNum ? "active" : "", i, i));
    }

    //生成最后一页按钮和中间省略号
    int maxShowPage = startPage + showPageNum;
    if (maxShowPage <= PageCount - 1)
    {
      if(maxShowPage <= PageCount - 2)
      {
        html.Append("<li><span>...</span></li>");
      }
      html.Append(string.Format("<li><a class='js-pageSelect'' href='#' data-page='{0}'>{1}</a></li>",PageCount,PageCount));
    }
    //显示下一页按钮
    html.Append(string.Format("<li class='{0}'><a href='#' class='js-pageSelect' data-page='{1}'><span>下一页</span></a></li>", PageNum >= PageCount ? "disabled" : "", PageNum + 1));
    //显示页码信息
    html.Append(string.Format("<li><span>第{0}页 共{1}页{2}条内容</span></li>", PageNum, PageCount, ItemCount));
  }
  else
  {
    //内容不足一页时显示的内容
    html.Append(string.Format("<li><span>共1页{0}条内容</span></li>", ItemCount));
  }
  return html.ToString();
}

用的时候直接放到MVC Controllers 中ActionResult 返回Content(html)。

页面中可以直接

@Html.Action("", new {page = 1,pageSize = 20, ... })

也可以

$.ajax({
 url: '/Function/FileArchiveSelectShouWenDengJiTableMessage',
 type: 'post',
 dataType: 'html',
 data: {
  page: page,
  pageSize: pagesize,
  ...
  },
})
.done(function (data) {
 $('#ShouWenPageSelect').html(data);
 InitPageSelectEvent();
});

看完了这篇文章，相信你对“MVC如何生成页码选择器返回HTML代码”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

当前名称：MVC如何生成页码选择器返回HTML代码-创新互联
文章转载：https://www.cdcxhl.com/article32/dsihsc.html

成都网站建设公司_创新互联，为您提供App开发、微信小程序、云服务器、服务器托管、静态网站、品牌网站设计

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容