MvcPager使用的Demo（同步分页）

最近接触了一下MvcPager,昂。。。来做个笔记吧

其实，我喜欢前后端分离，分页这种东西前端负责的地方，后端不用顾问，这里的MvcPager有点让我想起服务器控件，毕竟用到了HtmlHelper。

但是挺方便的。。以前我们写分页，后端会封装一Page<T>类，现在我们可以用MvcPager给我们提供好的PageList<T>，功能有点类似，不过MvcPager的功能要强大

一、使用MvcPager这个控件，需要以下支持

1.后端MvcPager.dll引用:

2.前端需要
Css:pagerstyles.css,以及其他主题样式 图片等（PS:我的Demo是用的bootstrap）
Js:Jq,jquery.unobtrusive-ajax.min.js,MvcPager.js(PS:同步的分页不需要全部引用，异步的分页是需要引用的，这里我们暂时都先引用哈)
 
 二、利用MvcPager提供的方法ToPageList进行分页查询，取出数据，返回给前台进行展示
   
 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.Mvc;
 6 using System.Web.Routing;
 7 using System.Web.UI.WebControls;
 8 using Controllers.Extend;
 9 using Model;
10 using Webdiyer.WebControls.Mvc;
11 
12 namespace Controllers.Controllers
13 {
14     public class MvcPagerController : BaseController
15     {
16         public ActionResult Search(int pageIndex = 1, string loginName = null)
17         {
18             int pageSize = 1;
19 
20             IQueryable<UserInfo> userInfoList = CurrentBllSession.UserInfoBll.GetIQueryable();
21             if (!string.IsNullOrWhiteSpace(loginName))
22             {
23                 userInfoList = userInfoList.Where(a => a.LoginName.Contains(loginName));
24             }
25             PagedList<UserInfo> userInfoPagedList = userInfoList.OrderBy(a => a.AddTime).ToPagedList(pageIndex, pageSize);
26 
27             ViewData["loginName"] = loginName;
28             return View("Index", userInfoPagedList);
29         }
30 
31         public ActionResult Delete(int id,int pageIndex,string loginName)
32         {
33             CurrentBllSession.UserInfoBll.Delete(new UserInfo() {UserInfoId = id});
34             
35             return RedirectToAction("Search",new{ pageIndex=pageIndex,loginName=loginName});
36         }
37     }
38 }
View Code
这里返回PageList<UserInfo>对象给前台的强类型视图，注意这里的form的method=“get”,因为分页条的链接是基于url来进行访问后台的，搜索的参数都是通过url带过去的，如果变为post，那么搜索的功能将会失效。
 
 
 1 @{
 2     Layout = null;
 3 }
 4 @using Model;
 5 @using Webdiyer.WebControls.Mvc
 6 @model PagedList<UserInfo>
 7 <!DOCTYPE html>
 8 
 9 <html>
10 <head>
11     <meta name="viewport" content="width=device-width" />
12     <title>Index</title>
13     <link href="~/Content/Scripts/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />
14     <link href="~/Content/Scripts/MvcPager/pagerstyles.css" rel="stylesheet" />
15 </head>
16 <body>
17     @*查询*@
18     <div style="width:260px;margin:0 auto;">
19         <form id="searchForm" action="/MvcPager/Search" method="get">
20             <span>用户名：</span>
21             <input type="text" name="loginName" id="title" value="@Request.QueryString["loginName"]" style="width:120px" />
22             <input type="submit" value="搜索" />
23         </form>
24     </div>
25     <br/>
26     
27     @*列表-分页*@
28     <div style="width:700px;margin:0 auto;">
29         <table class="table table-bordered table-striped">
30             <tr>
31                 <th>
32                     用户名
33                 </th>
34                 <th>
35                     密码
36                 </th>
37                 <th>
38                     创建时间
39                 </th>
40                 <th>
41                     操作
42                 </th>
43             </tr>
44 
45             @{
46                 string loginName = (string)(ViewData["loginName"] ?? "");
47 
48                 for (int i = 0; i < Model.Count; i++)
49                 {
50                     <tr>
51                         <td>
52                             @Model[i].LoginName
53                         </td>
54                         <td>
55                             @Model[i].LoginPassword
56                         </td>
57                         <td>
58                             @Model[i].AddTime.ToString("yyyy-MM-dd")
59                         </td>
60                         <td>
61                             <a href="/MvcPager/Delete/@Model[i].UserInfoId?pageIndex=@Model.CurrentPageIndex&loginName=@loginName">删除</a>
62                         </td>
63                     </tr>
64                 }
65             }
66 
67         </table>
68         
69         <div class="text-center">
70             @Html.Pager(Model, new PagerOptions
71             {
72                 //ControllerName = "MvcPager",//默认的Controller和Action是由Url来决定，这里也可以手动更改
73                 //ActionName = "Search",
74                 PageIndexParameterName = "pageIndex",
75                 ContainerTagName = "ul",
76                 FirstPageText = "首页",
77                 PrevPageText = "上一页",
78                 NextPageText = "下一页",
79                 LastPageText = "末页",
80                 CssClass = "pagination",
81                 PagerItemTemplate = "<li>{0}</li>",
82                 CurrentPagerItemTemplate = "<li class='active'><a href='#'>{0}</a></li>",
83                 DisabledPagerItemTemplate = "<li class='disabled'><a>{0}</a></li>",
84                 Id = "bootstrappager",
85             })
86         </div>
87     </div>
88 
89 </body>
90 </html>
91 <script src="~/Content/Scripts/jquery-2.0.3.min.js"></script>
92 <script src="~/Content/Scripts/MvcPager/jquery.unobtrusive-ajax.min.js"></script>
93 <script src="~/Content/Scripts/MvcPager/MvcPager.js"></script>
View Code

 主要是这张图，设置分页条的代码，这里用到了MvcPager的分页功能,是对HtmlHelper的扩展

 

 

三、效果图

 

posted @ 2016-11-29 21:15  童小鱼  阅读(2262)  评论(0)  编辑  收藏  举报