欢迎大家来到IT世界,在知识的湖畔探索吧!
在本文中,让我们尝试构建自定义 HTML Hepler以在 .NET Core MVC 应用程序中提供分页。首先对不熟悉的人简单介绍一下,什么是HTML Helper(助手):
- HTML 助手使开发人员可以轻松快速地创建 HTML 页面。
- 在大多数情况下,HTML 助手只是一个返回字符串的方法。
- MVC 带有内置的 HTML 帮助器,例如 @Html.TextBox()、@Html.CheckBox()、@Html.Label 等。
- HTML 助手在 razor 视图中呈现 html 控件。例如,@Html.TextBox() 渲染 <input type=”textbox”> 控件,@Html.CheckBox() 渲染 <input type=”checkbox”> 控件等。
需求
在Web应用程序中,如果要显示大量记录,则需要提供分页。在本文中,我们通过创建自定义 HTML Helper 在 .NET Core MVC 应用程序中实现分页。为了简单起见,我们只能使用数字来表示数据。
假设我们需要在多页中显示 55 条记录,每页有 10 个项目,如上所示。
开始
打开 Visual Studio 2019 > 创建 .NET Core MVC 应用程序,如下所示。
项目命名为 HTMLHelpersApp。
选择 .NET 框架版本。
创建所需的模型和帮助文件。
- 创建一个新模型“Number”。
- 右键单击 Model 文件夹并添加“Number”类。
在 Number.cs 中添加代码。该模型捕获用户输入。它只有一个属性:“InputNumber”。
using System;
using System.ComponentModel.DataAnnotations;
namespace HTMLHelpersApp.Models
{
public class Number
{
//validation for required, only numbers, allowed range-1 to 500
[Required(ErrorMessage = "Value is Required!. Please enter value between 1 and 500.")]
[RegularExpression(@"^\d+#34;, ErrorMessage = "Only numbers are allowed. Please enter value between 1 and 500.")]
[Range(1, 500, ErrorMessage = "Please enter value between 1 and 500.")]
public int InputNumber = 1;
}
}
欢迎大家来到IT世界,在知识的湖畔探索吧!
现在让我们添加一个公共类 PageInfo.cs。创建新文件夹 Common 并添加 PageInfo.cs 类。
- 右键单击项目文件夹并添加一个新文件夹。
在 PageInfo.cs 中添加代码:
- Page Start 表示当前页面上的第一项。
- Page End 表示当前页面的最后一项。
- 每页项目数表示要在页面上显示的项目数。
- Last Page 表示页数/最后页码。
- Total Items 表示项目的总数。
根据总项目数和每页项目数,计算页面的总页数、第一个项目和最后一个项目。
欢迎大家来到IT世界,在知识的湖畔探索吧!using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace HTMLHelpersApp.Common
{
public class PageInfo
{
public int TotalItems { get; set; }
public int ItemsPerPage { get; set; }
public int CurrentPage { get; set; }
public PageInfo()
{
CurrentPage = 1;
}
//starting item number in the page
public int PageStart
{
get { return ((CurrentPage - 1) * ItemsPerPage + 1); }
}
//last item number in the page
public int PageEnd
{
get
{
int currentTotal = (CurrentPage - 1) * ItemsPerPage + ItemsPerPage;
return (currentTotal < TotalItems ? currentTotal : TotalItems);
}
}
public int LastPage
{
get { return (int)Math.Ceiling((decimal)TotalItems / ItemsPerPage); }
}
}
}
现在我们来到最重要的部分:创建自定义 HTML 助手。
- 创建自定义 HTML 帮助程序 PageLinks,它呈现页码、上一个和下一个链接。
- 在“Common”文件夹中添加一个新类“PagingHtmlHelpers.cs”。
- 在“PagingHtmlHelpers.cs”中添加代码。
- 扩展 HtmlHelper 并添加新功能以添加页面链接。
public static IHtmlContent PageLinks(this IHtmlHelper htmlHelper, PageInfo pageInfo, Func<int, string> PageUrl)
5.取2个参数
- pageInfo:添加页码
- 委托给函数:将整数和字符串作为参数添加控制器操作方法中所需的参数
使用标签构建器创建锚标签。
欢迎大家来到IT世界,在知识的湖畔探索吧!TagBuilder tag = new TagBuilder("a");
Add attributes
tag.MergeAttribute("href", hrefValue);
tag.InnerHtml.Append(" "+ innerHtml + " ");
样式也可以用作属性。
using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Mvc.Rendering;
using System;
using System.Text;
namespace HTMLHelpersApp.Common
{
public static class PagingHtmlHelpers
{
public static IHtmlContent PageLinks(this IHtmlHelper htmlHelper, PageInfo pageInfo, Func<int, string> PageUrl)
{
StringBuilder pagingTags = new StringBuilder();
//Prev Page
if (pageInfo.CurrentPage > 1)
{
pagingTags.Append(GetTagString("Prev", PageUrl(pageInfo.CurrentPage - 1)));
}
//Page Numbers
for (int i = 1; i <= pageInfo.LastPage; i++)
{
pagingTags.Append(GetTagString(i.ToString(), PageUrl(i)));
}
//Next Page
if (pageInfo.CurrentPage < pageInfo.LastPage)
{
pagingTags.Append(GetTagString("Next", PageUrl(pageInfo.CurrentPage + 1)));
}
//paging tags
return new HtmlString(pagingTags.ToString());
}
private static string GetTagString(string innerHtml, string hrefValue)
{
TagBuilder tag = new TagBuilder("a"); // Construct an <a> tag
tag.MergeAttribute("class","anchorstyle");
tag.MergeAttribute("href", hrefValue);
tag.InnerHtml.Append(" "+ innerHtml + " ");
using (var sw = new System.IO.StringWriter())
{
tag.WriteTo(sw, System.Text.Encodings.Web.HtmlEncoder.Default);
return sw.ToString();
}
}
}
}
在“Models”文件夹中添加一个新类“ShowPaging.cs”。
- DisplayResult将在每一页上显示数字列表。
- PageInfo将捕获所有页面详细信息,例如每页上的页数、总项目、开始项目和最后一个项目等。
using HTMLHelpersApp.Common;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
namespace HTMLHelpersApp.Models
{
public class ShowPaging
{
//validation for required, only numbers, allowed range-1 to 500
[Required(ErrorMessage = "Value is Required!. Please enter value between 1 and 500.")]
[RegularExpression(@"^\d+#34;, ErrorMessage = "Only positive numbers are allowed. Please enter value between 1 and 500.")]
[Range(1, 500, ErrorMessage = "Please enter value between 1 and 500.")]
public int InputNumber { get; set; }
public List<string> DisplayResult { get; set; }
public PageInfo PageInfo;
}
}
添加新控制器
添加一个新控制器:“HTMLHelperController”
右键单击控制器文件夹并在上下文菜单中选择控制器。
选择“MVCController-Empty”。
在“HTMLHelperController”中添加代码。
using HTMLHelpersApp.Common;
using HTMLHelpersApp.Models;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
namespace HTMLHelpersApp.Controllers
{
public class HTMLHelperController : Controller
{
private const int PAGE_SIZE = 10;
public IActionResult Number()
{
return View();
}
public IActionResult ShowPaging(ShowPaging model, int page = 1, int inputNumber = 1)
{
if (ModelState.IsValid)
{
var displayResult = new List<string>();
string message;
//set model.pageinfo
model.PageInfo = new PageInfo();
model.PageInfo.CurrentPage = page;
model.PageInfo.ItemsPerPage = PAGE_SIZE;
model.PageInfo.TotalItems = inputNumber;
//Set model.displayresult - numbers list
for (int count = model.PageInfo.PageStart; count <= model.PageInfo.PageEnd; count++)
{
message = count.ToString();
displayResult.Add(message.Trim());
}
model.DisplayResult = displayResult;
}
//return view model
return View(model);
}
}
}
在 Views 文件夹中创建一个新文件夹“HTMLHelper”,并创建一个新视图“Number.cshtml”。
在“Number.cshtml”中添加代码。
@model HTMLHelpersApp.Models.Number
<h4>Number</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="ShowPaging" method="get">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<input asp-for="InputNumber" class="form-control"/>
</div>
<div class="form-group">
<input type="submit" value="Submit" class="btn btn-primary" />
</div>
</form>
</div>
</div>
同样,创建一个新视图“ShowPaging.cshtml”。
@model HTMLHelpersApp.Models.ShowPaging
@using HTMLHelpersApp.Common
<link rel="stylesheet" href ="~/css/anchorstyles.css"/>
<form>
<h4>Show Paging</h4>
<hr />
<div asp-validation-summary="All" class="text-danger"></div>
<dl class="row">
<dt class="col-sm-2">
<b>Number: </b> @Html.DisplayFor(model => model.InputNumber)
</dt>
<dd>
<a asp-action="Number">Change Number</a>
</dd>
</dl>
<div>
@if (Model != null && Model.DisplayResult != null)
{
<ul>
@foreach (var item in Model.DisplayResult)
{
<li>@Html.Raw(item)</li>
}
</ul>
<div>
@Html.PageLinks(@Model.PageInfo, x => Url.Action("ShowPaging",
new { page = x.ToString(), inputNumber = @Model.InputNumber }))
</div>
}
</div>
</form>
解决方案资源管理器如下所示:
在“startup.cs”中配置默认控制器和操作。
编译并运行应用程序,输入数字 35。
点击提交。
你会在底部看到分页,每页显示10个数字,一共4页,且每页都一个链接。
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/18485.html