0

我已经看到了许多关于 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 如何嵌套在我的视图中的表行中：

     <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 助手？

以下是这两个助手的输出：

其中一件事与另一件事不同

4

1 回答 1

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

于 2014-10-13T18:47:12.197 回答