asp.net mvc自定义pager封装与优化

一、概述

在ASP.NET MVC中，使用分页是很常见的需求，我们需要对于分页控件的封装进行深入地研究，以达到更加灵活、高效、易用、可扩展等目的。本文对于ASP.NET MVC分页控件的封装进行了详细的讲解，包括控件的基本构建、参数的设置、数据的处理等，希望对于读者的学习和实践有所帮助。

二、基本构建

我们首先需要定义一个Pager控件，该控件包括以下几个元素：

• 当前页码CurrentPage
• 总页数TotalPages
• 显示页码Links
• 分页链接URL

如下代码所示：

public class Pager
{
     public int CurrentPage { get; set; }
     public int TotalPages { get; set; }
     public List<int> Links { get; set; }
     public string Url { get; set; }
}

三、参数设置

我们需要通过参数来设置Pager控件的各个属性，包括：

• 当前页码CurrentPage
• 总页数TotalPages
• 分页链接URL
• 显示页码的数量LinkCount

如下代码所示：

public static class PagerHelper
{
    public static MvcHtmlString Pager(this HtmlHelper html, int currentPage, int totalPages, string url, int linkCount = 10)
    {
        var pager = new Pager
        {
            CurrentPage = currentPage,
            TotalPages = totalPages,
            Url = url,
            Links = new List<int>()
        };

        // Add links to Pager object
        for (var i = 1; i <= pager.TotalPages; i++)
        {
            pager.Links.Add(i);
        }

        return html.Partial("_Pager", pager);
    }

四、数据处理

我们需要定义一个分页控件的部分视图，用于在页面上显示分页控件，如下代码所示：

@model Pager

@if (Model.TotalPages > 1)
{
    <div class="pagination">
        <ul>
            <li>@Html.ActionLink("<<", "Index", new { page = 1 })</li>

            @foreach (var link in Model.Links)
            {
                if (link == Model.CurrentPage)
                {
                    <li class="active">@link</li>
                }
                else
                {
                    <li>@Html.ActionLink(link.ToString(), "Index", new { page = link })</li>
                }
            }

            <li>@Html.ActionLink(">>", "Index", new { page = Model.TotalPages })</li>
        </ul>
    </div>
}

在该视图中，我们需要先判断总页数是否大于1，如果大于1才需要显示分页控件。接着，我们通过遍历Pager.Links属性来显示分页链接，如果当前页码等于链接页码，则说明当前页应该被标记为active类，否则就正常显示链接。

五、示例说明

下面是两个实际应用分页控件的例子，以供读者参考。

1. 分页控件的初始化

我们可以将分页控件的初始化代码封装到一个独立的分页帮助器类中，这样可以方便代码复用。如下代码所示：

public static class PagingHelper
{
    public static Pager Pager(this HtmlHelper html, int currentPage, int totalPages, string url, int linkCount = 10)
    {
        var pager = new Pager
        {
            CurrentPage = currentPage,
            TotalPages = totalPages,
            Url = url,
            Links = new List<int>()
        };

        // Add links to Pager object
        for (var i = 1; i <= pager.TotalPages; i++)
        {
            pager.Links.Add(i);
        }

        return pager;
    }
}

通过这个帮助器类，我们可以在视图中方便地使用分页控件，如下代码所示：

@{        
    var pager = Html.Pager(Model.CurrentPage, Model.TotalPages, Url.Action("Index"));
}

@Html.Partial("_Pager", pager)

在这个例子中，我们首先通过PagingHelper.Pager方法获取了一个Pager对象，并将其传递给了视图Pager的部分视图中。

1. 控件样式的设置

我们可以通过利用Bootstrap框架来设置分页控件的样式，如下代码所示：

@if (Model.TotalPages > 1)
{
    <nav>
        <ul class="pagination">
            <li>
                @if (Model.CurrentPage > 1)
                {
                    @Html.ActionLink("<<", "Index", new { page = 1 })
                }
                else
                {
                    <span><<</span>
                }
            </li>

            @foreach (var link in Model.Links)
            {
                if (link == Model.CurrentPage)
                {
                    <li class="active"><a>@link</a></li>
                }
                else
                {
                    <li><a href="@string.Format(Model.Url, link)">@link</a></li>
                }
            }

            <li>
                @if (Model.CurrentPage < Model.TotalPages)
                {
                    @Html.ActionLink(">>", "Index", new { page = Model.TotalPages })
                }
                else
                {
                    <span>>></span>
                }
            </li>
        </ul>
    </nav>
}

在这个例子中，我们利用了Bootstrap框架来设置分页控件的样式，其中.pagination类用于指定样式表，

和

标签用于构建DOM结构，
• 标签用于包含链接，通过C#中的三元运算符来判断当前页码是否位于链接的开始或结束位置，如果是就将html.ActionLink替换为一个静态元素，通过CSHTML中的string.Format方法将链接中的“{0}”替换为链接页码。

  六、总结

  本文中我们对于ASP.NET MVC中自定义Pager的控件进行了详细的讲解，包括基本构建、参数设置、数据处理等方面，也给出了两个实际的应用示例。希望这篇文章能够对于读者有所帮助，在实际应用中了解和运用不同的技术方法来达到优化网站性能、提高用户体验的目的。