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" })

如果没有进行下拉选择，这个助手会很好地验证并显示验证消息，但是字段本身不会像使用相同的＆＃34;表单的其他TextBoxFor（）助手那样变为红色边框 - 控制＆＃34;类。

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

编辑：

以下显示了Html Helper如何嵌套在我的视图中的表行中：

     <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助手。 @Html.DropDownListFor（）帮助器是我遇到的问题。正如我之前所说，使用表单控件类对此助手进行验证工作正常，但是当没有进行选择时，下拉列表字段不应该变为红色。 @Html.TextBoxFor（）Helper使用相同的表单控件类，但它会验证并将其颜色更改为红色。

有人建议我使用＆＃34; has-error＆＃34; class，但这已经在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 class：

<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