@ Html.DropDownList寬度

Question

問：如何爲@ Html.DropDownList寬度（而不是CSS）？

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

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

現在你有我認爲正確的代碼。

Answer 2

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

Answer 3

有一個jQuery技術，可以讓你設置寬度而不必處理@ Html.DropDownList構造函數。

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

Answer 4

您應該使用視圖模型方法。然而懶惰的出路只是爲了讓第二個參數爲空。

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