c# - 分页样式搞砸了

Question

我正在尝试学习 MVC 和引导程序。我正在尝试显示带有页面的表格。我正在关注本教程。我能够显示、排序、搜索，甚至能够分页。但我的问题是样式。不知何故，造型不像我想要的那样。我正在使用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>

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

标签： c#asp.net-mvctwitter-bootstraprazorvisual-studio-2017

Answer 1

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

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

上述参数使用背后的原因是存在方法，该方法将为与分页超链接相关的渲染元素TagBuilder.AddCssClass()添加引导分页类：<ul>

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

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