查看: 2138|回复: 0

[ASP.NET教程] MVC生成页码选择器返回HTML代码详解

发表于 2018-1-3 08:00:01

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

先看最终效果最终效果:

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

页码生成代码为:

  1. public string GetPaginationHtml(PaginationViewModel p)
  2. {
  3. var PageNum = p.Page;//当前页码(页码从1开始)
  4. var PageCount = p.PageCount;//总页数
  5. var ItemCount = p.ItemCount;//总条数
  6. var showPageNum = 6;//显示数字的页面数量
  7. var html = new StringBuilder();
  8. html.Append(string.Format("<ul class='pagination' id='{0}' data-data='小贝'>", p.ULID, p.Data));//ULID和Data是方便在前台增加事件用的
  9. if (PageCount > 1)
  10. {
  11. var startPage = 1;
  12. if (showPageNum > PageCount)
  13. {
  14. startPage = 1;
  15. }
  16. else
  17. {
  18. if (PageNum - (showPageNum / 2) <= 0)
  19. {
  20. startPage = 1;
  21. }
  22. else if (PageNum + (showPageNum / 2) >= PageCount)
  23. {
  24. startPage = PageCount - showPageNum;
  25. }
  26. else
  27. {
  28. startPage = PageNum - (showPageNum / 2);
  29. }
  30. }
  31. startPage = (startPage == 0 ? 1 : startPage);//第一个开始显示数字的页码
  32. //上一页按钮
  33. html.Append(string.Format("<li class='{0}'><a href='#' class='js-pageSelect' data-page='小贝'><span>上一页</span></a></li>", PageNum <= 1 ? "disabled" : "", PageNum - 1));
  34. if (startPage > 1)//生成第一页按钮和中间省略号
  35. {
  36. html.Append("<li><a class='js-pageSelect'' href='#' data-page='1'>1</a></li>");
  37. if (startPage > 2)
  38. {
  39. html.Append("<li><span>...</span></li>");
  40. }
  41. }
  42. for (int i = startPage; i <= (startPage + showPageNum); i++)//生成页码
  43. {
  44. if (i > PageCount)
  45. {
  46. break;
  47. }
  48. html.Append(string.Format("<li class='{0}'><a class='js-pageSelect'' href='#' data-page='小贝'>{2}</a></li>", i == PageNum ? "active" : "", i, i));
  49. }
  50. //生成最后一页按钮和中间省略号
  51. int maxShowPage = startPage + showPageNum;
  52. if (maxShowPage <= PageCount - 1)
  53. {
  54. if(maxShowPage <= PageCount - 2)
  55. {
  56. html.Append("<li><span>...</span></li>");
  57. }
  58. html.Append(string.Format("<li><a class='js-pageSelect'' href='#' data-page='{0}'>小贝</a></li>",PageCount,PageCount));
  59. }
  60. //显示下一页按钮
  61. html.Append(string.Format("<li class='{0}'><a href='#' class='js-pageSelect' data-page='小贝'><span>下一页</span></a></li>", PageNum >= PageCount ? "disabled" : "", PageNum + 1));
  62. //显示页码信息
  63. html.Append(string.Format("<li><span>第{0}页 共小贝页{2}条内容</span></li>", PageNum, PageCount, ItemCount));
  64. }
  65. else
  66. {
  67. //内容不足一页时显示的内容
  68. html.Append(string.Format("<li><span>共1页{0}条内容</span></li>", ItemCount));
  69. }
  70. return html.ToString();
  71. }
复制代码

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

页面中可以直接

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

也可以

  1. $.ajax({
  2. url: '/Function/FileArchiveSelectShouWenDengJiTableMessage',
  3. type: 'post',
  4. dataType: 'html',
  5. data: {
  6. page: page,
  7. pageSize: pagesize,
  8. ...
  9. },
  10. })
  11. .done(function (data) {
  12. $('#ShouWenPageSelect').html(data);
  13. InitPageSelectEvent();
  14. });
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。



回复

使用道具 举报