css - 在 MVC 中向 @Html.DropDownListFor 添加自定义动画/CSS

Question

我正在尝试将一些自定义 CSS 添加到 MVC 下拉列表中，以更改外观并为其设置动画，这一切都是使用类完成的。如果我使用在页面中硬编码的固定元素列表，它工作正常，但我无法弄清楚如何从 DropDownListFor 中获取要显示的值。以下是三个示例(在此特定表单上使用“用户级别”下拉菜单):

这个有效但看起来很糟糕:

<div class="form-group">
    @Html.LabelFor(model => model.RoleID, "User Level", htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
         @Html.DropDownListFor(model => model.RoleID, (SelectList)ViewBag.Roles, new { @Style = "width:290px", @tabindex = "13" })
         @Html.ValidationMessageFor(model => model.RoleID, "", new { @class = "text-danger" })
    </div>
</div>

这个外观和行为符合我的要求，但只有固定值:

<div class="form-group">
    <div class="control-label col-md-2">User Level</div>
    <div class="col-md-10">
        <div class="btn-group m-b-5">
            <button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown">Please select a user level</button>
            <ul class="dropdown-menu animated flipInX">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>
    </div>
</div>

这个我尝试将两者结合起来，点击时它在下拉列表中没有显示任何内容，但在页面上看起来是正确的。下拉列表不是空的，单击时根本没有显示任何内容:

<div class="form-group">
    @Html.LabelFor(model => model.RoleID, "User Level", htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        <div class="btn-group m-b-5">
            <button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown">Please select a user level
                @Html.DropDownListFor(model => model.RoleID, (SelectList)ViewBag.Roles, new { @class = "dropdown-menu animated flipInX", @tabindex = "13" })
            </button>
                @Html.ValidationMessageFor(model => model.RoleID, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

我是不是漏掉了一些非常明显的东西或者犯了一个简单的错误？我是 MVC/Razor 的新手。

这是它们在页面上的样子:

谢谢

更新:

第三个呈现如下:

    <div class="form-group">
            <label class="control-label col-md-2" for="RoleID">User Level</label>
            <div class="col-md-10">
                <div class="btn-group m-b-5">
                    <button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown">Please select a user level
                        <select class="dropdown-menu animated flipInX" id="RoleID" name="RoleID" tabindex="13"><option value="1">Internal</option>
<option value="2">External</option>
<option value="3">Administrator</option>
</select>
                    </button>
                        <span class="field-validation-valid text-danger" data-valmsg-for="RoleID" data-valmsg-replace="true"></span>
                </div>
            </div>
        </div>

Answer 1

您可以生成一个助手。

namespace YourApp.Helpers
{
    public static class DropDownListExtensions
    {
        public static MvcHtmlString YourDropDownListFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, string text, IEnumerable<SelectListItem> listItems)
        {
            StringBuilder htmlBuilder = new StringBuilder("<div class=\"btn-group\">");
            htmlBuilder.Append("<button type=\"button\" class=\"btn btn-sm dropdown-toggle\" data-toggle=\"dropdown\">");
            htmlBuilder.Append(text).Append("</button>");
            htmlBuilder.Append("<input type=\"hidden\" name=\"");
            htmlBuilder.Append(((MemberExpression)expression.Body).Member.Name).Append("\">");
            htmlBuilder.Append("<ul class=\"dropdown-menu animated flipInX\">");
            foreach (var item in listItems)
            {
                htmlBuilder.Append("<li><a href=\"#\">").Append(item.Text).Append("</a></li>");
            }
            htmlBuilder.Append("</ul></div>");

            return new MvcHtmlString(htmlBuilder.ToString());
        }
    }
}

你用

@Html.YourDropDownListFor(m => m.Property, "button text", listElements)

只需要把选择的值<input type="hidden">使用 javascript 可以完全工作。

运气