轉自: http://www.cnblogs.com/farb/p/AspNetMvcSelectList.html
ASP.NET MVC中下拉列表的用法很簡單,也很方便,具體來說,主要是頁面上支持兩種Html幫助類的方法:DropDownList()和DropDownListFor()。這篇博文主要作為個人的一個學習筆記,也為了方便很多初學Asp.Net Mvc的同學學習,因為當初自己初學的時候還是遇到了點小麻煩,所以希望能幫助初學者,老人們可跳過。
目錄
下面具體看看這兩個方法。
在具體分析這兩個方法之前,先來看一下源代碼截圖:
從圖中可以看到,今天要說的這兩個方法都位於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()方法,再在后台一個個接收參數方便多了。