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

【问题标题】：Adding HTML Tags to UI in ASP.NET MVC在 ASP.NET MVC 中向 UI 添加 HTML 标签
【发布时间】：2021-08-24 19:02:15
【问题描述】：

我有一个在 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 摘要标签添加到网格中？它不必是摘要标签，也可以是状态或属性标签。任何有助于为屏幕阅读器调出表格的内容。

【问题讨论】：

标签： c# asp.net asp.net-mvc kendo-grid kendo-asp.net-mvc

【解决方案1】：

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

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

【讨论】：

我试过了，还是不行。还是一样的

【解决方案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>
}

【讨论】：