ASP.NET MVC4 HtmlHelper扩展类，实现分页功能

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>&laquo;</span></li>";
    }
    else
    {
        var li = new TagBuilder("li");
        var a = new TagBuilder("a");
        a.MergeAttribute("href", pageUrl(currentPage - 1));
        a.InnerHtml = "&laquo;";
        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>&raquo;</span></li>";
    }
    else
    {
        var li = new TagBuilder("li");
        var a = new TagBuilder("a");
        a.MergeAttribute("href", pageUrl(currentPage + 1));
        a.InnerHtml = "&raquo;";
        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>&laquo;</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 = "&laquo;";
        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>&raquo;</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 = "&raquo;";
        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技术站

ASP.NET MVC4 HtmlHelper扩展类，实现分页功能

步骤一：创建HtmlHelper扩展类

步骤二：使用HtmlHelper扩展类

示例一：使用Bootstrap样式

示例二：使用Ajax

结论

相关文章