分页样式混乱

Question

我正在尝试学习MVC和引导程序。我正在尝试显示带有页面的表格。我正在关注此tutorial。  我能够显示，排序，搜索甚至进行分页。但是我的问题是样式。不知何故，样式不是我想要的。我正在使用WebPagerReplacement

所需：

实际：

<div>
        @grid.Table(
     tableStyle: "table table-striped table-hover",
     columns: grid.Columns(
         grid.Column(columnName: "FirstName", header: "First Name"),
         grid.Column(columnName: "LastName", header: "Last Name"),
         grid.Column(columnName: "EmailID", header: "Email"),
         grid.Column(columnName: "City", header: "City"),
         grid.Column(columnName: "Country", header: "Country")
            )
        )

        <div class="pagination pagination-small pagination-right">
            @grid.PagerList(mode: WebGridPagerModes.All)
        </div>

        @Html.Hidden("dir", grid.SortDirection)
        @Html.Hidden("col", grid.SortColumn)
    </div>

我知道这很简单。但是我不确定为什么会发生这种情况以及如何解决它。请帮助我

Answer 1

您可以尝试在<div>扩展方法中使用paginationStyle参数，而不是将整个分页类填充到单个WebGridExtensions.PagerList元素中：

<div>
    @grid.PagerList(mode: WebGridPagerModes.All, 
                    paginationStyle: "pagination pagination-small pagination-right")
</div>

上面使用参数的原因是存在TagBuilder.AddCssClass()方法，该方法将为与页面超链接相关的呈现的<ul>元素添加Bootstrap分页类：

var ul = new TagBuilder("ul");
ul.AddCssClass(paginationStyle);

如果将这些类放在外部<div>中而不是paginationStyle参数中，则分页类不会应用于分页<ul>元素中，因此所有分页文本和页码都将呈现为标准超链接。