MVC Bootstrap TextBoxFor EditorFor

Question

我有一个使用 Bootstrap 样式的 MVC 视图。我想使用“@Html.EditorFor”而不是“@HtmlTextBoxFor”。为什么 EditorFor 不能计算出它需要是一个文本框，然后得到与 TextBoxFor 相同的结果？？

我问的原因是我的下一个字段将是一个日期并且想要使用 EditorFor 和 DataType 数据注释它将显示一个日期选择器。

下面是屏幕截图和查看代码，名字是 EditorFor，而姓氏是（首选格式）TextBoxFor。

    <div class="form-group">
        @Html.LabelFor(m => m.Title, new { @class = "control-label" })
        @Html.DropDownListFor(m => m.Title, new SelectList((IEnumerable)@ViewData["Titles"]), new { @class = "form-control" })
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Forenames, new { @class = "control-label" })
        @Html.ValidationMessageFor(m => m.Forenames)
        @Html.EditorFor(m => m.Forenames, new { @class = "form-control" })
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Surname, new { @class = "control-label" })
        @Html.ValidationMessageFor(m => m.Surname)
        @Html.TextBoxFor(m => m.Surname, new { @class = "form-control" })
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.DateOfBirth, new { @class = "control-label" })
        @Html.ValidationMessageFor(m => m.DateOfBirth)
        @Html.EditorFor(m => m.DateOfBirth, new { @class = "form-control" })
    </div>

Answer 1

TextBoxFor 接受属性参数，因为它总是创建 <input> 标签，因此，它可以向它们添加属性。

但是，EditorFor 可以呈现任何内容，从单个 <input> 标记到功能齐全的编辑器（通过声明自定义编辑器或将复杂类型传递给编辑器来创建）。因此，在这种情况下接受属性参数是没有意义的。如果您查看 overloads list for this method in MSDN you'll see that, if you pass an object, that object is treated as "additional ViewData", but never as "attributes". If you look at TextBoxFor docs，您会发现有几个重载接受属性参数。

但是，最新版本的 MVC (5.1+) 确实接受 EditorFor 帮助程序中的属性。请看这个 SO Q&A: Does Html.EditorFor support more than class in MVC5.1?.

Answer 2

我发布了这个答案，因为它对我来说非常有用——感谢@StephenMuecke。尽管标记为 MVC4（我将删除该标记），但我实际上使用的是 MVC5，因此可以传递 html 属性：

<div class="form-group">
    @Html.LabelFor(m => m.Forenames, new { @class = "control-label" })
    @Html.ValidationMessageFor(m => m.Forenames)
    @Html.EditorFor(m => m.Forenames, new { @class = "form-control" })
</div>

变成：

<div class="form-group">
    @Html.LabelFor(m => m.Forenames, new { @class = "control-label" })
    @Html.ValidationMessageFor(m => m.Forenames)
    @Html.EditorFor(m => m.Forenames, new { htmlAttributes = new { @class = "form-control" } })
</div>

Answer 3

Html.EditorFor(Function(m) m.Forenames, New With { 
     Key .htmlAttributes = New With { Key .[class] = "form-control" } 
})

仅供参考 - 根据 Telerik 代码转换器，这就是 VB.NET razor 版本的答案（讨厌）。但是，也许对其他人有用。

（已测试并有效）

Answer 4

我暂时使用以下解决方法来解决问题（直到我升级到 mvc5）。

将此添加到您的 _layout.cshtml 文件的末尾：

<script type="text/javascript">
    var inputs = $('input, textarea, select')
            .not(':input[type=button], :input[type=submit], :input[type=reset]');
    inputs.addClass('form-control');
</script>

MVC Bootstrap TextBoxFor EditorFor

MVC Bootstrap TextBoxFor EditorFor

asp.net-mvc

twitter-bootstrap

asp.net-mvc-5