Html.DropDownListFor() 验证有效但字段​​未变为红色

Question

我已经看到许多关于 DropDownListFor 验证的类似问题和答案，但我还没有看到我的特定问题。

这是我的 html 助手。

VB:

@Html.DropDownListFor(Function(Model) Model.AccLev, New SelectList(Model.Items), "Select an Accuracy Level", New With {.class = "form-control"})

C#:

@Html.DropDownListFor(Model => Model.AccLev, new SelectList(Model.Items), "Select an Accuracy Level", new { @class = "form-control" })

如果没有进行下拉选择，这个助手会很好地验证，并显示验证消息，但字段本身不会像其他使用相同“表单控件”的 TextBoxFor() 助手一样变为红色边框类。

这一定是 CSS 样式问题，但我不知道到哪里去找问题。我查看了 bootstrap.css 和 site.css 文件，但我在其中任何一个文件中都看不到任何异常。

编辑:

下面显示了 Html Helper 如何嵌套在我的 View 中的表格行中:

     <tr>
        <td>
            <div class="editor-label">
                @Html.LabelFor(Function(Model) Model.AccLev)
            </div>
            <div class="editor-field">
                @Html.DropDownListFor(Function(Model) Model.AccLev, New SelectList(Model.Items), "Select an Accuracy Level", New With {.class = "form-control"})
                @Html.ValidationMessageFor(Function(Model) model.AccLev)
            </div>
        </td>
        <td>
            <div class="editor-label">
                @Html.LabelFor(Function(Model) Model.Units)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(Function(Model) Model.Units, New With {.class = "form-control"})
                @Html.ValidationMessageFor(Function(Model) model.Units)
            </div>
        </td>
    </tr>

自然地，表在一个表单中，否则我将无法使用 Html Helpers。 @Html.DropDownListFor() 助手是我遇到的问题。正如我之前所说，使用表单控件类的这个帮助程序的验证工作正常，但是当没有进行选择时，下拉列表字段不会像它应该的那样变成红色。 @Html.TextBoxFor() Helper 使用相同的表单控件类，但它会验证并将其颜色更改为应有的红色。

有人建议我使用“has-error”类，但这已经在 bootstrap.css 中实现，如下面的代码片段所示:

.has-error .form-control {  border-color: #b94a48;
                            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
                            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

我感到困惑的是，为什么表单控件类使用 TextBoxFor Html 帮助器而不是 DropDownListFor 帮助器？

这是这两个助手的输出:

Answer 1

您的控件的父元素必须具有 .has-error 类:

<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>

http://getbootstrap.com/css/#forms-control-validation