MVC HtmlHelper扩展类(PagingHelper)实现分页功能

下面就为你详细介绍如何使用MVC HtmlHelper扩展类(PagingHelper)实现分页功能。

1. 什么是MVC HtmlHelper扩展类

在MVC开发中，HtmlHelper是负责生成HTML标签的对象，它可以帮助我们快速地生成表单、文本框、下拉框等HTML控件。而MVC HtmlHelper扩展类则是对HtmlHelper进行扩展，使其能够完成更加复杂的任务，比如实现分页、生成统一的表格等。

2. 实现步骤

2.1 定义PagingHelper类

我们首先需要定义一个名为PagingHelper的HtmlHelper扩展类，用于生成分页相关的HTML标记。代码示例如下：

public static class PagingHelper
{
    public static MvcHtmlString Pager(this HtmlHelper htmlHelper, int currentPage, int totalPages, string pageAction, int pageShowCount = 5, string cssClassName = "pagination")
    {
        var pageBuilder = new StringBuilder();
        var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
        pageBuilder.AppendFormat("<ul class='{0}'>", cssClassName);

        //生成首页链接
        var firstPage = $"<li><a href='{urlHelper.Action(pageAction, new { page = 1 })}'>首页</a></li>";
        pageBuilder.Append(firstPage);

        //生成上一页链接
        if (currentPage > 1)
        {
            var prevPage = $"<li><a href='{urlHelper.Action(pageAction, new { page = currentPage - 1 })}'>上一页</a></li>";
            pageBuilder.Append(prevPage);
        }

        //生成中间页码链接
        for (var i = 1; i <= totalPages; i++)
        {
            if (i <= currentPage + pageShowCount / 2 && i >= currentPage - pageShowCount / 2)
            {
                var pageLink = string.Empty;
                if (i == currentPage)
                {
                    pageLink = $"<li class='active'><a href='#'>{i}</a></li>";
                }
                else
                {
                    pageLink = $"<li><a href='{urlHelper.Action(pageAction, new { page = i })}'>{i}</a></li>";
                }

                pageBuilder.Append(pageLink);
            }
        }

        //生成下一页链接
        if (currentPage < totalPages)
        {
            var nextPage = $"<li><a href='{urlHelper.Action(pageAction, new { page = currentPage + 1 })}'>下一页</a></li>";
            pageBuilder.Append(nextPage);
        }

        //生成末页链接
        var lastPage = $"<li><a href='{urlHelper.Action(pageAction, new { page = totalPages })}'>末页</a></li>";
        pageBuilder.Append(lastPage);

        pageBuilder.Append("</ul>");

        return MvcHtmlString.Create(pageBuilder.ToString());
    }
}

以上代码定义了一个名为Pager的扩展方法，它会根据传入的参数生成分页相关的HTML标记。其中currentPage表示当前页码，totalPages表示总页数，pageAction表示分页的Action名称，pageShowCount表示最多显示页码数，cssClassName表示分页的样式。

2.2 在视图中使用PagingHelper

在视图中使用PagingHelper非常简单，只需通过Html.Pager方法调用即可，如下所示：

@Html.Pager(Model.CurrentPage, Model.TotalPages, "Index", 5, "pagination")

以上代码调用了Pager方法，生成了一个名为pagination的分页样式，最多显示5个页码，跳转到名为Index的分页Action。

3. 示例说明

示例1

首先，我们需要在MVC项目中创建一个名为Test的控制器，在Index方法中创建一些用于测试的数据，如下所示：

public ActionResult Index(int page = 1)
{
    const int pageSize = 10;
    var totalCount = 100;

    var startIndex = (page - 1) * pageSize;
    var endIndex = startIndex + pageSize - 1;

    if (endIndex >= totalCount)
    {
        endIndex = totalCount - 1;
    }

    var items = Enumerable.Range(startIndex, endIndex - startIndex + 1);

    var model = new TestViewModel
    {
        Items = items,
        TotalCount = totalCount,
        CurrentPage = page,
        TotalPages = (int)Math.Ceiling((double)totalCount / pageSize)
    };

    return View(model);
}

接着，在Index视图中调用Pager方法生成分页控件：

@model TestViewModel

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<table class="table">
    <thead>
        <tr>
            <th>ID</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Items)
        {
            <tr>
                <td>@item</td>
            </tr>
        }
    </tbody>
</table>

@Html.Pager(Model.CurrentPage, Model.TotalPages, "Index", 5, "pagination")

以上代码生成一个表格，并在下方生成一个名为pagination的分页控件。

示例2

接下来，我们可以对分页控件的样式进行自定义。我们可以在~/Content/site.css中添加如下样式：

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}

.pagination > li {
    display: inline;
}

.pagination > li > a {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}

.pagination > li:first-child > a {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.pagination > li:last-child > a {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.pagination > .active > a {
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
}

.pagination > .active > a:hover {
    color: #fff;
    background-color: #286090;
    border-color: #204d74;
}

.pagination > li > a:hover,
.pagination > li > a:focus {
    background-color: #eee;
}

以上样式定义了分页控件的样式，包括颜色、边框、圆角等等。后面的代码则通过调用Pager方法并传入样式名称生成分页控件：

@Html.Pager(Model.CurrentPage, Model.TotalPages, "Index", 5, "pagination custom-paging")

通过以上方法，我们可以实现一个符合自己需求的、美观的分页控件。

这就是使用MVC HtmlHelper扩展类(PagingHelper)实现分页功能的攻略。