ASP.NET MVC中DropDownList的使用

DropDownList則與TextBox等控制項不同，它使用的是select標記。它需要兩個值：在下拉框中顯示的列表，和預設選項。而自動綁定一次只能綁定一個屬性，因此你需要根據需要選擇是繫結資料行表，還是預設選項。

DropDownList擴充方法的各個重載版本“基本上”都會傳遞到這個方法上：

 

代碼

 public static string DropDownList(
     this HtmlHelper htmlHelper, 
     string name, 
     IEnumerable<SelectListItem> selectList, 
     string optionLabel, 
     IDictionary<string, object> htmlAttributes) { 
　　　　}

 

 

如果沒有指定selectList，該方法將自動繫結資料行表，即從ViewData中尋找name所對應的值。如果提供了selectList，將自動綁定預設選項，即從selectList中找到Selected屬性為true的SelectedListItem。（具體參見HtmlHelper方法的SelectInternal輔助方法）

例1：如果在Action方法中有如下代碼：

在View中這樣使用：

 

代碼

List<SelectListItem> items = new List<SelectListItem>();  
items.Add(new SelectListItem { Text = "Kirin", Value = "29" });  
items.Add(new SelectListItem { Text = "Jade", Value = "28", Selected = true});  
items.Add(new SelectListItem { Text = "Yao", Value = "24"});  
this.ViewData["list"] = items; 

 

 

<%=Html.DropDownList("list")%>那麼輔助方法將率先從ViewData中擷取key為list的項，如果該項為IEnumerable<SelectedListItem>類型則綁定到下拉框中，否則將拋出InvalidOperationException。由於第二個SelectListItem的Selected為true，則預設選中第二個。

例2：如果Action中代碼如下：

 

代碼

List<SelectListItem> items = new List<SelectListItem>();  
items.Add(new SelectListItem { Text = "Kirin", Value = "29" });  
items.Add(new SelectListItem { Text = "Jade", Value = "28"});  
items.Add(new SelectListItem { Text = "Yao", Value = "24"});  
this.ViewData["list"] = items;  
this.ViewData["selected"] = 24; 

  View中的代碼如下： 

<%=Html.DropDownList("selected", ViewData["list"] as IEnumerable<SelectListItem>)%> 

 那麼輔助方法將ViewData["list"]綁定為下拉框，然後從ViewData中擷取key為selected的項，並將下list中Value值與該項的值相等的SelecteListItem設為預設選中項。

以上兩種方法儘管可以實現DropDownList的正確顯示，但並非最佳實務。在實際項目中，我們更希望在代碼中使用強型別。例如上面兩例中，SelectListItem的Text和Value本來是User對象的Name和Age屬性，然而上面的代碼卻絲毫體現不出這種對應關係。如果User列表是從資料庫或其他外部資源中獲得的，我們難道要用這樣的方式來綁定嗎？ 

var users = GetUsers();  
foreach (var user in users)  
{      
 items.Add(new SelectListItem{ Text = user.Name, Value = user.Age.ToString() });  
} 

 

 這顯然是我們所無法容忍的。那麼什麼是最佳實務呢？

ASP.NET MVC為DropDownList和ListBox（都在html中使用select標記）準備了一個輔助類型：SelectList。SelectList繼承自MultiSelectList，而後者實現了IEnumerable<SelectListItem>。也就是說，SelectList可以直接作為Html.DropDownList方法的第二個參數。

MultiSelectList包含四個屬性，分別為：

Items：用於在select標記中出現的列表，通常使用option標記表示。IEnumerable類型。

DataTextField：作為option的text項，string類型。

DataValueField：作為option的value項，string類型。

SelectedValues：選中項的value值，IEnumerable類型。

顯然，作為DropDownList來說，選中項不可能為IEnumerable，因此SelectList提供了一個新的屬性：

SelectedValue：選中項的value值，object類型。

同時，SelectList的建構函式如下所示：  

代碼

public SelectList(
　　IEnumerable items, 
　　string dataValueField, 
　　string dataTextField, 
　　object selectedValue):base(items, dataValueField, dataTextField, ToEnumerable(selectedValue)) 
　　{      
　　　　SelectedValue = selectedValue;  
　　} 

  於是我們的代碼變為：

var users = GetUsers();  var selectList = new SelectList(users, "Age", "Name", "24");  this.ViewData["list"] = selectList;  view裡直接引用： <%=Html.DropDownList("list")%> 

  

當然，你也可以使用不帶selectedValue參數的建構函式重載，而在view中顯式指定IEnumerable<SelectListItem>，並在ViewData或view model中指定其他與DropDownList同名的項作為預設選項。

 

最後讓我們來回顧一下DropDownList的三種用法：

建立IEnumerable<SelectListItem>並在其中指定預設選中項。

建立IEnumerable<SelectListItem>，在單獨的ViewData項或view model的屬性中指定預設選中項。

使用SelectList。

好了，關於DropDownList的用法我們今天就討論到這裡，您會用了嗎？