c# - ASP.NET MVC4 WebGrid如何显示WebGrid中的所有页面

Question

我将一个有 1000 行的模型传递给 WebGrid。我需要每页显示 40 个。所以会有25页。然而，WebGrid 只显示前五个链接，并在我选择最后一个链接时再显示 2 个链接，这有点痛苦。

如何让 WebGrid 显示所有页面？

Answer 1

找到了我问题的部分答案。

@grid.GetHtml(
    mode: WebGridPagerModes.All,
    firstText: "<< First",
    previousText: "< Prev",
    nextText: "Next >",
    lastText: "Last >>",
...

Answer 2

您可以在 getHtml numericLinksCount: 25中使用，此设置将在页脚中以滑动编号显示 25 个页码。

@grid.GetHtml(
                        mode: WebGridPagerModes.All,
                        numericLinksCount: 10,
                        firstText: "<< First",
                        previousText: "< Prev",
                        nextText: " Next >",
                        lastText: "Last >>",
                        tableStyle: "webgrid-table",
                        headerStyle: "webgrid-header",
                        footerStyle: "table-pager",
                        alternatingRowStyle: "webgrid-alternating-row",
                        rowStyle: "webgrid-row-style", columns: grid.Columns(
                            gridColumns.ToArray()
                            ));

Answer 3

这也可以通过手动处理 webgrid 分页来完成。通过使用int count = grid.PageCount获取总页数，您可以显示所有页码并使用简单循环使它们成为超链接 例如

@{var grid = new WebGrid(source: [MODEL], defaultSort: "[COLNAME]", rowsPerPage: 15, canPage: true, canSort: true, sortFieldName: "[COLNAME]", sortDirectionFieldName: "ASC");
     int count = grid.PageCount;
     @grid.GetHtml(headerStyle: "HeaderClassCSS", footerStyle: "FooterClassCSS", rowStyle: "RowClassCSS", alternatingRowStyle: "AlternateRowClassCSS", columns: grid.Columns(
     grid.Column(columnName: "ChannelID", header: "ID"),
     grid.Column(columnName: "ChannelName", header: "Channel Name"),
     ), htmlAttributes: new { @class = "TableClassCSS" }, mode: WebGridPagerModes.All)
  }
  </div>
     <div style="text-align:center">
     @for (int i = 1; i <= count; i++)
     {
     //@Url.Action(,"Channels", new { page = i})
        <a href="@Url.Action("Channels", new { page = i})">@(i + " | " )</a>
      }
  </div>

注意：您可以使用分配给页脚的类来禁用或隐藏内置页脚，在我的例子中是“FooterClassCSS”。喜欢

.FooterClassCSS
 {
    display:none;
 }