c# - 我可以将 html 或 css 类添加到 @Html.DropDownListFor 元素吗

Question

我想要一个允许用户选择颜色的 DropDownList。我想在下拉列表项中添加一个彩色方 block ，或者为文本涂上适当的颜色。

我正在按照以下代码填充 DropDownList:

Controller :

List<SelectListItem> colourSelectList = new List<SelectListItem>();
colourSelectList.Add(new SelectListItem() { Text = "Blue", Value = "blue" });
colourSelectList.Add(new SelectListItem() { Text = "Red", Value = "red" });
colourSelectList.Add(new SelectListItem() { Text = "Green", Value = "green" });
colourSelectList.Add(new SelectListItem() { Text = "Purple", Value = "purple" });
colourSelectList.Add(new SelectListItem() { Text = "Grey", Value = "grey" });
colourSelectList.Add(new SelectListItem() { Text = "Yellow", Value = "yellow" });

ViewData["ColourSelectList"] = colourSelectList;

查看:

<div class="form-group">
    <label class="col-md-3 control-label">Colour<span class="required"> * </span></label>
    <div class="col-md-3">
        @Html.DropDownListFor(m => m.MetronicBrandColour, ViewData["ColourSelectList"] as IEnumerable<SelectListItem>, " --- Select Colour --- ", new { @class = "form-control" })
    </div>
</div>

一切都按预期工作，但我希望组合框看起来像这个模型:

那么，是否可以这样做，或者只是以某种方式设置字体颜色？

Answer 1

Html.DropDownListFor 无法修改生成的实际选项元素。您只能将类和其他属性应用于父选择元素。

如果您需要修改选项元素，则必须手动构建您的选择:

<select id="@Html.IdFor(m => m.Foo)" name="@Html.NameFor(m => m.Foo)">
    @foreach (var option in Model.FooSelectList.Items)
    {
        <option class="..." value="@option.Value" @(option.Selected ? "selected=\"selected\"" : string.Empty)>@option.Text</option>
    }
</select>

如果您打算经常使用它，那么您可以设置一个 HtmlHelper 扩展或一个编辑器模板来自动处理这种构造。