Come applicare lo stile di dropdown Bootstrap a un ASPDNET MVC DropDownList?

Question

data è il seguente codice rasoio MVC che crea un menu a discesa da una lista:

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

questo modo si crea il seguente menu a discesa:

Quando si utilizza il codice 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> 

Mostrerà il menu a discesa come questo:

Domanda: E 'possibile ottenere lo stesso aspetto grafico quando si utilizza @Html.DropDownList come quando si utilizza il codice HTML da MVC?

Answer 1

Non è possibile utilizzare il metodo @Html.DropDownList() di Razor per creare il menu a discesa Bootstrap che hai menzionato. Anche se è abbastanza facile creare il proprio helper HTML che rende il codice necessario per creare il dropdown di cui sopra.

Ci sono un sacco di tutorial e guide (such as this one) che ti guideranno attraverso il processo di creazione di un helper HTML personalizzato. Non sono così difficili da creare e possono davvero aiutare ad accelerare i tempi di sviluppo e incoraggiare il riutilizzo del codice.

Aggiornamento:

data la quantità di attenzione a questa domanda sta ottenendo un numero di upvotes del (non corretti) risposta qui sotto è sempre, ecco un lungo tempo (un anno e mezzo!) Esempio di codice con un'immagine per dimostrare le differenze.

È possibile copiare e incollare questo codice nella soluzione e dovrebbe funzionare.

Il codice:

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

Usage:

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

} 

Answer 2

@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" }) 
} 

Basta aggiungere @ class = "forma-control". Funziona bene. ma l'ho anche racchiuso in un modulo Html.Begin();

Answer 3

È molto possibile e davvero facile. Si prega di leggere: DropDownList bootstrap styling

Tutto ciò che serve è:

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

o

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

Answer 4

Aggiunta @class = "form-control" non funziona per @Html.DropDownListFor.Detto questo, puoi rispecchiare gli stili degli altri ingressi "form-control" copiando tali stili (ad esempio tramite Strumenti di sviluppo) e quindi racchiudere lo @Html.DropDownListFor in un div a cui viene assegnato un ID (ad esempio #my-selector). Stile il figlio del div, ad esempio: #my-selector> selezionare {... normali stili bootstrap forma di controllo}

Answer 5

provare questo codice:

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

Answer 6

Ho un pulsante di bootstrap che lavora in ASP.net MVC con un esempio di vita reale che sto utilizzando nel mio attuale luogo di lavoro.

<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 ottiene il nome utente direttamente dal database. Questo è quello che alcuni di voi stavano cercando.

Answer 7

Ho implementato la soluzione e funziona.

Quello che ora è necessario è un BootstrapHtml.DropdownFor, invece del solo menu a discesa. Dobbiamo davvero essere in grado di aggiornare una proprietà del modello quando la selezione del menu a discesa viene modificata.