最近接触了一下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. 微信小程序二维码推广统计

    微信小程序可以通过生成带参数的二维码,那么这个参数是可以通过APP的页面进行监控的 这样就可以统计每个二维码的推广效果. 今天由好推二维码推出的小程序统计工具HotApp小程序统计也推出了带参数二维码 ...

  2. [jquery]显示隐藏div标签的几种方法

    1.$("#demo").attr("style","display:none;");//隐藏div $("#demo" ...

  3. 【初码干货】【Azure系列】1、再次感受Azure，体验Windows Server 2016并部署BlogEngine.NET

    上个月末,在某人的建议下,重新注册了一个1元试用账户(包含1个月期限的1500元订阅),并充值了1000元转为了正式账户,相当于1000元得到了2500的订阅,于是又一次开启了Azure之旅. 在这不 ...

  4. 云计算之路-阿里云上：“黑色1秒”最新线索——w3tp与w3dt

    向大家分享一下最近排查“黑色1秒”问题的进展,“黑色1秒”的问题表现详见什么是黑色1秒. 1. 发生在w3wp进程内 判断依据:“黑色1秒”期间,http.sys的HTTP Service Reque ...

  5. ASP.NET MVC Model绑定(五)

    ASP.NET MVC Model绑定(五) 前言 前面的篇幅对于IValueProvider的获取位置和所处的生成过程做了讲解,本篇将会对IValueProvider的使用做个基础的示例讲解,读完本 ...

  6. Spring Boot -- 启动彩蛋

    使用Spring Boot启动的jar包总是会显示一个Spring的图标: . ____ _ __ _ _ /\\ / ___'_ __ _ _(_)_ __ __ _ \ \ \ \ ( ( )\_ ...

  7. 工欲善其事，必先利其器 之 WPF篇: 随着开发轨迹来看高效WPF开发的工具和技巧

    之前一篇<工欲善其事,必先利其器.VS2013全攻略(安装,技巧,快捷键,插件)!> 看到很多朋友回复和支持,非常感谢,尤其是一些拍砖的喷油,感谢你们的批评,受益良多. 我第一份工作便是W ...

  8. [Mahout] 完整部署过程

    概述        Mahout底层依赖Hadoop,部署Mahout过程中最困难的就是Hadoop的部署      本文假设用户本身没有进行Hadoop的部署,记述部署Mahout的过程       ...

  9. ABP源码分析九：后台工作任务

    文主要说明ABP中后台工作者模块(BackgroundWorker)的实现方式,和后台工作模块(BackgroundJob).ABP通过BackgroundWorkerManager来管理Backgr ...

  10. Spark2 ML 学习札记

    摘要: 1.pipeline 模式 1.1相关概念 1.2代码示例 2.特征提取,转换以及特征选择 2.1特征提取 2.2特征转换 2.3特征选择 3.模型选择与参数选择 3.1 交叉验证 3.2 训 ...