MvcPager分页控件 适用于Bootstrap

MvcPager分页控件 适用于Bootstrap

MvcPager是一款流行的ASP.NET MVC分页控件，它可以帮助我们快速为我们的Web应用添加分页功能。除了基本的分页功能以外，MvcPager还支持很多高级功能，比如自定义样式、 AJAX异步分页、搜索等等。本篇文章将会讲解如何使用 MvcPager 分页控件，并且针对于 Bootstrap 框架进行样式调整。

安装 MvcPager

在使用 MvcPager 分页控件之前，我们需要先安装 MvcPager 库。我们可以在NuGet Package Manager工具栏中搜索 “MvcPager” ，然后安装 MvcPager 库。

MvcPager使用

1. 在 View 中引入 MvcPager 的命名空间

@using MvcPager.WebControls

1. 在你需要添加分页的页面中使用 MvcPager 控件

@Html.Pager(Model, 
            PageSize: 10, 
            PageIndexParameterName: "page",
            PagerOptions: PagerOptions.BootstrapPager)

上面的代码中， Model 代表你要分页的数据列表。PageSize 代表每页显示多少数据。PageIndexParameterName 代表传递页码的参数名称。我们在控制器中获取页码的时候，需要使用这个参数名称。比如

int pageIndex = int.Parse(Request.QueryString["page"] ?? "1");

PagerOptions 是 MvcPager 提供的分页选项。PagerOptions.BootstrapPager 是一个针对 Bootstrap 框架的选项，它会为分页控件添加 Bootstrap 的样式。

1. 在 CSS 样式表中添加分页控件样式

.pager{
    margin: 0;
}

.pager>li>a, .pager>li>span{
    background-color: transparent;
    border: none;
    color: #333;
    margin-left:5px;
    margin-right:5px;
    line-height:1.5;
}

.pager>li>a:focus, .pager>li>a:hover, .pager>li>span:focus, .pager>li>span:hover{
    background-color: #eee;
    border: none;
    color: #333;
}

示例1：在Blog网站中的分页应用

1. 在 Blog 的 Index.cshtml 页面中，添加下面的代码

@Html.Pager(Model.Posts, 
            PageSize: 10, 
            PageIndexParameterName: "page",
            PagerOptions: PagerOptions.BootstrapPager)

1. 在 ~/Content/site.css 中添加下面的 CSS 样式代码

.pager{
    margin: 0;
}

.pager>li>a, .pager>li>span{
    background-color: transparent;
    border: none;
    color: #333;
    margin-left:5px;
    margin-right:5px;
    line-height:1.5;
}

.pager>li>a:focus, .pager>li>a:hover, .pager>li>span:focus, .pager>li>span:hover{
    background-color: #eee;
    border: none;
    color: #333;
}

这个例子中，我们为我们的Blog网站添加了分页功能，并且为这个分页添加了Bootstrap样式。根据我们的页面，每页显示10篇文章。

示例2：自定义分页样式

如果你不想使用给定的分页样式，你可以使用Bootstrap提供的LESS变量来重写样式。下面是一个重写分页样式的例子。

1. 在给定的LESS文件中添加你的样式代码

// Customize the pagination component
// -------------------------
@pager-margin-bottom: 0; // Eliminate the default bottom margin
@pager-border-radius: 0px; // 0 radius everywhere
@pager-active-color-bg: $brand-primary; // Active color bg
@pager-active-color-border: $brand-primary; // Active color border

.pager {
    .border+li {
        margin-left: 0; // Remove the left margin from the first LI so borders aren't doubled
    }
    li.previous > a,
    li.next > a {
        border-radius: @pager-border-radius;
    }
    > li > a,
    > li > span {
        background-color: transparent;
        border: none;
        border-radius: @pager-border-radius;
        color: @text-color;
        &:focus,
        &:hover {
            background-color: $background-color-base;
            border-color: $border-color-base;
        }
    }
    > .active > a,
    > .active > span,
    > .active > a:focus,
    > .active > span:focus,
    > .active > a:hover,
    > .active > span:hover {
        background-color: @pager-active-color-bg;
        border-color: @pager-active-color-border;
        color: #fff;
    }
}

1. 在你的 Razor View 中使用自定义分页样式

@Html.Pager(Model.Posts, 
            PageSize: 10, 
            PageIndexParameterName: "page",
            PagerOptions: new PagerOptions
            {
                AutoHide = true,
                ContainerTagName = "nav",
                CssClass = "custom-pagination",
                PrevPageText = "<",
                NextPageText = ">",
                ShowDisabledPagerItems = false,
                ShowPageIndexBox = false,
                ShowGoButton = true,
                GoButtonText = "Go"
            })

在上面的代码中，我们实例化一个 PagerOptions 对象，并给它赋予一些自定义的属性。其中，我们将 CssClass 设置为 "custom-pagination"，这样我们就能将 CSS 样式与分页控件关联在一起了。在样式表中添加下面的代码

.custom-pagination {
    margin: 0;
    display: table;
    table-layout: fixed;
    width: 100%;
    text-align: center;
}

.custom-pagination a, .custom-pagination span {
    background-color: @background-color-base;
    border-color: @border-color-base;
    color: @text-color;
    border-radius: 0;
    display: table-cell;
    vertical-align: middle;
    padding: 6px 12px;
}

.custom-pagination .active a, .custom-pagination .active span {
    color: @brand-primary;
    background-color: #fff;
    border: none;
}

.custom-pagination


.custom-pagination .disabled a, .custom-pagination span.disabled a, .custom-pagination .disabled span, .custom-pagination li.disabled a, .custom-pagination li.disabled span {
    color: @gray-light;
}

.custom-pagination .disabled a:focus, .custom-pagination .disabled a:hover, .custom-pagination span.disabled a:focus, .custom-pagination span.disabled a:hover, .custom-pagination .disabled span:focus, .custom-pagination .disabled span:hover {
    color: @gray-light;
    background-color: @background-color-base;
    border-color: @border-color-base;
}

在本例中，我们使用了一个新的属性，即 ShowGoButton。这是一个 bool 类型的属性，如果设置为 true，会在分页控件底部添加一个 “Go” 按钮。用户可以在这个按钮旁边输入页码，然后点击该按钮，分页控件就会跳转到相关的页面了。

通过这个例子，你可以看出来，MvcPager分页控件为我们提供了非常灵活的方式来自定义样式，让我们可以更好地适配我们的Web应用。