在 ASP.NET MVC 中向 UI 添加 HTML 标签

Question

我有一个在 ASP.NET MVC 中显示生成表的应用程序。 生成表格的代码是这样的：

    @using (Html.BeginForm())
    {
        <div class="form-inline">
            <br />
            @(Html.Kendo().Grid<Models.ViewModel>()
              .Name("name")
              .Columns(columns =>
              {
                  columns.Bound(c => c.c1);
                  columns.Bound(c => c.c2);
                  columns.Bound(c => c.c3);
                  columns.Bound(c => c.c4);
                  columns.Bound(c => c.c5);
              }
              )
              .
              .Sortable()
              .Resizable(resize => resize.Columns(true))
              .Navigatable()                  
              .DataSource(ds => ds
                .Ajax()
                .Read(read => read.Action("ReadAddress", "Home"))
               )
        )
        </div>
    }

应用程序生成的表看起来不错。 这是它在 HTML 中的样子

<table role="grid" tabindex="0" aria-activedescendant="natipgrid_active_cell" > ... </table>

该表存在屏幕阅读器的可访问性问题，我需要向 HTML 表添加摘要标记。 所以结果是这样的

<table summary="Summary of contents of the table" role="grid" tabindex="0" aria-activedescendant="natipgrid_active_cell" > ...</table>

如何将 HTML 摘要标签添加到网格中？ 它不一定是摘要标签，也可以是 state 或属性标签。 任何有助于为屏幕阅读器调出表格的东西。

Answer 1

您可以在读取数据后使用数据绑定事件，并使用 javascript 添加您想要的任何属性，例如

.Read(read => read.Action("ReadAddress", "Home").Data("onDataBinding"));
<script>
     function onDataBinding() {
         $('name > table').attr('summary', 'Summary of contents of the table');
     }
</script>

Answer 2

通过将 HtmlAttributes 添加到网格来修复它，请参见下文。

   @using (Html.BeginForm())
{
    <div class="form-inline">
        <br />
        @(Html.Kendo().Grid<Models.ViewModel>()
          .Name("name")
          .HtmlAttributes(new { summary = "Summary of table contents" }) <--------- here
          .Columns(columns =>
          {
              columns.Bound(c => c.c1);
              columns.Bound(c => c.c2);
              columns.Bound(c => c.c3);
              columns.Bound(c => c.c4);
              columns.Bound(c => c.c5);
          }
          )
          .
          .Sortable()
          .Resizable(resize => resize.Columns(true))
          .Navigatable()                  
          .DataSource(ds => ds
            .Ajax()
            .Read(read => read.Action("ReadAddress", "Home"))
           )
    )
    </div>
}