@ Html.DropDownList ancho

Question

P: ¿Cómo establecer el ancho para @ Html.DropDownList (y no en css)?

@Html.DropDownList("ListId", String.Empty, new {style="width: 250px;"}) @* no go!*@ 

Answer 1

El segundo argumento de la DropDownList ayudante debe ser un IEnumerable<SelectListItem>. Está pasando una cadena (una vacía para ser más preciso). Así que con el fin de utilizar este helper que tendrá que respetar su firma:

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

generar Obviamente una lista desplegable vacía es de poca utilidad. Es probable que tenga un modelo de vista (que debiera por cierto) que desea utilizar para unirse a:

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

y por supuesto porque tiene un modelo de vista se debe preferir usar el DropDownListFor ayudante:

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

y, finalmente, para evitar que saturan su HTML con estilos que usted debe utilizar un CSS externo:

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

donde en su CSS externo debe definir elRegla:

.mycombo { 
    width: 250px; 
} 

Ahora tiene lo que considero un código correcto.

Answer 2

@Html.DropDownListFor(model => model.Test, 
new SelectList(new List<YourNamespace.Modelname>(), "Id", "Name"), 
null, new { @id = "ddlTest", @style="width: 250px;" }) 

Answer 3

Hay una técnica jQuery que le permite establecer la anchura sin tener que lidiar con el constructor @ Html.DropDownList.

<script language="javascript" type="text/javascript"> 
    $(document).ready(function() { 
     $("#ListId").width(300); 
    }); 
</script> 

Answer 4

Debe utilizar el enfoque de Ver modelo. Sin embargo, la salida perezosa es simplemente dar un nulo al 2º parámetro.

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