


Introduction to paging method through PagingHelper class in HtmlHelper
This article mainly introduces the MVC HtmlHelper extension in detail to realize the paging function, which has certain reference value. Interested friends can refer to
MVC HtmlHelper extension class PagingHelper realizes the paging function. For your reference, the specific content is as follows
using System; using System.Collections.Generic; using System.Collections.Specialized; using System.Linq; using System.Text; using System.Web; using System.Web.Mvc; using System.Web.Routing; namespace HtmlHelperMvc.Models { /// <summary> /// 分页类如果一个页面显示两个列表只需要复制该类到项目中重命名一个就可以 /// </summary> public static class PagingHelper { #region 属性Property /// <summary> /// 当前页码 /// </summary> private static int? _currentPage = null; /// <summary> /// 当前页码 /// </summary> public static int CurrentPage { get { return _currentPage ?? 1; } set { _currentPage = value; } } /// <summary> /// 每页记录条数 /// </summary> private static int? _pageSize = null; /// <summary> /// 每页记录条数 /// </summary> public static int PageSize { get { return _pageSize ?? 15; } set { _pageSize = value; } } /// <summary> /// 是否显示上一页 /// </summary> public static bool HasPreviousPage { get { return (CurrentPage > 1); } } /// <summary> /// 是否显示下一页 /// </summary> public static bool HasNextPage { get { return (CurrentPage < TotalPages); } } /// <summary> /// 当前页: /// </summary> public static string CurrentPageDisplayName { get; set; } /// <summary> /// 每页显示: /// </summary> public static string PageSizeDisplayName { get; set; } public static string FirstDisplayName { get; set; } public static string PreDisplayName { get; set; } public static string NextDisplayName { get; set; } public static string LastDisplayName { get; set; } public static string TotalCountDisplayName { get; set; } public static string TotalPagesDisplayName { get; set; } /// <summary> /// 总条数 /// </summary> public static int TotalCount { get; set; } public static int TotalPages { get { return (int)Math.Ceiling(TotalCount / (double)PageSize); //return (TotalCount % PageSize == 0 ? TotalCount / PageSize : TotalCount / PageSize + 1); } } /// <summary> /// 设置分页url eg:/Admin/Product/Index /// </summary> public static string PagingUrl { get; set; } /// <summary> /// 默认page,设置分页参数名 eg:/Admin/Product/Index?PagingParamName=1 /// </summary> public static string PagingParamName { get; set; } #endregion #region Paging String /// <summary> /// MVC分页 如果用jquery分页只需要class不需要href,用以下实现: /// $(".class值").live("click", function () { /// var page = $(this).attr("pagingParamName值"); /// $("#order").html("").load("/Customer/Order?page="+page); /// });live自动给遍历增加事件 /// </summary> /// <param name="html"></param> /// <param name="htmlAttributes">new {@class="grey",pagingParamName="page",href="/Admin/Product/Index" rel="external nofollow" } pagingParamName默认page,匿名类添加控件属性</param> /// <returns></returns> public static MvcHtmlString Paging(this System.Web.Mvc.HtmlHelper html, object htmlAttributes) { RouteValueDictionary values = new RouteValueDictionary(htmlAttributes); #region 属性赋值 if (values["href"] != null) { PagingUrl = values["href"].ToString(); } if (values["pagingParamName"] != null) { PagingParamName = values["pagingParamName"].ToString(); values.Remove("pagingParamName"); } else { PagingParamName = "page"; } #endregion #region 分页最外层p/span TagBuilder builder = new TagBuilder("p");//span //创建Id,注意要先设置IdAttributeDotReplacement属性后再执行GenerateId方法. //builder.IdAttributeDotReplacement = "_"; //builder.GenerateId(id); //builder.AddCssClass(""); //builder.MergeAttributes(values); builder.InnerHtml = PagingBuilder(values); #endregion return MvcHtmlString.Create(builder.ToString(TagRenderMode.Normal));//解决直接显示html标记 } private static string PagingBuilder(RouteValueDictionary values) { #region 条件搜索时包括其他参数 StringBuilder urlParameter = new StringBuilder(); NameValueCollection collection = HttpContext.Current.Request.QueryString; string[] keys = collection.AllKeys; for (int i = 0; i < keys.Length; i++) { if (keys[i].ToLower() != "page") { urlParameter.AppendFormat("&{0}={1}", keys[i], collection[keys[i]]); } } #endregion //CurrentPage = Convert.ToInt32(HttpContext.Current.Request.QueryString["page"] ?? "0"); StringBuilder sb = new StringBuilder(); #region 分页统计 sb.AppendFormat("Total {0} Records Page {1} of {2} ", TotalCount, CurrentPage, TotalPages); #endregion #region 首页 上一页 sb.AppendFormat(TagBuilder(values, 1, " First")); //sb.AppendFormat("<a href={0}?page=1{1}>First</a> ",url,urlParameter); if (HasPreviousPage) { sb.AppendFormat(TagBuilder(values, CurrentPage - 1, " Prev ")); //sb.AppendFormat("<a href={0}?page={1}{2}>Prev</a> ", url, CurrentPage - 1, urlParameter); } #endregion #region 分页逻辑 if (TotalPages > 10) { if ((CurrentPage + 5) < TotalPages) { if (CurrentPage > 5) { for (int i = CurrentPage - 5; i <= CurrentPage + 5; i++) { sb.Append(TagBuilder(values, i, i.ToString())); } } else { for (int i = 1; i <= 10; i++) { sb.Append(TagBuilder(values, i, i.ToString())); } } sb.Append("... "); } else { for (int i = CurrentPage - 10; i <= TotalPages; i++) { sb.Append(TagBuilder(values, i, i.ToString())); } } } else { for (int i = 1; i <= TotalPages; i++) { sb.Append(" " + TagBuilder(values, i, i.ToString()) + " "); } } #endregion #region 下一页 末页 if (HasNextPage) { sb.AppendFormat(TagBuilder(values, CurrentPage + 1, "Next")); //sb.AppendFormat("<a href={0}?page={1}{2}>Next</a> ", url, CurrentPage + 1, urlParameter); } sb.AppendFormat(TagBuilder(values, TotalPages, "Last")); //sb.AppendFormat("<a href={0}?page={1}{2}>Last</a>",url,TotalPages,urlParameter); #endregion return sb.ToString(); } private static string TagBuilder(RouteValueDictionary values, int i, string innerText) { values[PagingParamName] = i; TagBuilder tag = new TagBuilder("a"); if (PagingUrl != null) { values["href"] = PagingUrl + "?" + PagingParamName + "= " + i + " "; } if (CurrentPage == i && innerText != " First" && innerText != " Last") { values["id"] = "on"; } else { tag.Attributes["id"] = ""; } tag.MergeAttributes(values); tag.SetInnerText(innerText); return tag.ToString(); } #endregion } }
Backend Controller code
// // GET: /Home/ public ActionResult Index(int? page) { page = page ?? 1; PagingHelper.CurrentPage = Convert.ToInt32(page); PagingHelper.PageSize = 20; //{获取数据集的中条数,以及分页的数据集} PagingHelper.TotalCount = 2000; return View(); }
Front page code
@{ ViewBag.Title = "Index"; } @using HtmlHelperMvc.Models; <h2>Index</h2> <hr /> <style type="text/css"> #on { color: #FFF; background-color: #337AB7; border-color: #337AB7; } .pagination a { margin-right: 3px; padding: 5px 10px; font-size: 12px; text-decoration: none; background-color: #fff; border: 1px solid #ddd; cursor: pointer; display: inline-block; border-radius: 3px; } a { color: #337ab7; text-decoration: none; } a { background-color: transparent; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } </style> <script src="~/Scripts/jquery-1.8.2.js"></script> <script type="text/javascript"> $(function () { $(".pagination .active").live("click", function () { $("#page").val($(this).attr("page")); $("#form_Submit").submit(); }); }); </script> <form id="form_Submit" action="/Home/Index" method="post"> <p class="fix"> <p class="page"> <p class="pagination pagination-sm pull-right" id="pagep" style="margin: 0px 0;"> <input type="hidden" id="page" name="page" value="@PagingHelper.CurrentPage" /> @Html.Paging(new { @class = "active" }) </p> </p> </p> </form>
Final rendering:
【Related Recommendations】
1. ASP.NET Free Video Tutorial
2. Geek Academy ASP.NET Video Tutorial
The above is the detailed content of Introduction to paging method through PagingHelper class in HtmlHelper. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



PHP development: How to implement table data sorting and paging functions In web development, processing large amounts of data is a common task. For tables that need to display a large amount of data, it is usually necessary to implement data sorting and paging functions to provide a good user experience and optimize system performance. This article will introduce how to use PHP to implement the sorting and paging functions of table data, and give specific code examples. The sorting function implements the sorting function in the table, allowing users to sort in ascending or descending order according to different fields. The following is an implementation form

CakePHP is a powerful PHP framework that provides developers with many useful tools and features. One of them is pagination, which helps us divide large amounts of data into several pages, making browsing and manipulation easier. By default, CakePHP provides some basic pagination methods, but sometimes you may need to create some custom pagination methods. This article will show you how to create custom pagination in CakePHP. Step 1: Create a custom pagination class First, we need to create a custom pagination class. this

As data continues to grow, tabular display becomes more difficult. Most of the time, the amount of data in a table is so large that it becomes slow to load and users need to constantly browse the page to find the data they want. This article will introduce how to use JavaScript to realize paginated display of table data, making it easier for users to find the data they want. 1. Dynamically create tables. In order to make the paging function more controllable, tables need to be created dynamically. In the HTML page, add a table element similar to the one below.

How to use JavaScript to implement table paging function? With the development of the Internet, more and more websites use tables to display data. In some cases where the amount of data is large, the data needs to be displayed in pages to improve user experience. This article will introduce how to use JavaScript to implement table paging function and provide specific code examples. 1. HTML structure First, we need to prepare an HTML structure to host tables and paging buttons. We can use <tab

Introduction In today's rapidly evolving digital world, it is crucial to build robust, flexible and maintainable WEB applications. The PHPmvc architecture provides an ideal solution to achieve this goal. MVC (Model-View-Controller) is a widely used design pattern that separates various aspects of an application into independent components. The foundation of MVC architecture The core principle of MVC architecture is separation of concerns: Model: encapsulates the data and business logic of the application. View: Responsible for presenting data and handling user interaction. Controller: Coordinates the interaction between models and views, manages user requests and business logic. PHPMVC Architecture The phpMVC architecture follows the traditional MVC pattern, but also introduces language-specific features. The following is PHPMVC

MyBatis is an excellent persistence layer framework. It supports database operations based on XML and annotations. It is simple and easy to use. It also provides a rich plug-in mechanism. Among them, the paging plug-in is one of the more frequently used plug-ins. This article will delve into the principles of the MyBatis paging plug-in and illustrate it with specific code examples. 1. Paging plug-in principle MyBatis itself does not provide native paging function, but you can use plug-ins to implement paging queries. The principle of paging plug-in is mainly to intercept MyBatis

How to use Layui to develop a data display page with paging function Layui is a lightweight front-end UI framework that provides simple and beautiful interface components and a rich interactive experience. During development, we often encounter situations where we need to display large amounts of data and perform paging. The following is an example of a data display page with paging function developed using Layui. First, we need to introduce Layui related files and dependencies. Add the following code to the <head> tag of the html page

Vue component practice: Introduction to paging component development In web applications, the paging function is an essential component. A good paging component should be simple and clear in presentation, rich in functions, and easy to integrate and use. In this article, we will introduce how to use the Vue.js framework to develop a highly customizable paging component. We will explain in detail how to develop using Vue components through code examples. Technology stack Vue.js2.xJavaScript (ES6) HTML5 and CSS3 development environment
