html - ASP.net webgrid 在 html 中的 tbody 之后生成 tfoot
问题描述
我有一个旧版应用程序,我需要通过 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>
解决方案
我无法找到自动执行此操作的方法,但是 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>
推荐阅读
- javascript - 在 Symfony 下将数据库值传递给 JavaScript?
- discord - Discord.js,message.guild.owner 返回 null
- php - [Laravel]昨天post的create-function可以工作,但现在不行
- java - 在 Java 中对具有一些要求的字符串数组进行排序
- python - AssertionError: will build wheel with unsupported tag ('cp310', 'cp310', 'linux_x86_64')
- javascript - 开始嵌入 Dailymotion 视频时暂停滑块
- php - 如何在 PHP 中将小浮点数与未知的小数位数相乘而不会因为科学记数法而变为零?
- java - Java 正则表达式匹配模式组意外匹配
- javascript - 正则表达式范围与十进制 0.1 到 1
- laravel - Laravel 验证请求来自