[摘]在ASP.NET MVC中使用DropDownList

 

在ASP.NET MVC中,儘管咱們能夠直接在頁面中編寫HTML控件,並綁定控件的屬性,但更方便的辦法仍是使用HtmlHelper中的輔助方法。在View中,包含一個類型爲HtmlHelper的屬性Html,它爲咱們呈現控件提供了捷徑。html

咱們今天主要來討論Html.DropDownList的用法,首先從Html.TextBox開始。數據庫

Html.TextBox有一個重載方法形式以下:函數

publicstaticstringTextBox(thisHtmlHelperhtmlHelper,stringname,objectvalue);

其中name參數爲文本框name屬性(以及id屬性)的值,value參數爲文本框的默認值(即value屬性的值)。若是value參數爲null或者使用沒有value參數的重載方法,那麼此時name參數同時仍是一個鍵值,負責獲取文本框的默認值。獲取的順序爲,先從ViewData中查找是否存在鍵值爲name值的項,若是ViewData中沒有則從ViewData.Model中查找是否存在名稱爲name值的屬性,若是仍然不存在,則返回null。(具體參見HtmlHelper的InputHelper輔助方法)post

也就是說this

publicActionResultTest(){ViewData["Name"]="Jade";returnView();}

 

<%=Html.TextBox("Name")%>

這樣的代碼將會輸出這樣的HTML:spa

<inputid="Name"name="Name"type="text"value="Jade"/>

 

因爲TextBox的id和name屬性的值與ViewData中的某一項同名(均爲Name),所以TextBox的value屬性的值將自動綁定爲ViewData中Name項的值。不只是ViewData,若是view model的類型包含Name屬性,也將輸出一樣的結果:code

varuser =newUser{Name="Jade"};ViewData.Model= user;returnView();

 

若是ViewData和ViewData.Model中同時存在Name,則優先使用ViewData中的項。htm

CheckBox、Hidden、Password、RedioButton等控件也是如此,它們與TextBox同樣都使用input標記,屬性綁定的規則大體相同。對象

DropDownList則與TextBox等控件不一樣,它使用的是select標記。它須要兩個值:在下拉框中顯示的列表,和默認選項。而自動綁定一次只能綁定一個屬性,所以你須要根據須要選擇是綁定列表,仍是默認選項。blog

DropDownList擴展方法的各個重載版本「基本上」都會傳遞到這個方法上:

publicstaticstringDropDownList(thisHtmlHelperhtmlHelper,stringname,IEnumerable<SelectListItem> selectList,stringoptionLabel,IDictionary<string,object> htmlAttributes){}

 

若是沒有指定selectList,該方法將自動綁定列表,即從ViewData中查找name所對應的值。若是提供了selectList,將自動綁定默認選項,即從selectList中找到Selected屬性爲true的SelectedListItem。(具體參見HtmlHelper方法的SelectInternal輔助方法)

例1:若是在Action方法中有以下代碼:

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

在View中這樣使用:

<%=Html.DropDownList("list")%>

那麼輔助方法將率先從ViewData中獲取key爲list的項,若是該項爲IEnumerable<SelectedListItem>類型則綁定到下拉框中,不然將拋出InvalidOperationException。因爲第二個SelectListItem的Selected爲true,則默認選中第二個。

例2:若是Action中代碼以下:

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

View中的代碼以下:

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

那麼輔助方法將ViewData["list"]綁定爲下拉框,而後從ViewData中獲取key爲selected的項,並將下list中Value值與該項的值相等的SelecteListItem設爲默認選中項。

以上兩種方法儘管能夠實現DropDownList的正確顯示,但並不是最佳實踐。在實際項目中,咱們更但願在代碼中使用強類型。例如上面兩例中,SelectListItem的Text和Value原本是User對象的Name和Age屬性,然而上面的代碼卻絲毫體現不出這種對應關係。若是User列表是從數據庫或其餘外部資源中得到的,咱們難道要用這樣的方式來綁定嗎?

varusers =GetUsers();foreach(varuser inusers){ items.Add(newSelectListItem{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的構造函數以下所示:

publicSelectList(IEnumerableitems,stringdataValueField,stringdataTextField,objectselectedValue):base(items, dataValueField, dataTextField,ToEnumerable(selectedValue)){SelectedValue= selectedValue;}

 

因而咱們的代碼變爲:

varusers =GetUsers();varselectList =newSelectList(users,"Age","Name","24");this.ViewData["list"]= selectList;

 

<%=Html.DropDownList("list")%>

 

固然,你也可使用不帶selectedValue參數的構造函數重載,而在view中顯式指定IEnumerable<SelectListItem>,並在ViewData或view model中指定其餘與DropDownList同名的項做爲默認選項。

最後讓咱們來回顧一下DropDownList的三種用法:

  1. 創建IEnumerable<SelectListItem>並在其中指定默認選中項。
  2. 創建IEnumerable<SelectListItem>,在單獨的ViewData項或view model的屬性中指定默認選中項。
  3. 使用SelectList。

好了,關於DropDownList的用法咱們今天就討論到這裏,您會用了嗎?

相關文章
相關標籤/搜索