查看: 2184|回复: 0

[.NET源码] ASP.NET MVC 4使用PagedList.Mvc分页的实现代码

发表于 2018-1-7 10:37:25

asp.net MVC中进行分页的方式有多种,在NuGet上有提供使用PagedList、PagedList.Mvc进行分页。

在安装引用PagedList.Mvc的同时会安装引用PagedList。

代码如下:
@Html.PagedListPager((PagedList.IPagedList)ViewBag.Models, page => Url.Action("Index", new { page, keyword = Request["keyword"], datemin = Request["datemin"], datemax = Request["datemax"] }))

搜索触发事件:

  1. <input type="text" id="datemin" class="input-text Wdate" style="width:60px;" value="@Request["datemin"]">
  2. <input type="text" id="datemax" class="input-text Wdate" style="width:60px;" value="@Request["datemax"]">
  3. <input type="text" class="input-text" style="width:250px" placeholder="输入关键词" id="keyword" name="" value="@Request["keyword"]">
  4. <button type="submit" class="btn btn-success" id="" name="" onclick="search()"><i class="icon-search"></i> 搜索</button>
复制代码
  1. <script>
  2. function search() {
  3. var url = "?type=1";
  4. if ($("#keyword").val() != "") {
  5. url += "&keyword=" + $("#keyword").val();
  6. }
  7. if ($("#datemin").val() != "") {
  8. url += "&datemin=" + $("#datemin").val();
  9. }
  10. if ($("#datemax").val() != "") {
  11. url += "&datemax=" + $("#datemax").val();
  12. }
  13. window.location.href = "/Admin/SampleInfo/Index"+url;
  14. }
  15. </script>
复制代码

后台方法:

  1. IQueryable<SampleInfo> models = db.SampleInfoBLL.GetAllEntities().Where(d => d.IsDel == false);
  2. if (!String.IsNullOrEmpty(Request["keyword"]))
  3. {
  4. string keyword = Request["keyword"];
  5. models = models.Where(d => d.Site_Chinese.Contains(keyword));
  6. }
  7. if (!String.IsNullOrEmpty(Request["datemin"]))
  8. {
  9. int datemin = Convert.ToInt32(Request["datemin"]);
  10. models = models.Where(d => Convert.ToDouble(d.Lon_Degree) >= datemin);
  11. }
  12. if (!String.IsNullOrEmpty(Request["datemax"]))
  13. {
  14. int datemax = Convert.ToInt32(Request["datemax"]);
  15. models = models.Where(d => Convert.ToDouble(d.Lat_Degree) <= datemax);
  16. }
  17. int page = 1;
  18. if (Request["page"] != null)
  19. {
  20. page = Convert.ToInt32(Request["page"]);
  21. }
  22. ViewBag.ModelsCount = models.Count();
  23. ViewBag.Models = models.OrderBy(d => d.SampleInfoID).ToPagedList(page, 10);
复制代码

分页控件样式:

  1. .pagination {
  2. display: inline-block;
  3. padding-left: 0;
  4. margin: 20px 0;
  5. border-radius: 4px;
  6. }
  7. .pagination > li {
  8. display: inline;
  9. }
  10. .pagination > li > a,
  11. .pagination > li > span {
  12. position: relative;
  13. float: left;
  14. padding: 6px 12px;
  15. margin-left: -1px;
  16. line-height: 1.428571429;
  17. text-decoration: none;
  18. background-color: #ffffff;
  19. border: 1px solid #dddddd;
  20. }
  21. .pagination > li:first-child > a,
  22. .pagination > li:first-child > span {
  23. margin-left: 0;
  24. border-bottom-left-radius: 4px;
  25. border-top-left-radius: 4px;
  26. }
  27. .pagination > li:last-child > a,
  28. .pagination > li:last-child > span {
  29. border-top-right-radius: 4px;
  30. border-bottom-right-radius: 4px;
  31. }
  32. .pagination > li > a:hover,
  33. .pagination > li > span:hover,
  34. .pagination > li > a:focus,
  35. .pagination > li > span:focus {
  36. background-color: #eeeeee;
  37. }
  38. .pagination > .active > a,
  39. .pagination > .active > span,
  40. .pagination > .active > a:hover,
  41. .pagination > .active > span:hover,
  42. .pagination > .active > a:focus,
  43. .pagination > .active > span:focus {
  44. z-index: 2;
  45. color: #ffffff;
  46. cursor: default;
  47. background-color: #428bca;
  48. border-color: #428bca;
  49. }
  50. .pagination > .disabled > span,
  51. .pagination > .disabled > a,
  52. .pagination > .disabled > a:hover,
  53. .pagination > .disabled > a:focus {
  54. color: #999999;
  55. cursor: not-allowed;
  56. background-color: #ffffff;
  57. border-color: #dddddd;
  58. }
  59. .pagination-lg > li > a,
  60. .pagination-lg > li > span {
  61. padding: 10px 16px;
  62. font-size: 18px;
  63. }
  64. .pagination-lg > li:first-child > a,
  65. .pagination-lg > li:first-child > span {
  66. border-bottom-left-radius: 6px;
  67. border-top-left-radius: 6px;
  68. }
  69. .pagination-lg > li:last-child > a,
  70. .pagination-lg > li:last-child > span {
  71. border-top-right-radius: 6px;
  72. border-bottom-right-radius: 6px;
  73. }
  74. .pagination-sm > li > a,
  75. .pagination-sm > li > span {
  76. padding: 5px 10px;
  77. font-size: 12px;
  78. }
  79. .pagination-sm > li:first-child > a,
  80. .pagination-sm > li:first-child > span {
  81. border-bottom-left-radius: 3px;
  82. border-top-left-radius: 3px;
  83. }
  84. .pagination-sm > li:last-child > a,
  85. .pagination-sm > li:last-child > span {
  86. border-top-right-radius: 3px;
  87. border-bottom-right-radius: 3px;
  88. }
  89. .pager {
  90. padding-left: 0;
  91. margin: 20px 0;
  92. text-align: center;
  93. list-style: none;
  94. }
  95. .pager:before,
  96. .pager:after {
  97. display: table;
  98. content: " ";
  99. }
  100. .pager:after {
  101. clear: both;
  102. }
  103. .pager:before,
  104. .pager:after {
  105. display: table;
  106. content: " ";
  107. }
  108. .pager:after {
  109. clear: both;
  110. }
  111. .pager li {
  112. display: inline;
  113. }
  114. .pager li > a,
  115. .pager li > span {
  116. display: inline-block;
  117. padding: 5px 14px;
  118. background-color: #ffffff;
  119. border: 1px solid #dddddd;
  120. border-radius: 15px;
  121. }
  122. .pager li > a:hover,
  123. .pager li > a:focus {
  124. text-decoration: none;
  125. background-color: #eeeeee;
  126. }
  127. .pager .next > a,
  128. .pager .next > span {
  129. float: right;
  130. }
  131. .pager .previous > a,
  132. .pager .previous > span {
  133. float: left;
  134. }
  135. .pager .disabled > a,
  136. .pager .disabled > a:hover,
  137. .pager .disabled > a:focus,
  138. .pager .disabled > span {
  139. color: #999999;
  140. cursor: not-allowed;
  141. background-color: #ffffff;
  142. }
  143. .pagination-container {
  144. text-align: center;
  145. }
复制代码

分页样式效果:

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



回复

使用道具 举报