ASP.NET MVC 下拉列表使用小結

轉自：  http://www.cnblogs.com/farb/p/AspNetMvcSelectList.html

 

ASP.NET MVC中下拉列表的用法很簡單，也很方便，具體來講，主要是頁面上支持兩種Html幫助類的方法:DropDownList()和DropDownListFor()。這篇博文主要做爲我的的一個學習筆記，也爲了方便不少初學Asp.Net Mvc的同窗學習，由於當初本身初學的時候仍是遇到了點小麻煩，因此但願能幫助初學者，老人們可跳過。

目錄

• DropDownList
• DropDownListFor

下面具體看看這兩個方法。
在具體分析這兩個方法以前，先來看一下源代碼截圖：

從圖中能夠看到，今天要說的這兩個方法都位於System.Web.Mvc.Html命名空間下的靜態類SelectExtensions中，而且都是擴展了HtmlHelper類的靜態方法，因此咱們在使用了Rasor引擎的頁面上能夠直接使用@Html.DropDownList()語法，用起來很是爽！

DropDownList()方法

先來看看效果圖，再看代碼：

「數據庫」下拉列表

先來講說這裏的「數據庫」下拉列表指的是下拉列表中的元素來自查詢數據庫中的結果集。
控制器中的邏輯代碼以下：

var provinceList = _provinceAppService.GetProvinces(new ProvinceDto());//從應用服務層查詢省份的結果集 var provinceSelectList = new SelectList(provinceList, "Code", "Name"); ViewData["provinceSelectList"] = provinceSelectList; 

從上面的代碼能夠看出，查出結果集以後，就能夠建立SelectList類的實例，這裏SelectList的構造函數有好幾個重載，這裏只看一個，其餘相似。SelectList的構造函數之一源碼以下。根據類型和名稱不難看出，第一個參數是實現了IEnumerable接口的變量，第二個參數對應的未來生成下拉列表的value屬性的值，第三個參數對應的是Text的值，也就是下拉列表中顯示的值。這裏對於新手來講也許就有點難理解了。其實本質上，這裏是一個數據綁定，也就是說，好比，我這裏讓之後生成的下拉列表的value的屬性值爲「Code」(省份編碼)所對應的值，用圖中的樣子來講，就是北京的value="1",天津的value="2",,,,以此類推，由於省份數據表中的北京和天津的Code字段分別爲1和2。不知道這樣說，好理解嗎？若是很差理解，來個圖：

SelectList源碼以下：

public SelectList(IEnumerable items, string dataValueField, string dataTextField) : this(items, dataValueField, dataTextField, (object) null) { } 

頁面代碼以下：

<div class="margin-bottom-5"> @Html.DropDownList("province", ViewData["provinceSelectList"] as SelectList, "請選擇省份", new { @class = "form-control input-small" }) </div> 

DropDownList對應的源碼爲：

public static MvcHtmlString DropDownList(this HtmlHelper htmlHelper, string name, IEnumerable<SelectListItem> selectList, string optionLabel, object htmlAttributes) { return SelectExtensions.DropDownList(htmlHelper, name, selectList, optionLabel, (IDictionary<string, object>) HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes)); } 

稍微解釋一下源代碼：

• "this HtmlHelper htmlHelper"這是C#中擴展方法的寫法，this關鍵字加類型名，這裏表示擴展的是HtmlHelper類。
• 第二個參數name表示的是生成的下拉列表的id和name的值。第三個表示的是可枚舉的泛型集合，集合中的元素類型是SelectListItem，剛纔咱們在控制器中的SelectList類型符合條件，因此經過as將viewdata轉換成SelectList。
• 第三個optionLable是可選標籤，就是若是沒有選擇時，要顯示的內容，我這裏是「請選擇省份」。
• 第四個參數htmlAttrbutes是一個對象類型的html特性，這裏經過C#中的匿名類來給生成的下拉列表添加特性，好比我這裏添加的class特性。

「硬編碼」式下拉列表

先來看看效果圖：

這裏的下拉列表的數據都是硬編碼到控制器的代碼中。在代碼的格式上稍微不一樣，但本質上是同樣的。
控制器中的代碼以下：

var statusSelectItems = new List<SelectListItem> { new SelectListItem{Text="失聯",Value="0"}, new SelectListItem{Text="正常",Value="1"}, new SelectListItem{Text="維修",Value="2"}, new SelectListItem{Text="維護",Value="3"}, new SelectListItem{Text="下線",Value="4"}, new SelectListItem{Text="其餘",Value="5"}, }; ViewData["statusSelect"] = new SelectList(statusSelectItems, "Value", "Text"); 

總之仍是要建立一個SelectList的實例，構造函數必須傳入一個IEnumerable的泛型集合，而且要知名綁定的字段。
我這裏先是建立了一個IEnumerable的泛型集合，集合中的每個元素都是SelectListItem類型，且都有兩個字段Text和Value，它們的值實際上就是要顯示到html生成的標籤上的，因此在實例化SelectList時就直接綁定到"Value",和"Text"就能夠了。

DropDownListFor()方法

接下來講說DropDownListFor()方法。
通常來講，該方法用於頁面上有綁定模型之時，好比在產品的修改或者建立頁面，咱們都通常會綁定到一個模型，這裏就會使用DropDownListFor()方法；而上面的DropDownList()方法通常用於頁面沒有綁定模型之時。

先來看效果圖：

我這裏是添加產品時，要選擇產品的支付模式，有這麼四種。
控制器代碼的模樣和上面一致：

var payPatternItems = new List<SelectListItem> { new SelectListItem{Text="投幣",Value="0"}, new SelectListItem{Text="投幣+掃碼",Value="1"}, new SelectListItem{Text="僅掃碼",Value="2"}, new SelectListItem{Text="免費",Value="3"}, }; var payPatternSelect = new SelectList(payPatternItems, "Value", "Text"); 

主要看看頁面上的寫法：

<div class="col-md-6"> <div class="form-group"> <label class="control-label col-md-3"> @Html.DisplayNameFor(tDto => tDto.Model) </label> <div class="col-md-8"> @Html.DropDownListFor(tDto => tDto.Model, ViewData["payPatternSelect"] as SelectList, "---請選擇模式---", new { @class = "form-control" }) </div> </div> </div> 

@Html.DisplayNameFor會建立一個lable標籤,能夠看到DropDownListFor的後三個參數咱們上面都說了，只是第一個不同。其實，第一個參數的做用在於，當咱們在選擇下拉列表中的元素後，會將該元素所對應的value值綁定到頁面模型上去，而後提交表單時，能夠將該模型對象直接傳遞到相應的控制器的action中，這一點對於之前使用$.serilize()方法，再在後臺一個個接收參數方便多了。