SelectListItem與SelectList的用法
一、SelectListItem用法
經由「DropDownList與DropDownListFor的用法」可知使用DropDownList或DropDownListFor時，
會結合多組SelectListItem來當作option tag的選擇項目，
其selectListItem只有三個屬性與建構函式很簡單，例如
new SelectListItem()
{
Text = "apple",
Value = "apple",
Selected = true
}
而多組SelectListItem可以做成List傳給DropDownList來使用，例如
List<SelectListItem> mySelectItemList = new List<SelectListItem>();
mySelectItemList.Add(new SelectListItem()
{
Text = "apple",
Value = "apple",
Selected = false
});
mySelectItemList.Add(new SelectListItem()
{
Text = "banana",
Value = "banana",
Selected = true
});
mySelectItemList.Add(new SelectListItem()
{
Text = "watermelon",
Value = "watermelon",
Selected = false
});
也可以縮短成
List<SelectListItem> mySelectItemList = new List<SelectListItem>();
mySelectItemList.AddRange(new[]{
new SelectListItem() {Text = "apple", Value = "apple", Selected = false},
new SelectListItem() {Text = "banana", Value = "banana", Selected = true},
new SelectListItem() {Text = "watermelon", Value = "watermelon", Selected = false}
});
範例：
Controller為
public ActionResult About()
{
List<SelectListItem> mySelectItemList = new List<SelectListItem>();
mySelectItemList.AddRange(new[]{
new SelectListItem() {Text = "apple", Value = "apple", Selected = false},
new SelectListItem() {Text = "banana", Value = "banana", Selected = true},
new SelectListItem() {Text = "watermelon", Value = "watermelon", Selected = false}
});
return View(mySelectItemList);
}
View為
@model IEnumerable<SelectListItem> @Html.DropDownListFor(m => m.FirstOrDefault().Text, Model)
畫面為
二、SelectList用法
SelectList的建構式有
public SelectList(
IEnumerable items
)
public SelectList(
IEnumerable items,
object selectedValue
)
public SelectList(
IEnumerable items,
object selectedValue,
IEnumerable disabledValues
)
public SelectList(
IEnumerable items,
string dataValueField,
string dataTextField
)
public SelectList(
IEnumerable items,
string dataValueField,
string dataTextField,
object selectedValue
)
public SelectList(
IEnumerable items,
string dataValueField,
string dataTextField,
object selectedValue,
IEnumerable disabledValues
)
public SelectList(
IEnumerable items,
string dataValueField,
string dataTextField,
string dataGroupField,
object selectedValue
)
public SelectList(
IEnumerable items,
string dataValueField,
string dataTextField,
string dataGroupField,
object selectedValue,
IEnumerable disabledValues
)
public SelectList(
IEnumerable items,
string dataValueField,
string dataTextField,
string dataGroupField,
object selectedValue,
IEnumerable disabledValues,
IEnumerable disabledGroups
)
public SelectList(
IEnumerable items
)
說明：Initializes a new instance of the SelectList class by using the specified items for the list.
實例：
Controller為
public ActionResult About()
{
List<SelectListItem> mySelectItemList = new List<SelectListItem>();
mySelectItemList.AddRange(new[]{
new SelectListItem() {Text = "apple", Value = "apple", Selected = false},
new SelectListItem() {Text = "banana", Value = "banana", Selected = true},
new SelectListItem() {Text = "watermelon", Value = "watermelon", Selected = false}
});
SelectList aSelectList = new SelectList(mySelectItemList);
return View(aSelectList.Items);
}
View為
@model IEnumerable<SelectListItem>
@Html.DropDownList("aaa", Model)
說明：
aSelectList.Items的Items屬性是用來取得或設定aSelectList的集合，
以這個例子就是指取得List<SelectListItem>型態的物件。
2、SelectList(IEnumerable, Object)
public SelectList(
IEnumerable items,
object selectedValue
)
說明：Initializes a new instance of the SelectList class by using the specified items for the list and a selected value.
實例：
Controller為
public ActionResult About()
{
List<SelectListItem> mySelectItemList = new List<SelectListItem>();
mySelectItemList.AddRange(new[]{
new SelectListItem() {Text = "apple", Value = "apple", Selected = false},
new SelectListItem() {Text = "banana", Value = "banana", Selected = true},
new SelectListItem() {Text = "watermelon", Value = "watermelon", Selected = false}
});
SelectList aSelectList = new SelectList(mySelectItemList, (object)"watermelon");
return View(aSelectList.Items);
}
View為
@model IEnumerable<SelectListItem>
@Html.DropDownList("aaa", Model)
結果
發現SelectList建構式裡指定(object)"watermelon"都沒用，
只會遵從SelectListItem建構式的設定。
那為何SelectList(IEnumerable, Object)卻失靈了？如何才能使用他？
事後才發現一定要指定dataValueField與dataTextField才可正常動作，
那這不就是第五點建構式嗎？那這個第二點建構式的實用性是什麼？誤導別人？Orz
3、SelectList(IEnumerable, Object, IEnumerable)
public SelectList(
IEnumerable items,
object selectedValue,
IEnumerable disabledValues
)
說明：Initializes a new instance of the SelectList class by using the specified items for the list, the selected value, and the disabled values.
disabled values用來指定哪幾個選項不能選。
實例：交由第六點說明。
4、SelectList(IEnumerable, String, String)
public SelectList(
IEnumerable items,
string dataValueField,
string dataTextField
)
說明：Initializes a new instance of the SelectList class by using the specified items for the list, the data value field, and the data text field.
用來決定誰要當Value、誰要當Text。
實例：交由第六點說明。
5、SelectList(IEnumerable, String, String, Object)
public SelectList(
IEnumerable items,
string dataValueField,
string dataTextField,
object selectedValue
)
說明：Initializes a new instance of the SelectList class by using the specified items for the list, the data value field, the data text field, and a selected value.
實例：此建構式所包含的參數上面已經說明過了，但這裡額外提如何跟Entity Framework配合的應用。
先準備範例資料庫
CREATE TABLE TEST_TABLE ( no TINYINT NOT NULL, name NVARCHAR(20) NOT NULL, age TINYINT NOT NULL, PRIMARY KEY(no) ) GO INSERT TEST_TABLE (no,name,age) VALUES (1,'Bill',39); INSERT TEST_TABLE (no,name,age) VALUES (2,'Mary',20); INSERT TEST_TABLE (no,name,age) VALUES (3,'Junefo',10);
再準備一個空白的WebApplication專案，並從Models資料夾添加一個Entity Model檔案
指定Entity Model檔案名稱
選擇從既有的資料庫建立Entity Model
Model成功後
再來看Controller部份，利用原本已經存在的HomeController改寫就好，黃色為新增的地方
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication1.Models;
namespace WebApplication1.Controllers
{
public class HomeController : Controller
{
testDB2Entities db = new testDB2Entities();
public ActionResult Index()
{
ViewBag.Choose = new SelectList(db.TEST_TABLE, "no", "name", db.TEST_TABLE.Where(a => a.no == 2).First().no);
return View();
}
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
}
}
再來看View的部份，利用原本已經存在的Index.cshtml，整個內容改成下列原始碼
@Html.DropDownList("Choose", null, new { @class = "form-control" })
範例說明：
這個範例的重點在於Index Action裡，我們利用SelectList多載方法
public SelectList(
IEnumerable items,
string dataValueField,
string dataTextField,
object selectedValue
)
但SelectList方法與Entity Framework配合的關係如下圖
由上圖可知，IEnumerable items參數相當於資料表整個資料，
dataValueField與dataTextField所對應的關係就是TEST_TABLE資料表的no與name屬性，
而selectedValue為特別要指定TEST_TABLE資料表單一一筆記錄的指定值，這種關係有點特殊，需注意一下。
再來看DropDownList
@Html.DropDownList("Choose", null, new { @class = "form-control" })
而該DropDownList多載方法可參考下面
public static MvcHtmlString DropDownList(
this HtmlHelper htmlHelper,
string name,
IEnumerable<SelectListItem> selectList,
Object htmlAttributes
)
DropDownList值得注意的是，當只有指定第一個參數name，而第二參數不打算放入資料集(為null)時，
此時第一參數也會擔任匯入資料集功能，DropDownList第一參數指定"Choose"名稱時，
會找尋ViewBag底下動態名稱為Choose的物件，並完成匯入資料集功能，
這種也是有點難理解的地方，需注意一下。
如果要使用第二參數時，則要特別注意第一參數的字串名稱不能和ViewBag底下的動態名稱相同，
也就是Choose名稱，否則DropDownList將無法正確選值，如下範例。
@{
SelectList viewBagChoose = ViewBag.Choose;
}
@Html.DropDownList("viewBagChoose", viewBagChoose, new { @class = "form-control" })
6、SelectList(IEnumerable, String, String, Object, IEnumerable)
public SelectList(
IEnumerable items,
string dataValueField,
string dataTextField,
object selectedValue,
IEnumerable disabledValues
)
說明：Initializes a new instance of the SelectList class by using the specified items for the list, the data value field, the data text field, the selected value, and the disabled values.
實例：
Controller為
public ActionResult About()
{
List<SelectListItem> mySelectItemList = new List<SelectListItem>();
mySelectItemList.AddRange(new[]{
new SelectListItem() {Text = "apple", Value = "apple", Selected = false},
new SelectListItem() {Text = "banana", Value = "banana", Selected = true},
new SelectListItem() {Text = "watermelon", Value = "watermelon", Selected = false},
new SelectListItem() {Text = "guava", Value = "guava", Selected = false}
});
List<string> disable = new List<string>();
disable.AddRange(new[] { "apple", "watermelon" });
SelectList aSelectList = new SelectList(mySelectItemList, "Text", "Value", (object)"watermelon", disable);
return View(aSelectList);
}
View為
@model SelectList
@Html.DropDownList("aaa", Model)
畫面為
說明：
由上例可發現於SelectList建構式指定watermelon物件被選取會比
由SelectListItem建構式指定banana物件被選取的優先權來的高。
7、SelectList(IEnumerable, String, String, String, Object)
public SelectList(
IEnumerable items,
string dataValueField,
string dataTextField,
string dataGroupField,
object selectedValue
)
說明：Initializes a new instance of the SelectList class by using the specified items for the list, the data value field, the data text field, the data group field, and the selected value.
data group field用來指定你要所有item做群組的名稱為何
實例：交由第八點一起說明。
8、SelectList(IEnumerable, String, String, String, Object, IEnumerable)
public SelectList(
IEnumerable items,
string dataValueField,
string dataTextField,
string dataGroupField,
object selectedValue,
IEnumerable disabledValues
)
說明：Initializes a new instance of the SelectList class by using the specified items for the list, the data value field, the data text field, the data group field, the selected value, and the disabled values.
實例：
Model為
namespace WebApplication1.Models
{
public class Class1
{
public string Id { get; set; }
public string name { get; set; }
public string Love { get; set; }
}
}
Controller為
public ActionResult About()
{
List<Class1> LClass1 = new List<Class1>();
LClass1.Add(new Class1() { Id = "appleId", name = "appleName", Love = "like" });
LClass1.Add(new Class1() { Id = "bananaId", name = "bananaName", Love = "like" });
LClass1.Add(new Class1() { Id = "watermelonId", name = "watermelonName", Love = "like" });
LClass1.Add(new Class1() { Id = "Bitter", name = "Bitter", Love = "do not like" });
LClass1.Add(new Class1() { Id = "Durian", name = "Durian", Love = "do not like" });
List<string> disable = new List<string>();
disable.AddRange(new[] { "appleId", "watermelonId" });
SelectList aSelectList = new SelectList(LClass1, "Id", "name", "Love", "bananaId", disable);
return View(aSelectList);
}
View為
@model SelectList @Html.DropDownListFor(m => m.FirstOrDefault().Text, Model)
畫面為
9、SelectList(IEnumerable, String, String, String, Object, IEnumerable, IEnumerable)
public SelectList(
IEnumerable items,
string dataValueField,
string dataTextField,
string dataGroupField,
object selectedValue,
IEnumerable disabledValues,
IEnumerable disabledGroups
)
說明：Initializes a new instance of the SelectList class by using the specified items for the list, the data value field, the data text field, the data group field. the selected value, the disabled values, and the disabled groups.
實例：此建構式所包含的參數上面已經說明過了，故不舉例。
另外有關於MultiSelectList之後有空再舉例吧，因為其用法跟SelectList大同小異而且我也累了。