MvcPager使用的Demo（同步分页）

时间： 2016/12/06 22:54:56

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

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

但是挺方便的。。以前我们写分页，后端会封装一Page类，现在我们可以用MvcPager给我们提供好的PageList，功能有点类似，不过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 userInfoList = CurrentBllSession.UserInfoBll.GetIQueryable();
21             if (!string.IsNullOrWhiteSpace(loginName))
22             {
23                 userInfoList = userInfoList.Where(a => a.LoginName.Contains(loginName));
24             }
25             PagedList 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对象给前台的强类型视图，注意这里的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>Indextitle>
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                     >
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的扩展

三、效果图

上一篇：如何写出安全的API接口？接口参数加密签名设计思路

下一篇：安全退出，清空Session或Cookie