1. 程式人生 > >MvcPager分頁基本使用方法和擴充套件方法

MvcPager分頁基本使用方法和擴充套件方法

一.MvcPager文件地址

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>