twitter-bootstrap MVC Bootstrap TextBoxFor EditorFor
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/27962760/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
MVC Bootstrap TextBoxFor EditorFor
提问by David Ward
I have an MVC view that is using Bootstrap styles. I want to use "@Html.EditorFor" rather than "@HtmlTextBoxFor". Why doesn't EditorFor work out that it needs to be a textbox and then end up with the same result and TextBoxFor??
我有一个使用 Bootstrap 样式的 MVC 视图。我想使用“@Html.EditorFor”而不是“@HtmlTextBoxFor”。为什么 EditorFor 不知道它需要是一个文本框,然后最终得到与 TextBoxFor 相同的结果??
My reason for asking is that my next field will be a date and want to use EditorFor and with the DataType data annotation it will display a date picker.
我询问的原因是我的下一个字段将是一个日期并且想要使用 EditorFor 并且使用 DataType 数据注释它将显示一个日期选择器。
Below is screenshot and view code and the Forename is EditorFor whilst the Surname is (the preferred format) TextBoxFor.
下面是屏幕截图和查看代码,Forename 是 EditorFor 而 Surname 是(首选格式)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>
回答by David Ward
I am posting this answer as it worked perfectly for me - all thanks to @StephenMuecke. Although tagged as MVC4 (I will remove the tag) I was actually using MVC5 and therefore could pass html attributes:
我发布了这个答案,因为它对我来说非常有效 - 这一切都归功于 @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>
becomes:
变成:
<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>
回答by JotaBe
TextBoxForaccepts an attributes parameter because it always creates <input>tags, and thus, it can add attributes to them.
TextBoxFor接受一个属性参数,因为它总是创建<input>标签,因此,它可以向它们添加属性。
However, EditorForcan render anything from a single <input>tag, to a fully fledged editor (created by declaring a custom editor, or by passing a complex type to the editor). So, it makes no sense to accept an attributes parameter for this case. If you look at the overloads list for this methodin 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, you'll see that there are several overloads that accept an attributes parameter.
但是,EditorFor可以呈现从单个<input>标签到完全成熟的编辑器(通过声明自定义编辑器或通过将复杂类型传递给编辑器创建)的任何内容。因此,在这种情况下接受属性参数是没有意义的。如果您查看MSDN 中此方法的重载列表,您将看到,如果您传递一个对象,该对象将被视为“附加 ViewData”,但绝不会被视为“属性”。如果您查看TextBoxFor docs,您会看到有几个接受属性参数的重载。
However, the latest versions of MVC (5.1+) do accept attributes in EditorForhelper. Please, see this SO Q&A: Does Html.EditorFor support more than class in MVC5.1?.
但是,最新版本的 MVC (5.1+) 确实接受EditorForhelper 中的属性。请参阅此问答:Html.EditorFor 是否支持 MVC5.1 中的多个类?.
回答by bkwdesign
Html.EditorFor(Function(m) m.Forenames, New With {
Key .htmlAttributes = New With { Key .[class] = "form-control" }
})
FYI - according to the Telerik code converter, this is what the VB.NET razor version of the answer looks like (yuck). But, maybe useful for someone else out there.
仅供参考 - 根据 Telerik 代码转换器,这就是答案的 VB.NET razor 版本的样子(糟糕)。但是,也许对其他人有用。
(tested and works)
(经过测试并有效)
回答by jkokorian
I use the following workaround to solve the problem for the moment (until I upgrade to mvc5).
我暂时使用以下解决方法来解决问题(直到我升级到 mvc5)。
Add this to the end of your _layout.cshtml file:
将此添加到 _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>

