@Html.DropDownList 宽度答案

【问题标题】：@Html.DropDownList width@Html.DropDownList 宽度
【发布时间】：2011-09-30 19:45:40
【问题描述】：

问：如何设置 @Html.DropDownList 的宽度（而不是在 css 中）？

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

【问题讨论】：

标签： asp.net-mvc-3 razor

【解决方案1】：

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

现在你有了我认为合适的代码。

【讨论】：

是否可以用 ViewBag 替换 Model.MyList ？
@Peretz，是的，这是可能的，但我不建议这样做。使用视图模型是一种更好的方法。
如果它包含在其中，比如说一个引导控件，您必须将宽度设置为“宽度：250 像素！重要；”应用。

【解决方案2】：

您应该使用视图模型方法。然而，懒惰的出路就是给第二个参数一个空值。

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

有一种 jquery 技术可以让您设置宽度，而无需处理 @Html.DropDownList 构造函数。

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

【讨论】：