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

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

我在下面的代码中填充DropDownList：

控制器：

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>

一切都按预期工作，但我希望组合框看起来像这样：



因此，是否可以执行此操作-或只是以某种方式设置字体颜色？

最佳答案

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

如果需要修改选项元素，则必须手动构造选择：

<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扩展或编辑器模板来自动处理此构造。

关于c# - 我可以将HTML或CSS类添加到@ Html.DropDownListFor元素吗，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32998082/