web-dev-qa-db-fra.com

Comment appliquer le style de menu déroulant Bootstrap à une DropDownList ASP.NET MVC?

Donné est le code de rasoir MVC suivant qui crée un menu déroulant à partir d'une liste: 

@Html.DropDownList("MyTestList", null, new { @class = "btn btn-default dropdown-toggle" })

Cela créera le menu déroulant suivant: 

dropdown

Lorsque vous utilisez le code de getbootstrap.com: 

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">test1</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">test2</a></li>
    </ul>
</div>

Il affichera la liste déroulante comme ceci:

image

Question: Est-il possible d’obtenir la même apparence en utilisant @Html.DropDownList qu'en utilisant le code HTML de MVC?

asp.net-mvctwitter-bootstrap
30
Manuel

Il n'est pas possible d'utiliser la méthode @Html.DropDownList() de Razor pour créer la liste déroulante Bootstrap que vous avez mentionnée. Cependant, il est assez facile de créer votre propre assistant HTML qui restitue le code nécessaire pour créer le menu déroulant susmentionné.

Il existe de nombreux tutoriels et guides ( comme celui-ci ) qui vous guideront tout au long du processus de création d'un assistant HTML personnalisé. Ils ne sont vraiment pas si difficiles à créer et peuvent réellement contribuer à accélérer vos temps de développement et à encourager la réutilisation du code.

Mettre à jour:

Compte tenu de l’attention que suscite cette question et du nombre de votes positifs que suscite la réponse (incorrecte) ci-dessous, voici un exemple de code attendu depuis longtemps (un an et demi!) Avec une image illustrant les différences.

Vous pouvez copier et coller ce code dans votre solution et cela devrait fonctionner.

 enter image description here

Le code:

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();
    }
}

Utilisation:

@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>

}
40
Joseph Woodward

C'est très possible et très facile. Veuillez lire: Style de démarrage DropDownList

Tout ce dont tu as besoin c'est:

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

ou

@Html.DropDownListFor(model => model.MovieGenreModel, SelectList, new { @class = "form-control"})
48
Mikael Nilsson
@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" })
}

Vous devez simplement ajouter @ class = "form-control". Ça fonctionne bien. mais je l'ai aussi inclus dans un Html.Begin form ();

5
user2592866

J’ai un bouton de démarrage fonctionnant dans ASP.net MVC avec un exemple concret que j’utilise sur mon lieu de travail actuel. 

<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 obtient le nom de l'utilisateur directement à partir de la base de données. Jope, c'est ce que certains d'entre vous recherchaient.

1
Adam Lee

Essayez ce code:

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

L'ajout de @class = "form-control" ne fonctionne pas pour @Html.DropDownListFor. Cela étant dit, vous pouvez reproduire les styles des autres entrées "form-control" en les copiant (par exemple, via les outils de développement), puis encapsuler le @Html.DropDownListFor dans une div à laquelle vous attribuez un identifiant (par exemple #my-selector). Donnez un style à l'enfant de la div, par exemple: #my-selector> select {... styles de contrôle de formulaire d'amorçage normaux}

0
AAW238

J'ai implémenté votre solution et cela fonctionne. 

Ce qu'il faut maintenant, c'est un BootstrapHtml.DropdownFor, au lieu d'un simple menu déroulant. Nous devons vraiment pouvoir mettre à jour une propriété de modèle lorsque la sélection par liste déroulante est modifiée. 

0
FunkMonkey33