MvcPager分頁基本使用方法和擴充套件方法
阿新 • • 發佈:2019-05-30
一.MvcPager文件地址
二.基本使用方法
1.nuget獲取(或者直接在官網下載dll)
直接nuget搜尋mvcpager即可,選擇Webdiyer.MvcPager安裝。如果是.net core選擇core版本
2.model
model根據自己需要定義即可
3.controller
using System.Linq; using System.Web.Mvc; using OF.Component.BLL; using OF.Component.Model; using Webdiyer.WebControls.Mvc; namespace Gov.OP.Controllers { public class DeviceController : BaseController { // GET: Device public ActionResult Index(int pageIndex = 1) { //獲取資料,QueryList替換成自己獲取資料的方法。 var list = DeviceBaseOperate.QueryList(m => m.IsActive == 1).ToList(); //轉換成MvcPager分頁實體PagedList<T> PagedList<DeviceBaseInfo> p = list.ToPagedList(pageIndex, 2); return View(p); } } }
4.view
省略了頁面其他程式碼,只展示分頁部分作參考
@using Webdiyer.WebControls.Mvc; @model PagedList<DeviceBaseInfo> <section class="content"> <div class="box-footer clearfix "> @Html.Pager(Model, new PagerOptions { PageIndexParameterName = "id", ContainerTagName = "ul", CssClass = "pagination", CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>", DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>", PagerItemTemplate = "<li>{0}</li>", Id = "pagination" }) </div> </section>
5.效果
三.改成擴充套件方法,方便統一修改樣式
如果每個頁面都寫一堆分頁的配置,不方便修改,而且複製很多東西看起來很亂。對於後臺管理系統這種分頁樣式比較統一的CRUD頁面,可以寫成一個擴充套件方法。
1.建立一個靜態類,新增擴充套件方法
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using Webdiyer.WebControls.Mvc; namespace Gov.OP.Common { public static class HtmlHelperExtensions { /// <summary> /// 分頁 /// </summary> /// <param name="helper"></param> /// <returns></returns> public static HtmlPager pageHelper(this HtmlHelper helper, IPagedList model) { var options = new PagerOptions { ControllerName = "Device",//控制器名稱 ActionName = "Index",//Action名稱 AutoHide = false,//只有1頁時是否隱藏分頁 ContainerTagName = "ul",//容器標籤 CssClass = "pagination pagination-sm no-margin pull-right", PageIndexParameterName = "pageIndex", FirstPageText = "首頁", LastPageText = "末頁", PrevPageText = "上一頁", NextPageText = "下一頁", CurrentPageNumberFormatString = "{0}",//獲取或設定當前頁索引格式字串 PageNumberFormatString = "",//獲取或設定數字頁索引格式化字串 CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>", DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>", NumericPagerItemTemplate= "<li>{0}</li>",//獲取或設定數字頁索引分頁元素的html模板, PagerItemTemplate = "<li>{0}</li>",//獲取或設定包含數字頁、當前頁及上、下、前、後分頁元素的html模板。 NavigationPagerItemsPosition =PagerItemsPosition.BothSide,//獲取或設定首頁、下頁、下頁和尾頁四個導航按鈕的位置,預設,顯示在兩側 Id = "pagination" }; return helper.Pager(model, options); } } }
2. view使用
@using OF.Component.Model
@using Webdiyer.WebControls.Mvc;
@using Gov.OP.Common;
@model PagedList<DeviceBaseInfo>
@{
ViewBag.Title = "Index";
}
<section class="content">
<div class="box-footer clearfix ">
@Html.pageHelper(Model);
</div>
</section>