视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
ASP.NET MVC4 Razor模板简易分页效果
2020-11-27 22:36:27 责编:小采
文档


一、无数据提交

第一步,建立一个 Controller命名为PageIndex的空控制器,自定义一个方法如下:   

 public ActionResult PageIndex(string action, string controller, int currentPage, int pageCount)
 {
 //int count = db.Product.Count();
 ViewBag.PageCount = pageCount;//从操作中获取总数据页数将传入分页视图页面
 ViewBag.CurrentPage = currentPage;//从操作中获取当前页数将传入分页视图页面
 ViewBag.action = action;
 ViewBag.controller = controller;
 return PartialView();
 }

传入四个参数: 

action:操作(要分页的视图的操作,默认为Index);

controller:控制器;

currentPage:当前页数;

pageCount:数据总页数

第二步:添加视图(PageIndex)

@if (ViewBag.PageCount == null || ViewBag.PageCount == 0)
    {
     <span>您好,当前没有数据显示!</span>
    }
    else
    {
     if (ViewBag.CurrentPage <= 10)
   {
   <span><a href="@Url.Action(ViewBag.action, ViewBag.controller, new { PageIndex = 1 }, null)">
 首页</a>|</span>
   }

 else
 {
 <a href="@Url.Action(ViewBag.action, ViewBag.controller, new { PageIndex = 1 }, null)">
 首页</a>

 <span><a href="@Url.Action(ViewBag.action, ViewBag.controller, new { PageIndex = ViewBag.CurrentPage - 10 }, null)">
 ...</a> </span>
 
 }
 for (int i = ViewBag.CurrentPage - 3; i < ViewBag.CurrentPage + 3; i++)
 {
 if (i <= 0)
 {
 continue;
 }
 if (i > ViewBag.PageCount)
 {
 break;
 }
 <span><a href="@Url.Action(ViewBag.action, ViewBag.controller, new { PageIndex = i }, null)">
 第 @i 页</a>|</span>
 }
 if (ViewBag.CurrentPage > 1)
 {
 <span><a href="@Url.Action(ViewBag.action, ViewBag.controller, new { PageIndex = ViewBag.CurrentPage - 1 }, null)">
 上一页</a>|</span>
 }
 if (ViewBag.PageCount > ViewBag.CurrentPage)
 {
 <span><a href="@Url.Action(ViewBag.action, ViewBag.controller, new { PageIndex = ViewBag.CurrentPage + 1 }, null)">
 下一页</a></span>
 }
 if (ViewBag.CurrentPage == ViewBag.PageCount || ViewBag.CurrentPage >= ViewBag.PageCount - 10)
 {
 
 <a href="@Url.Action(ViewBag.action, ViewBag.controller, new { PageIndex = ViewBag.PageCount }, null)">
 尾 页</a>
 }
 else
 {
 <span><a href="@Url.Action(ViewBag.action, ViewBag.controller, new { PageIndex = ViewBag.CurrentPage + 10 }, null)">
 ...</a></span>
 <a href="@Url.Action(ViewBag.action, ViewBag.controller, new { PageIndex = ViewBag.PageCount }, null)">
 尾 页</a>
 }
 <span style="padding-left: 20px">当前页数: @ViewBag.CurrentPage | 共 @ViewBag.PageCount 页
 </span>
    }

第三步:操作的视图的控制器修改

public ViewResult Index(int? pageIndex)
    {
      int pageInd = pageIndex.HasValue ? pageIndex.Value : 1;
       ViewBag.PageCount = (int)Math.Ceiling(result.Count() / 20.0);

      //这里的是take,按照每页20个显示
      return View(result.OrderBy(t => t.PID).Skip((pageInd - 1) * 20).Take(20));
    }

第四步:页面调用(即最后一步)

代码如下:@Html.Action("PageIndex", "Product", new { action = "Index", controller = "Log", pageCount = ViewBag.PageCount, currentPage = ViewBag.CurrentPage })

一般来说,数据都是变动的。 

二、有数据提交

 第一步:建立一个 Controller命名为PageIndex的空控制器,自定义一个方法如下: 

 public ActionResult PageIndexKey(int currentPage, int pageCount)
 {
 ViewBag.PageCount = pageCount;//从操作中获取总数据页数将传入分页视图页面
 ViewBag.CurrentPage = currentPage;//从操作中获取当前页数将传入分页视图页面
 return PartialView();
 }

第二步:建立分布视图

 <script>
 $(function () {
 $("#pageingByForm a").click(function (event) {
 $("#pageIndex").val($(this).attr("pageIndex"));
 //$(this).parent("Form").submit();
 document.getElementsByTagName("Form").item(0).submit();
 event.preventDefault();
 });
 });
</script>
@Html.Hidden("pageIndex")
<div id="pageingByForm">
 @if (ViewBag.PageCount == null || ViewBag.PageCount == 0)
 {
 <span>当前没有数据</span>
 }
 else
 {
 if (ViewBag.CurrentPage <= 10)
 {
 <span><a pageindex="1" href="#">首页</a>|</span>
 }

 else
 {
 <span><a pageindex="1" href="#">首页</a>|</span>

 <span><a pageIndex="@(ViewBag.CurrentPage - 10)" href="#">...</a>|</span>
 }
 for (int i = ViewBag.CurrentPage - 3; i < ViewBag.CurrentPage + 3; i++)
 {
 if (i <= 0)
 {
 continue;
 }
 if (i > ViewBag.PageCount)
 {
 break;
 }
 <span><a pageIndex="@i" href="#">第 @i 页</a>|</span>
 }
 if (ViewBag.CurrentPage >1)
 {
 <span><a pageIndex="@(ViewBag.CurrentPage - 1)" href="#">上一页</a>|</span>
 }
 if (ViewBag.PageCount > ViewBag.CurrentPage)
 {
 <span><a pageIndex="@(ViewBag.CurrentPage + 1)" href="#">下一页</a></span>
 }
 if (ViewBag.CurrentPage >= ViewBag.PageCount - 10)
 {
 }
 else
 {
 <span><a pageIndex="@(ViewBag.CurrentPage + 10)" href="#">...</a>|</span>
 <span><a pageIndex="@ViewBag.PageCount" href="#">尾 页</a></span>
 }
 <span style="padding-left: 20px">当前页数: @ViewBag.CurrentPage | 共 @ViewBag.PageCount 页
 </span>
 }
</div>

第三步:修改操作视图和控制器

public ViewResult Index(int? pageIndex ,string search)
  {
  int pageInd = pageIndex.HasValue ? pageIndex.Value : 1;
   ViewBag.PageCount = (int)Math.Ceiling(result.Count() / 20.0); 
  return View(result.OrderBy(t => t.PID).Skip((pageInd - 1) * 20).Take(20));
  }


视图(页面调用):
 @using (Html.BeginForm())

根据性别得到查询结果 

性别: @Html.TextBox("sex")

<input type="submit" value="查询" />  

@Html.Action("PageIndexKey", "PageIndex", new { pageCount = ViewBag.PageCount, currentPage = ViewBag.CurrentPage })
 

Example: 

    //数据,一个list的集合 
    List<string> s = new List<string>(); 
 s.Add("张军"); 
 ViewBag.PageCount = (int)Math.Ceiling(s.Count() / 20.0); 
 return View(s.Skip((pageInd - 1) * 20).Take(20)); 
    @Html.Action("PageIndex", "PageIndex", 
    new { action = "", controller = "", pageCount = ViewBag.PageCount, currentPage = ViewBag.CurrentPage })

下载本文
显示全文
专题