使用 Razor 生成 HTML5 中的 data- 属性

时间:2024-01-02 14:39:03

在 HTML5 中, 可以使用 data- 属性来表示用户数据,这些数据甚至可以是 JSON 格式的数据,对 Web 前端开发带来很大的方便。

在 MVC 的 Razor 中,可以使用匿名对象来生成定制的属性,不过,这样的属性可不能通过 Razor  的语法检查。

new{ data-id=  }

编译器会直接报告错误。  The name 'data' does not exist in the current context   ,原因很简单,把 - 号当作运算符了。
其实,HtmlHelper 提供的方法 AnonymousObjectToHtmlAttributes 已经可以解决这个问题,方法的说明如下所示。

Replaces underscore characters (_) with hyphens (-) in the specified HTML attributes.

我们可以在匿名对象中直接使用下划线 (_) 来代替减号 (-) ,HtmlHelper 会在呈现中,将下划线替换为减号的。

例如,下面的写法

@Html.TextBox("username", "noname", new{ data_name="tom" })

会生成如下的 HTML5 标记。

<input data-name="tom" id="username" name="username" type="text" value="noname" />