Basic usage and extension methods of MvcPager paging

I. MvcPager document address

MvcPager document

II. Basic usage

1.nuget (or download dll directly on the official website)

Directly nuget to search mvcpager, and select Webdiyer.MvcPager to install. Select the core version if it is. net core

2.model

model can be defined according to your own needs

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)
        {
           //Get the data, and replace QueryList with your own method to get the data.
            var list = DeviceBaseOperate.QueryList(m => m.IsActive == 1).ToList();
           //Convert to MvcPager paging entity pagedlist < T >
            PagedList<DeviceBaseInfo> p = list.ToPagedList(pageIndex, 2);
            return View(p);
        }
    }
}

4.view

Other code of the page is omitted, only the paging part is shown for reference


@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. effect

3. Change to an extension method to facilitate uniform style modification

If every page writes a bunch of paging configuration, it is not convenient to modify, and copying many things looks messy. For the CRUD page of background management system, which has a uniform paging style, it can be written as an extension method.

1. Create a static class and add extension methods

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>  
        //Paging
        /// </summary>  
        /// <param name="helper"></param>  
        /// <returns></returns>  
        public static HtmlPager pageHelper(this HtmlHelper helper, IPagedList model)
        {
            var options = new PagerOptions
            {
                ControllerName = "Device",//Controller name
                ActionName = "Index",//Action name
                AutoHide = false,//Hide pagination when only 1 page
                ContainerTagName = "ul",//Container label
                CssClass = "pagination pagination-sm no-margin pull-right",
                PageIndexParameterName = "pageIndex",
                FirstPageText = "home page",
                LastPageText = "Last",
                PrevPageText = "Previous page",
                NextPageText = "next page",
                CurrentPageNumberFormatString = "{0}",//Gets or sets the current page index format string
                PageNumberFormatString = "",//Gets or sets the numeric page index format string
                CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>",
                DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>",
                NumericPagerItemTemplate= "<li>{0}</li>",//Gets or sets the html template of the digital page index paging element,
                PagerItemTemplate = "<li>{0}</li>",//Gets or sets the html template that contains the digital page, the current page, and the top, bottom, front, and back page elements.
                NavigationPagerItemsPosition =PagerItemsPosition.BothSide,//Gets or sets the position of the four navigation buttons of the first page, next page, next page and last page, which are displayed on both sides by default
                Id = "pagination"
            };
            return helper.Pager(model, options);
        }
    }
}

2. view use

@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>

Tags: Programming

Posted on Fri, 01 Nov 2019 11:08:31 -0700 by jstarkweather