asp.net - 使用 EditorFor 和 Twitter Bootstrap 来呈现表单标签、输入和验证消息

Question

我已经覆盖了默认编辑器模板 (Object.ascx) 以生成遵循 Twitter Bootstrap 指南 ( http://twitter.github.io/bootstrap/base-css.html#forms ) 的表单(正文) HTML，该指南通过 Html.EditorForModel() 执行。

@if (ViewData.TemplateInfo.TemplateDepth > 1) 
{
    @(Model == null ? ViewData.ModelMetadata.NullDisplayText : ViewData.ModelMetadata.SimpleDisplayText)
} 
else 
{
    foreach (var property in ViewData.ModelMetadata.Properties.Where(m => m.ShowForEdit @*&& m.ModelType != typeof (System.Data.EntityState)*@ && !m.IsComplexType && !ViewData.TemplateInfo.Visited(m))) 
    {
        if (property.HideSurroundingHtml)
        {
            @Html.Editor(property.PropertyName)
        } 
        else 
        {
            <div class="control-group @(!ViewData.ModelState.IsValidField(property.PropertyName) ? "error" : ViewData.ModelState.ContainsKey(property.PropertyName) ? "success" : "" )">
                @if (!string.IsNullOrEmpty(Html.Label(property.PropertyName).ToHtmlString())) 
                {
                    @Html.Label(property.GetDisplayName() + (property.IsRequired ? " *" : ""), new { @class = "control-label" })
                }

                <div class="controls">
                    @Html.Editor(property.PropertyName)
                    @Html.ValidationMessage(property.PropertyName, "*", new { @class = "help-inline" })
                </div>
            </div>
        }
    }
}

除非我想调整表单(例如更改顺序或添加字段集)，否则这很有效。我基本上想将上述代码的一部分分离到另一个编辑器模板中，这导致了Property.ascx。这将为给定属性呈现标签、输入和验证消息，通过 Html.Editor("{PropertyName"}) 或 Html.EditorFor(m => m.{PropertyName}) 执行。

<div class="control-group @(!ViewData.ModelState.IsValidField(ViewData.ModelMetadata.PropertyName) ? "error" : ViewData.ModelState.ContainsKey(ViewData.ModelMetadata.PropertyName) ? "success" : "" )">
    @if (!string.IsNullOrEmpty(Html.Label(ViewData.ModelMetadata.PropertyName).ToHtmlString())) 
    {
        @Html.Label(ViewData.ModelMetadata.GetDisplayName() + (ViewData.ModelMetadata.IsRequired ? " *" : ""), new { @class = "control-label" })
    }

    <div class="controls">
        @Html.Editor(ViewData.ModelMetadata.PropertyName)
        @Html.ValidationMessage(ViewData.ModelMetadata.PropertyName, "*", new { @class = "help-inline" })
    </div>
</div>

上述编辑器模板的问题在于它无法为给定类型呈现正确的输入。因此，日期/时间属性只会呈现一个没有 type 属性的普通文本框。

我的处理方式正确吗？我应该使用标准 HTML 帮助程序还是部分 View ？如果是这样，我们如何处理通用性？

Answer 1

MVC 5.1 包含针对这种情况的修复，Bootstrap support for editor templates 。您可以通过提供匿名对象作为 EditorFor

的第二个参数来包含标记的其他属性

@Html.EditorFor(model => model, new { htmlAttributes = new { @class = "form-control" }, })