Как применить стиль выпадающего списка Bootstrap для ASP.NET MVC DropDownList?

Ответ 1

Невозможно использовать метод Razor @Html.DropDownList() для создания выпадающего списка Bootstrap, о котором вы упоминали. Хотя достаточно просто создать свой собственный HTML-помощник, который отображает код, необходимый для создания вышеупомянутого выпадающего списка.

Существует множество руководств и руководств (таких как этот), которые проведут вас через процесс создания настраиваемого HTML-помощника. Они действительно не так сложны в создании и могут действительно помочь ускорить время разработки и стимулировать повторное использование кода.

Update:

Учитывая количество внимания, которое этот вопрос получает, число ответов (получение неправильного ответа ниже), вот длинный образец (год и пол!!) кода с изображением, чтобы продемонстрировать различия.

Вы можете скопировать и вставить этот код в свое решение, и оно должно работать.

Код:

public class BootstrapHtml
{
    public static MvcHtmlString Dropdown(string id, List<SelectListItem> selectListItems, string label)
    {
        var button = new TagBuilder("button")
        {
            Attributes =
            {
                {"id", id},
                {"type", "button"},
                {"data-toggle", "dropdown"}
            }
        };

        button.AddCssClass("btn");
        button.AddCssClass("btn-default");
        button.AddCssClass("dropdown-toggle");

        button.SetInnerText(label);
        button.InnerHtml += " " + BuildCaret();

        var wrapper = new TagBuilder("div");
        wrapper.AddCssClass("dropdown");

        wrapper.InnerHtml += button;
        wrapper.InnerHtml += BuildDropdown(id, selectListItems);

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

    private static string BuildCaret()
    {
        var caret = new TagBuilder("span");
        caret.AddCssClass("caret");

        return caret.ToString();
    }

    private static string BuildDropdown(string id, IEnumerable<SelectListItem> items)
    {
        var list = new TagBuilder("ul")
        {
            Attributes =
            {
                {"class", "dropdown-menu"},
                {"role", "menu"},
                {"aria-labelledby", id}
            }
        };

        var listItem = new TagBuilder("li");
        listItem.Attributes.Add("role", "presentation");

        items.ForEach(x => list.InnerHtml += "<li role=\"presentation\">" + BuildListRow(x) + "</li>");

        return list.ToString();
    }

    private static string BuildListRow(SelectListItem item)
    {
        var anchor = new TagBuilder("a")
        {
            Attributes =
            {
                {"role", "menuitem"},
                {"tabindex", "-1"},
                {"href", item.Value}
            }
        };

        anchor.SetInnerText(item.Text);

        return anchor.ToString();
    }
}

Применение:

@using (Html.BeginForm("", "", FormMethod.Post))
{

    var items = new List<SelectListItem>()
    {
        new SelectListItem() { Text = "Item 1", Value = "#" },
        new SelectListItem() { Text = "Item 2", Value = "#" },
    };

    <div class="form-group">
        @Html.Label("Before", new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.DropDownList("Name", items, "Dropdown", new { @class = "form-control"})
        </div>
    </div>

    <br/>
    <br/>
    <br/>

    <div class="form-group">
        @Html.Label("After", new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @BootstrapHtml.Dropdown("dropdownMenu1", items, "Dropdown")
        </div>
    </div>

}

Ответ 2

Это очень возможно, и очень легко. Пожалуйста прочти: Стиль загрузки бутстрапа DropDownList

Все, что вам нужно, это:

@Html.DropDownList("movieGenre", "All", new { @class = "form-control"})

или

@Html.DropDownListFor(model => model.MovieGenreModel, SelectList, new { @class = "form-control"})

Ответ 3

@using (Html.BeginForm("Index", "ELibrary"))
{
@Html.DropDownListFor(m => m.Status, new SelectList(Model.StatusItems, "key", "value"), "-- Status --", new { onchange = "this.form.submit();", @class = "form-control" })
}

Вам просто нужно добавить @ class= "form-control". Он работает нормально. но я также включил его в форму Html.Begin();

Ответ 4

Попробуйте этот код:

  @Html.DropDownListFor(model => model.MovieGenreModel, SelectList,
                   new { @class = "form-control",aria_describedby="dropdownMenu1"})

Ответ 5

Добавление @class = "form-control" не работает для @Html.DropDownListFor. При этом вы можете отразить стили других входов "form-control", скопировав эти стили (например, с помощью инструментов разработчика), а затем оберните @Html.DropDownListFor в div, в котором вы укажете идентификатор (например, #my-selector). Стиль дочернего элемента div, например: #my-selector > выберите {... обычные стили управления стилем загрузки]

Ответ 6

У меня есть кнопка загрузки, работающая в ASP.net MVC с реальным примером, который я использую на моем текущем месте работы.

<div class="dropdown" style="display:inline-block">
            <button class="btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown" value="@Model.Id"  runat="server"><span class="glyphicon glyphicon-user"></span> Assign <span class="caret"></span></button>
            <ul class="dropdown-menu" onclick="location.href='@Url.Action("AssignTicket", "Home", new {AssignId = Model.Id })'">
                @foreach (var user in (IEnumerable<SelectListItem>)ViewBag.User)
                {
                    <li>@user.Text</li>
                }
            </ul>
</div>

View.user получает имя пользователя непосредственно из базы данных. Джоуп, это то, что искали некоторые из вас.

Ответ 7

Я реализовал ваше решение, и оно работает.

Теперь необходимо загрузить BootstrapHtml.DropdownFor, а не просто выпадающее меню. Нам действительно нужно иметь возможность обновлять свойство модели при изменении выбора выпадающего списка.