ASP.NET MVC4是一种Web应用程序框架，它提供了一种模型-视图-控制器（MVC）的架构模式，用于构建可扩展的Web应用程序。在ASP.NET MVC4中，HtmlHelper是一个非常有用的类，它提供了许多有用的方法，例如生成HTML标记、表单、分页等。在本文中，我们将介绍如何使用HtmlHelper扩展类来实现分页功能。
步骤一：创建HtmlHelper扩展类
首先，我们需要创建一个名为PagingHelper的HtmlHelper扩展类。在该类中，我们将定义一个名为Paging的方法，该方法将用于生成分页HTML标记。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MyProject.Helpers
{
public static class PagingHelper
{
public static MvcHtmlString Paging(this HtmlHelper html, int currentPage, int totalPages, Func<int, string> pageUrl)
{
var builder = new TagBuilder("div");
builder.AddCssClass("pagination");
var ul = new TagBuilder("ul");
for (int i = 1; i <= totalPages; i++)
{
var li = new TagBuilder("li");
if (i == currentPage)
{
li.AddCssClass("active");
}
var a = new TagBuilder("a");
a.MergeAttribute("href", pageUrl(i));
a.InnerHtml = i.ToString();
li.InnerHtml = a.ToString();
ul.InnerHtml += li.ToString();
}
builder.InnerHtml = ul.ToString();
return MvcHtmlString.Create(builder.ToString());
}
}
}
在上面的代码中，我们定义了一个名为Paging的方法，该方法接受三个参数：
currentPage：当前页码。totalPages：总页数。pageUrl：一个委托，用于生成每个页码的URL。
在该方法中，我们使用TagBuilder类来生成HTML标记。我们首先创建一个div元素，并将其添加到一个名为pagination的CSS类中。然后，我们创建一个ul元素，并使用一个循环来生成每个页码的li元素。如果当前页码等于循环变量i，则我们将li元素添加到一个名为active的CSS类中。最后，我们创建一个a元素，并将其添加到li元素中。我们使用pageUrl委托来生成每个页码的URL。最后，我们将所有的HTML标记添加到div元素中，并返回一个MvcHtmlString对象。
步骤二：使用HtmlHelper扩展类
在我们创建了PagingHelper类之后，我们可以在视图中使用Paging方法来生成分页HTML标记。以下是一个示例视图，用于演示如何使用Paging方法：
@using MyProject.Helpers
@{
ViewBag.Title = "My Page";
}
<h2>My Page</h2>
<div>
@Html.Paging(2, 10, i => Url.Action("Index", new { page = i }))
</div>
在上面的代码中，我们首先使用@using指令导入MyProject.Helpers命名空间，以便我们可以在视图中使用Paging方法。然后，我们使用@Html.Paging语法来调用Paging方法，并传递当前页码、总页数和一个委托，该委托用于生成每个页码的URL。在本例中，我们使用Url.Action方法来生成URL，该方法将调用名为Index的控制器方法，并传递一个名为page的参数。
示例一：使用Bootstrap样式
如果您正在使用Bootstrap样式，您可以使用以下代码来修改PagingHelper类，以便生成Bootstrap样式的分页HTML标记：
public static MvcHtmlString Paging(this HtmlHelper html, int currentPage, int totalPages, Func<int, string> pageUrl)
{
var builder = new TagBuilder("div");
builder.AddCssClass("pagination");
var ul = new TagBuilder("ul");
if (currentPage == 1)
{
ul.InnerHtml += "<li class=\"disabled\"><span>«</span></li>";
}
else
{
var li = new TagBuilder("li");
var a = new TagBuilder("a");
a.MergeAttribute("href", pageUrl(currentPage - 1));
a.InnerHtml = "«";
li.InnerHtml = a.ToString();
ul.InnerHtml += li.ToString();
}
for (int i = 1; i <= totalPages; i++)
{
var li = new TagBuilder("li");
if (i == currentPage)
{
li.AddCssClass("active");
}
var a = new TagBuilder("a");
a.MergeAttribute("href", pageUrl(i));
a.InnerHtml = i.ToString();
li.InnerHtml = a.ToString();
ul.InnerHtml += li.ToString();
}
if (currentPage == totalPages)
{
ul.InnerHtml += "<li class=\"disabled\"><span>»</span></li>";
}
else
{
var li = new TagBuilder("li");
var a = new TagBuilder("a");
a.MergeAttribute("href", pageUrl(currentPage + 1));
a.InnerHtml = "»";
li.InnerHtml = a.ToString();
ul.InnerHtml += li.ToString();
}
builder.InnerHtml = ul.ToString();
return MvcHtmlString.Create(builder.ToString());
}
在上面的代码中，我们修改了PagingHelper类，以便生成Bootstrap样式的分页HTML标记。我们首先检查当前页码是否等于1，如果是，则我们将«添加到一个名为disabled的CSS类中。否则，我们将«添加到一个a元素中，并将其添加到一个名为previous的CSS类中。我们使用pageUrl委托来生成前一页的URL。
然后，我们使用一个循环来生成每个页码的li元素，与之前的示例相同。如果当前页码等于循环变量i，则我们将li元素添加到一个名为active的CSS类中。最后，我们检查当前页码是否等于总页数，如果是，则我们将»添加到一个名为disabled的CSS类中。否则，我们将»添加到一个a元素中，并将其添加到一个名为next的CSS类中。我们使用pageUrl委托来生成下一页的URL。
示例二：使用Ajax
如果您想要使用Ajax来实现分页，您可以使用以下代码来修改PagingHelper类，以便生成Ajax分页HTML标记：
public static MvcHtmlString Paging(this HtmlHelper html, int currentPage, int totalPages, Func<int, string> pageUrl, string updateTargetId)
{
var builder = new TagBuilder("div");
builder.AddCssClass("pagination");
var ul = new TagBuilder("ul");
if (currentPage == 1)
{
ul.InnerHtml += "<li class=\"disabled\"><span>«</span></li>";
}
else
{
var li = new TagBuilder("li");
var a = new TagBuilder("a");
a.MergeAttribute("href", "#");
a.MergeAttribute("data-page", (currentPage - 1).ToString());
a.InnerHtml = "«";
li.InnerHtml = a.ToString();
ul.InnerHtml += li.ToString();
}
for (int i = 1; i <= totalPages; i++)
{
var li = new TagBuilder("li");
if (i == currentPage)
{
li.AddCssClass("active");
}
var a = new TagBuilder("a");
a.MergeAttribute("href", "#");
a.MergeAttribute("data-page", i.ToString());
a.InnerHtml = i.ToString();
li.InnerHtml = a.ToString();
ul.InnerHtml += li.ToString();
}
if (currentPage == totalPages)
{
ul.InnerHtml += "<li class=\"disabled\"><span>»</span></li>";
}
else
{
var li = new TagBuilder("li");
var a = new TagBuilder("a");
a.MergeAttribute("href", "#");
a.MergeAttribute("data-page", (currentPage + 1).ToString());
a.InnerHtml = "»";
li.InnerHtml = a.ToString();
ul.InnerHtml += li.ToString();
}
builder.InnerHtml = ul.ToString();
var script = new TagBuilder("script");
script.InnerHtml = @"
<script>
$(function () {
$('." + builder.Attributes["class"] + @" a').click(function (e) {
e.preventDefault();
var page = $(this).data('page');
$.get('" + pageUrl(0) + @"' + page, function (data) {
$('#" + updateTargetId + @"').html(data);
});
});
});
</script>
";
builder.InnerHtml += script.ToString();
return MvcHtmlString.Create(builder.ToString());
}
在上面的代码中，我们修改了PagingHelper类，以便生成Ajax分页HTML标记。我们添加了一个名为updateTargetId的新参数，该参数用于指定应该更新的HTML元素的ID。我们使用TagBuilder类来生成HTML标记，与之前的示例相同。
然后，我们添加了一个名为script的新标记，该标记包含一个JavaScript函数，该函数将在用户单击页码时执行。该函数使用jQuery的$.get方法来获取指定页码的HTML内容，并将其添加到指定的HTML元素中。我们使用pageUrl委托来生成每个页码的URL。最后，我们将script标记添加到div元素中，并返回一个MvcHtmlString对象。
结论
通过本文的教程，您应该已经了解了如何使用HtmlHelper扩展类来实现分页功能。我们提供了两个示例，分别用于生成Bootstrap样式的分页HTML标记和Ajax分页HTML标记。请记住，HtmlHelper扩展类是一种非常有用的技术，它可以帮助您更轻松地生成HTML标记和表单。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：ASP.NET MVC4 HtmlHelper扩展类，实现分页功能 - Python技术站
微信扫一扫 
支付宝扫一扫 