MVC Bootstrap TextBoxFor EditorFor

时间:2015-01-15 11:48:24

标签: asp.net-mvc twitter-bootstrap asp.net-mvc-5

我有一个使用Bootstrap样式的MVC视图。我想使用" @ Html.EditorFor"而不是" @ HtmlTextBoxFor"。为什么没有编辑器解决它需要成为一个文本框然后最终得到相同的结果和TextBoxFor ??

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

下面是截图和视图代码,Forename是EditorFor,而Surname是(首选格式)TextBoxFor。

enter image description here

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

4 个答案:

答案 0 :(得分:4)

我发布这个答案,因为它对我来说非常合适 - 所有这都归功于@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>

答案 1 :(得分:2)

TextBoxFor接受一个属性参数,因为它始终会创建<input>个标记,因此可以为它们添加属性。

但是,EditorFor可以渲染任何内容,从单个<input>标记到完全成熟的编辑器(通过声明自定义编辑器创建,或通过将复杂类型传递给编辑器)。因此,接受这种情况的属性参数是没有意义的。如果查看MSDN中的overloads list for this method,您会看到,如果传递一个对象,该对象将被视为“附加ViewData”,但绝不会被视为“属性”。如果查看TextBoxFor docs,您会看到有几个重载接受属性参数。

但是,最新版本的MVC(5.1+)确实接受EditorFor助手中的属性。请参阅此SO Q&A: Does Html.EditorFor support more than class in MVC5.1?

答案 2 :(得分:0)

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

仅供参考 - 根据Telerik代码转换器,这是答案的VB.NET剃刀版本(yuck)。但是,也许对那里的其他人有用。

(测试和工作)

答案 3 :(得分:0)

我现在使用以下解决方法来解决问题(直到我升级到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>