web-dev-qa-db-fra.com

@ Html.DropDownList width

Q: Comment définir la largeur pour @ Html.DropDownList (et non en css)? 

@Html.DropDownList("ListId", String.Empty, new {style="width: 250px;"})  @* no go!*@
asp.net-mvc-3razor
23
JaJ

Le deuxième argument de DropDownList helper doit être un IEnumerable<SelectListItem>. Vous passez une chaîne (une chaîne vide pour être plus précis). Donc, pour utiliser cette aide, vous devrez respecter sa signature:

@Html.DropDownList(
    "ListId", 
    Enumerable.Empty<SelectListItem>(), 
    new { style = "width: 250px;" }
)

Il est évident que générer une liste déroulante vide est inutile. Vous avez probablement un modèle de vue (vous devriez d'ailleurs) que vous voulez utiliser pour vous lier à:

@Html.DropDownList(
    "ListId", 
    Model.MyList, 
    new { style = "width: 250px;" }
)

et bien sûr, comme vous avez un modèle de vue, vous devriez préférer utiliser l’assistant DropDownListFor:

@Html.DropDownListFor(
    x => x.ListId, 
    Model.MyList, 
    new { style = "width: 250px;" }
)

enfin, pour éviter d'encombrer votre code HTML avec des styles, vous devez utiliser un CSS externe:

@Html.DropDownListFor(
    x => x.ListId, 
    Model.MyList, 
    new { @class = "mycombo" }
)

où dans votre CSS externe vous définiriez la règle .mycombo:

.mycombo {
    width: 250px;
}

Maintenant, vous avez ce que je considère comme un code approprié.

70
Darin Dimitrov

Vous devez utiliser l'approche View Model. Cependant, la solution la plus simple consiste simplement à donner une valeur nulle au deuxième paramètre. 

@Html.DropDownList("ListId", null, new {style="width: 250px;"})
4
Tyriddik

Il existe une technique jquery qui vous permet de définir la largeur sans avoir à traiter avec le constructeur @ Html.DropDownList.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#ListId").width(300);
    });
</script>
1
Tarzan
 @Html.DropDownListFor(model => model.Test,
 new SelectList(new List<YourNamespace.Modelname>(), "Id", "Name"), 
 null, new { @id = "ddlTest", @style="width: 250px;" })
1
Thulasiram