@ Html.DropDownList width - PullRequest
       4

@ Html.DropDownList width

24 голосов
/ 30 сентября 2011

Q: Как установить ширину для @ Html.DropDownList (а не в css)?

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

Ответы [ 4 ]

70 голосов
/ 30 сентября 2011

Второй аргумент помощника DropDownList должен быть IEnumerable<SelectListItem>. Вы передаете строку (пустую, если быть более точным). Поэтому, чтобы использовать этот помощник, вы должны уважать его подпись:

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

Очевидно, что создание пустого выпадающего списка бесполезно. Вероятно, у вас есть модель представления (вам, кстати), которую вы хотите использовать для привязки к:

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

и, конечно, поскольку у вас есть модель представления, вы должны предпочесть использовать помощник DropDownListFor:

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

и, наконец, чтобы не загромождать ваш HTML стилями, вы должны использовать внешний CSS:

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

где в вашем внешнем CSS вы определяете правило .mycombo:

.mycombo {
    width: 250px;
}

Теперь у вас есть то, что я считаю правильным кодом.

4 голосов
/ 21 апреля 2015

Вы должны использовать подход View Model.Однако ленивый выход - просто дать 2-му параметру ноль.

@Html.DropDownList("ListId", null, new {style="width: 250px;"})
2 голосов
/ 24 июля 2012
 @Html.DropDownListFor(model => model.Test,
 new SelectList(new List<YourNamespace.Modelname>(), "Id", "Name"), 
 null, new { @id = "ddlTest", @style="width: 250px;" })
1 голос
/ 27 июля 2013

Существует метод jquery, который позволяет устанавливать ширину без необходимости иметь дело с конструктором @ Html.DropDownList.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#ListId").width(300);
    });
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...