• 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="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="120px" />
    22             <input type="submit" value="搜索" />
    23         </form>
    24     </div>
    25     <br/>
    26     
    27     @*列表-分页*@
    28     <div style="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的扩展

    三、效果图

    你的山楂能分点给我吗?
  • 相关阅读:
    10分钟学会Python
    Python接口自动化(二)接口开发
    Python接口自动化(一)接口基础
    去掉webstorm内容区域右侧的一条竖线
    webstorm识别element-ui的标签
    vue中点击复制粘贴功能 clipboard 移动端
    vue pc element-ui class
    禁止浏览器记住密码
    js 将网络图片格式转为base64 canvas 跨域
    移动端网页在本地服务器调试
  • 原文地址:https://www.cnblogs.com/Txy-Net/p/MvcPager1.html
Copyright © 2020-2023  润新知