ASP.net webgrid 在 html 中的 tbody 之后生成 tfoot答案

【问题标题】：ASP.net webgrid generate tfoot after tbody in htmlASP.net webgrid 在 html 中的 tbody 之后生成 tfoot
【发布时间】：2019-06-06 18:06:37
【问题描述】：

我有一个旧版应用程序，我需要通过 html5 验证和 WCAG2.0 AA 测试。我遇到了 System.Web.Helpers.Webgrid 和它生成的表的问题，因为 tfoot 元素是在 tbody 元素之前生成的，这导致它验证失败。显然这在几年前还不错，但是随着新的验证规则，tfoot 不再允许在 tbody 之前。

有没有办法强制 webgrid 在 tbody 元素之后生成 tfoot 元素或某种简单的解决方法？简单地禁用页脚（不分页）不是一种选择，因为有时返回的数据会有数百行。

生成表格代码：

var grid = new WebGrid(source: Model.Stuff,
                       defaultSort: "Stamp",
                       rowsPerPage: 20,
                       fieldNamePrefix: "wg_",
                       canPage: true,
                       canSort: true,
                       pageFieldName: "pg");
<text>
@grid.GetHtml(tableStyle: "gridtable",
                headerStyle: "gridtableheading",
                rowStyle: "gridtablerow",
                alternatingRowStyle: "gridtablerowalternate",
                columns:
                    grid.Columns(
                                grid.Column("View", format: (item) => (Html.ActionLink("Select", "View", "Item", new { itemID = item.ID }, null)), style: "padtable centeralign"),
                                grid.Column("ID", "ID", style: "padtable rightalign"),
                                grid.Column("CreatedDate", "Stamp", format: (item) => String.Format("{0:MM/dd/yyyy hh:mm tt}", item.CreatedDate), style: "padtable leftalign"),
                                grid.Column("Type", "Type", style: "padtable rightalign"),
                                grid.Column("Status", "Status", style: "padtable leftalign"),
                     ), mode: WebGridPagerModes.Numeric)
</text>

这是实际生成的通用版本

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>Table Test</title>
</head>
<body>
  <table>
    <thead>
      <tr>
        <td>header1</td>
        <td>header2</td>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td>Previous page link</td>
        <td>Next page link</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>table row1 data 1</td>
        <td>table row1 data 2</td>
      </tr>
      <tr>
        <td>table row2 data 1</td>
        <td>table row2 data 2</td>
      </tr>
    </tbody>
  </table>
</body>

【问题讨论】：

标签： html asp.net-mvc-5 webgrid wcag2.0

【解决方案1】：

我无法找到自动执行此操作的方法，但是 slugolicious 提到的自定义页脚的想法让我意识到编辑 HTML 以移动页脚可能更容易。

这远不是一个通用的解决方案，但是对于我需要解决的情况，它可以轻松地将页脚移动到表格的底部。

string TableHTML = grid.GetHtml(tableStyle: "gridtable",
            headerStyle: "gridtableheading",
            rowStyle: "gridtablerow",
            alternatingRowStyle: "gridtablerowalternate",
            columns:
                grid.Columns(
                            grid.Column("View", format: (item) => (Html.ActionLink("Select", "View", "Item", new { itemID = item.ID }, null)), style: "padtable centeralign"),
                            grid.Column("ID", "ID", style: "padtable rightalign"),
                            grid.Column("CreatedDate", "Stamp", format: (item) => String.Format("{0:MM/dd/yyyy hh:mm tt}", item.CreatedDate), style: "padtable leftalign"),
                            grid.Column("Type", "Type", style: "padtable rightalign"),
                            grid.Column("Status", "Status", style: "padtable leftalign"),
                 ), mode: WebGridPagerModes.Numeric).ToHtmlString();


string TableFooter = TableHTML.Substring(TableHTML.IndexOf("<tfoot>"),TableHTML.IndexOf("</tfoot>") + 8 - TableHTML.IndexOf("<tfoot>")); //Grab the HTML for the footer
string NewTable = TableHTML.Substring(0, TableHTML.IndexOf("<tfoot>")); //Take the HTML up until the footer
NewTable += TableHTML.Substring(TableHTML.IndexOf("</tfoot>") + 8).Replace("</table>","");  //Omit the footer, grab the rest of the HTML, remove the closing tag
NewTable += TableFooter; //Reinsert the footer at the end
NewTable += "</table>"; //Add the closing tag

<text>
    @(new HtmlString(NewTable))
</text>

【讨论】：

所以我得到一个“助攻”？
当然。您的建议并没有解决问题，但它确实让我陷入了最终导致我找到解决方案的思路。

【解决方案2】：

ASP.NET GridView Newbie Questions About TFOOT and TH 上的答案显示

自定义，在自定义之前，是在之前，但在自定义之后，现在是在之后。也许他们在定制中所做的某些事情导致了这种情况。最坏的情况，你可以用一些简单的东西来定制它，只是为了让移动。

【讨论】：

当我构建他给出的示例时，它确实在 tbody 之后使用 tfoot 打印。我删除了自定义，它仍然打印正确，所以它似乎与此无关。我的猜测是它基于数据何时/如何绑定/加载到网格中。该答案也是基于标准的 asp.net 而不是 mvc（我更新了我的问题的标签以更正）但是在我决定进行转换之前，我决定采用不同的方法来自定义页脚。基本上采用网格抽出的原始 HTML 并使用字符串操作。我已经在另一个答案中详细说明了