zoukankan      html  css  js  c++  java
  • Install-Package MvcPaging

    In this post, I will demonstrate how to use NuGet package MvcPaging in ASP.NET MVC apps. MvcPaging provides a Pager HtmlHelper that renders a pager based on a PagedList implementation. MvcPaging’s Pager helper is also providing Ajax functionality for the paging implementation. You can add MvcPaging package via NuGet. The following command in the NuGet console will install MvcPaging in your project.

    PM> Install-Package MvcPaging

    Using MvcPaging

    Step 1 – Add MvcPaging Namespace

    1. using MvcPaging;

    Step 2 – Return the Model object as generic type IPagedList<T> 

    MvcPaging’s pager helper is working based on PagedList implementation and providing extension method ToPagesList that will return a generic type IPagedList

    The following action methods would pass model object as IPagedList<T>

    1. public ActionResult Index()
    2. {
    3. int currentPageIndex = 0;
    4. var categories = categoryService.GetCategories()
    5. .ToPagedList(currentPageIndex, defaultPageSize);
    6. return View(categories);
    7. }
    8. public ActionResult AjaxIndex(int? page)
    9. {
    10. int currentPageIndex = page.HasValue ? page.Value - 1 : 0;
    11. var categories = categoryService.GetCategories()
    12. .ToPagedList(currentPageIndex, defaultPageSize);
    13. return PartialView("CategoryList", categories);
    14. }

    Step 3 – Use the Pager HtmlHelper in Views

    The below code specifies the model in View as generic type IPagedList<T>

    1. @model MvcPaging.IPagedList<Category>

    The below code in View is using Pager Ajax helper

    1. <div class="pager">
    2. @Ajax.Pager(Model.PageSize, Model.PageNumber, Model.TotalItemCount,
    3. "AjaxIndex", new AjaxOptions { UpdateTargetId = "divCategoryList" })
    4. </div>

    MvcPaging is providing normal paging and Ajax paging. In the above code, we have used Ajax pager helper and the value AjaxIndex is the name of the action method for Ajax request and the UpdateTargetId is the id of the HTML element would be used to update after the Ajax request. In this example, div element divCategoryList  is using for display table data.

    The below is the screenshot of the UI with paging functionality

    pager

    IPagedList<T> Interface

    1. public interface
  • 相关阅读:
    Cookie&Session会话跟踪技术
    JS前端数据多条件筛选(商品搜索)
    vue数据传递的特殊实现技巧
    Vue2.x directive自定义指令
    vue 自定义组件使用v-model
    Array.prototype.slice.call(arguments)探究
    webstorm快捷键汇总
    表单添加缩略图及截图js代码
    CSS水平垂直居中的几种方法
    下载页面判断客户端
  • 原文地址:https://www.cnblogs.com/wahaccp/p/3500751.html
Copyright © 2011-2022 走看看