如何在 @Html.TextBoxFor 中使用 bootstrap-formhelpers 数据格式？答案

【问题标题】：How do I use bootstrap-formhelpers data-format in a @Html.TextBoxFor?如何在 @Html.TextBoxFor 中使用 bootstrap-formhelpers 数据格式？
【发布时间】：2017-09-20 13:07:10
【问题描述】：

如果你看一下this bootstrap documentation for formhelpers，我可以使用

<input type="text" class="form-control bfh-phone" data-format="+1 (ddd) ddd-dddd" placeholder="Cell or Home Phone" required>

在用户输入电话号码时格式化文本框。我想使用@Html.TextBoxFor 或@Html.EditorFor 来做同样的事情。我如何在 mvc 中实现这一点？这是我尝试过的：

<input type="text" class="form-control bfh-phone" data-format="+1 (ddd) ddd-dddd" value="@Model.PhoneNumber" placeholder="Cell or Home Phone" required>

和

@Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { @class = "form-control bfh-phone", @placeholder = "Cell or Home Phone", @data-format="+1 (ddd) ddd-dddd" } })

两者都给出了object reference razor 语法错误。这是怎么做到的？

【问题讨论】：

标签： asp.net-mvc twitter-bootstrap razor formatting

【解决方案1】：

当使用接受object 的EditorFor() 的重载来添加html 属性时，您需要使用_（下划线）字符，该字符将被剃须刀引擎转换为-（连字符）。使用data_format = ".."，而不是data-format = ".."

@Html.EditorFor(m => m.PhoneNumber, new { htmlAttributes = 
    new { @class = "..", placeholder = "..", data_format="+1 (ddd) ddd-dddd" } })

还请注意，placeholder 或 data_format 不需要前导 @ 字符（仅保留字需要）。

【讨论】：