在 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>
}