最近接触了一下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进行分页查询，取出数据，返回给前台进行展示

 using System;

 using System.Collections.Generic;

 using System.Linq;

 using System.Web;

 using System.Web.Mvc;

 using System.Web.Routing;

 using System.Web.UI.WebControls;

 using Controllers.Extend;

 using Model;

 using Webdiyer.WebControls.Mvc;

 namespace Controllers.Controllers

 {

     public class MvcPagerController : BaseController

     {

         public ActionResult Search(int pageIndex = , string loginName = null)

         {

             int pageSize = ;

             IQueryable<UserInfo> userInfoList = CurrentBllSession.UserInfoBll.GetIQueryable();

             if (!string.IsNullOrWhiteSpace(loginName))

             {

                 userInfoList = userInfoList.Where(a => a.LoginName.Contains(loginName));

             }

             PagedList<UserInfo> userInfoPagedList = userInfoList.OrderBy(a => a.AddTime).ToPagedList(pageIndex, pageSize);

             ViewData["loginName"] = loginName;

             return View("Index", userInfoPagedList);

         }

         public ActionResult Delete(int id,int pageIndex,string loginName)

         {

             CurrentBllSession.UserInfoBll.Delete(new UserInfo() {UserInfoId = id});

             return RedirectToAction("Search",new{ pageIndex=pageIndex,loginName=loginName});

         }

     }

 }
这里返回PageList<UserInfo>对象给前台的强类型视图，注意这里的form的method=“get”,因为分页条的链接是基于url来进行访问后台的，搜索的参数都是通过url带过去的，如果变为post，那么搜索的功能将会失效。
 
 
 @{

     Layout = null;

 }

 @using Model;

 @using Webdiyer.WebControls.Mvc

 @model PagedList<UserInfo>

 <!DOCTYPE html>

 <html>

 <head>

     <meta name="viewport" content="width=device-width" />

     <title>Index</title>

     <link href="~/Content/Scripts/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />

     <link href="~/Content/Scripts/MvcPager/pagerstyles.css" rel="stylesheet" />

 </head>

 <body>

     @*查询*@

     <div style="width:260px;margin:0 auto;">

         <form id="searchForm" action="/MvcPager/Search" method="get">

             <span>用户名：</span>

             <input type="text" name="loginName" id="title" value="@Request.QueryString["loginName"]" style="width:120px" />

             <input type="submit" value="搜索" />

         </form>

     </div>

     <br/>

     @*列表-分页*@

     <div style="width:700px;margin:0 auto;">

         <table class="table table-bordered table-striped">

             <tr>

                 <th>

                     用户名

                 </th>

                 <th>

                     密码

                 </th>

                 <th>

                     创建时间

                 </th>

                 <th>

                     操作

                 </th>

             </tr>

             @{

                 string loginName = (string)(ViewData["loginName"] ?? "");

                 for (int i = 0; i < Model.Count; i++)

                 {

                     <tr>

                         <td>

                             @Model[i].LoginName

                         </td>

                         <td>

                             @Model[i].LoginPassword

                         </td>

                         <td>

                             @Model[i].AddTime.ToString("yyyy-MM-dd")

                         </td>

                         <td>

                             <a href="/MvcPager/Delete/@Model[i].UserInfoId?pageIndex=@Model.CurrentPageIndex&loginName=@loginName">删除</a>

                         </td>

                     </tr>

                 }

             }

         </table>

         <div class="text-center">

             @Html.Pager(Model, new PagerOptions

             {

                 //ControllerName = "MvcPager",//默认的Controller和Action是由Url来决定，这里也可以手动更改

                 //ActionName = "Search",

                 PageIndexParameterName = "pageIndex",

                 ContainerTagName = "ul",

                 FirstPageText = "首页",

                 PrevPageText = "上一页",

                 NextPageText = "下一页",

                 LastPageText = "末页",

                 CssClass = "pagination",

                 PagerItemTemplate = "<li>{0}</li>",

                 CurrentPagerItemTemplate = "<li class='active'><a href='#'>{0}</a></li>",

                 DisabledPagerItemTemplate = "<li class='disabled'><a>{0}</a></li>",

                 Id = "bootstrappager",

             })

         </div>

     </div>

 </body>

 </html>

 <script src="~/Content/Scripts/jquery-2.0.3.min.js"></script>

 <script src="~/Content/Scripts/MvcPager/jquery.unobtrusive-ajax.min.js"></script>

 <script src="~/Content/Scripts/MvcPager/MvcPager.js"></script>

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

三、效果图

MvcPager使用的Demo（同步分页）的更多相关文章

  1. javascript同步分页

    目前网上分页的例子比较多,但是对其原理不是很了解,平时用的时候只是拿来调用,今天花了点时间,采用面向对象方式写了一个demo.对其方法做了封装,对外只提供一个调用接口. window.loadPage ...

  2. 【要什么自行车】ASP.NET MVC4笔记01：Asp.net MVC 分页，采用 MvcPager 和CYQ.Data来分页

    Control: ) { ; ; using (MAction action = new MAction("brain")) { MDataTable table = action ...

  3. MVC分页之MvcPager使用

    最近刚刚接触MVC不久,因项目中要用到分页,网上找了下资料,最后采用了MvcPager(http://www.webdiyer.com/),支持同步和Ajax异步分页.废话不多说了直接上代码. 一.M ...

  4. MvcPager分页控件以适用Bootstrap

    随笔- 9  文章- 0  评论- 33  修改MvcPager分页控件以适用Bootstrap 效果(含英文版,可下载)   软件开发分页效果必不可少,对于Asp.Net MVC 而言,MvcPag ...

  5. 修改MvcPager分页控件以适用Bootstrap 效果(含英文版,可下载)

    软件开发分页效果必不可少,对于Asp.Net MVC 而言,MvcPager 是个不错的选择.请访问http://www.webdiyer.com/mvcpager/ 由于自带的分页样式不能和项目整体 ...

  6. MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 (支持asp.net mvc)

    该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的Upda ...

  7. 5种风格的 jQuery 分页效果【附代码】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  8. jQuery异步分页插件

    学校软件工程让写课程设计(其实就是自选语言做个项目),感觉都是重复的东西就没有很认真的去写内容,更加注意写一些之前没有用过的东西. 因为一直都使用TP框架来写PHP,TP又自带分页类,想到这里就想试试 ...

  9. 21个很棒的jQuery分页插件下载

    分页是指将一个大内容划分为各种不同的页面,因此网站的分页是一个很重要的部分,必须让内容有组织性和易于访问.分页有各两种不同的方式,手动跟自动.最受欢迎简单和广泛的方法是jQuery插件.下面我们收集了 ...

随机推荐

  1. 一键部署mono 免费空间支持ASP.NET MVC 再也不担心伙食费换空间了

    一直以来 部署mono 都是很头疼的事情 因为是我在是不熟悉非win环境,今天偶然发现这个项目,挺好的,分享下 https://github.com/wshearn/openshift-communi ...

  2. DataTable转换成IList<T>的简单实现

    DataTable的无奈 很多时候,我们需要去操作DataTable.但DataTable的操作,实在是太不方便了.Linq?lambda表达式?统统没有... 特别是对现有结果集做进一步筛选,这样的 ...

  3. The Coroutine

    关于Coroutine 说到coroutine就不的不说subroutine,也就是我们常用到的一般函数.调用一个函数开始执行,然后函数执行完成后就退出,再次调用的时候,再从头开始,调用之间是没有保存 ...

  4. 【Java并发编程实战】-----“J.U.C”：CountDownlatch

    上篇博文([Java并发编程实战]-----"J.U.C":CyclicBarrier)LZ介绍了CyclicBarrier.CyclicBarrier所描述的是"允许一 ...

  5. 抛弃jQuery：DOM API之选择元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...

  6. 清除Android工程中没用到的资源

    项目需求一改再改,UI一调再调,结果就是项目中一堆已经用不到但却没有清理的垃圾资源,不说工程大小问题,对新进入项目的人或看其他模块的代码的人来说,这些没清理的资源可能也可能会带来困扰,所以最好还是清理 ...

  7. php修改

    做出一张表,点击登录后进入此表   然后多建立一个<td></td>用来增加一列操作 <h1>英雄联盟英雄表</h1> <table width= ...

  8. 【翻译】MongoDB指南/引言

    [原文地址]https://docs.mongodb.com/manual/ 引言 MongoDB是一种开源文档型数据库,它具有高性能,高可用性,自动扩展性 1.文档数据库 MongoDB用一个文档来 ...

  9. 【Win10应用开发】签名与验证

    对数据进行签名和验证,是为了防止数据被“盗版”.比较常规的做法是通过公钥进行验证. 算法上多用SAH_xxxx,就是哈希算法.由于MD5后来被发现存在“非唯一性”,你会发现现在很多一些下载的文件验证都 ...

  10. 使用SuperSlide 实现标签切换

    小颖之前还写过一篇jquery实现标签切换的文章  jquery实现Tab选项卡菜单 今天小颖逛博客园时看到了用SuperSlide 实现标签切换的文章,所以小颖就自己试了下,试了后发现SuperSl ...