ASP.NET MVC 實務精要|第二章 表單
除了簡單的資料輸入,另外還有一個比較複雜的HTML元素-select,以清單格式組織並且呈現資料內容,有兩個方法可以在網頁上配置select元素,下表列舉之。
根據不同的方法,你可以選擇以單選的下拉式選單或是多選清單的方式呈現資料內容。DropDownList 於網頁配置一個 select 元素,例如以下的設定:
同前述的TextBox等方法,其中參數name為select標籤的id與name屬性名稱。如果要在其中加入選項元素option,可以配置內容如下:
其中第二個SelectList型態參數,會直接轉換為下拉式選單中的項目如下:
這形成一個下拉式的選單:

若是想要提供多選介面,則必須使用ListBox,考慮以下的配置:
其中設定了MultiSelectList參數,得到以下的select元素內容:
相較於單選的下拉式清單,其中多了multiple屬性,因此形成多選清單資料清單:

這是一個資料清單介面,使用者可以在其中同時選取一個以上的項目。以上的select語法是最簡單的設定方式,相較於文字方塊,select是相對複雜的元素,我們可以進一步設定其屬性參數以調整元素特性。
SelectList繼承自MultiSelectList,後者只提供SelectedValues這個屬性讓我們取得使用者選取的資料項目,這個資料項目可能包含一個以上,因此在ListBox中,我們選擇透過MultiSelectList建立所需的資料內容,SelectList進一步擴充了MultiSelectList屬性,使用者在下拉式選單中選取的單一項目值,可以透過SelectedValue進行存取。
使用SelectListItem 建立清單項目
當你需要進一步設定清單中的項目值時,可以透過SelectListItem 進行設定,每一個SelectListItem 代表一個清單中的資料項目。我們將新修改上述的DropDownList方法,重新撰寫程式碼如下:
SelectListItem讓我們自行設定每一個清單項目所要顯示的文字以及對應的value屬性值,這一段配置會得到以下的結果。
相較前述透過SelectList設定的結果,這裏的清單項目明確設定了value屬性值,這方便我們進一步取得使用者點選的對應資料項目。當然,你依然可以透過SelectList進行SelectListItem的設定,利用選單的資料項目內初始化建立一個List物件變數,然後利用這個變數初始化Selectlist 物件。
另外於 SelectList 建構式中傳入 listItems,並且指定其中作為Value與Text屬性值的欄位名稱,如此一來會建立上述相同的下拉式選單。
至於清單格式的 ListBox 原理相同,請自行測試。
除了簡單的資料輸入,另外還有一個比較複雜的HTML元素-select,以清單格式組織並且呈現資料內容,有兩個方法可以在網頁上配置select元素,下表列舉之。
HtmlHelper方法
|
說明
|
DropDownLsit
|
選取單一元素的下拉式選單。
|
ListBox
|
允許多選的項目清單。
|
根據不同的方法,你可以選擇以單選的下拉式選單或是多選清單的方式呈現資料內容。DropDownList 於網頁配置一個 select 元素,例如以下的設定:
@Html.DropDownList(name)
同前述的TextBox等方法,其中參數name為select標籤的id與name屬性名稱。如果要在其中加入選項元素option,可以配置內容如下:
@Html.DropDownList("days", new SelectList(
new []{
"MONDAY","TUESDAY","WEDNESDAY",
"THUSDAY","FRIDAY","SATURDAY","SUNDAY"
}
)
)
其中第二個SelectList型態參數,會直接轉換為下拉式選單中的項目如下:
<select id="days" name="days"><option>MONDAY</option>
<option>TUESDAY</option>
<option>WEDNESDAY</option>
<option>THUSDAY</option>
<option>FRIDAY</option>
<option>SATURDAY</option>
<option>SUNDAY</option>
</select>
這形成一個下拉式的選單:
若是想要提供多選介面,則必須使用ListBox,考慮以下的配置:
@Html.ListBox("days", new MultiSelectList(
new[] {
"MONDAY", "TUESDAY", "WEDNESDAY",
"THUSDAY", "FRIDAY", "SATURDAY", "SUNDAY"
}
)
)
其中設定了MultiSelectList參數,得到以下的select元素內容:
<select id="days" multiple="multiple" name="days">
<option>MONDAY</option>
<option>TUESDAY</option>
<option>WEDNESDAY</option>
…
</select>
相較於單選的下拉式清單,其中多了multiple屬性,因此形成多選清單資料清單:
這是一個資料清單介面,使用者可以在其中同時選取一個以上的項目。以上的select語法是最簡單的設定方式,相較於文字方塊,select是相對複雜的元素,我們可以進一步設定其屬性參數以調整元素特性。
SelectList繼承自MultiSelectList,後者只提供SelectedValues這個屬性讓我們取得使用者選取的資料項目,這個資料項目可能包含一個以上,因此在ListBox中,我們選擇透過MultiSelectList建立所需的資料內容,SelectList進一步擴充了MultiSelectList屬性,使用者在下拉式選單中選取的單一項目值,可以透過SelectedValue進行存取。
使用SelectListItem 建立清單項目
當你需要進一步設定清單中的項目值時,可以透過SelectListItem 進行設定,每一個SelectListItem 代表一個清單中的資料項目。我們將新修改上述的DropDownList方法,重新撰寫程式碼如下:
@Html.DropDownList("days", new
List<SelectListItem>
{
new
SelectListItem { Text = "MONDAY", Value = "1"},
new
SelectListItem { Text = "TUESDAY", Value = "2"},
new
SelectListItem { Text = "WEDNESDAY", Value = "3"},
new
SelectListItem { Text = "THUSDAY", Value = "4"},
new
SelectListItem { Text = "FRIDAY", Value = "5"},
new
SelectListItem { Text = "SATURDAY", Value = "6"},
new
SelectListItem { Text = "SUNDAY", Value = "7"}
})
SelectListItem讓我們自行設定每一個清單項目所要顯示的文字以及對應的value屬性值,這一段配置會得到以下的結果。
<select id="days"
name="days"><option
value="1">MONDAY</option>
<option
value="2">TUESDAY</option>
<option
value="3">WEDNESDAY</option>
<option
value="4">THUSDAY</option>
<option
value="5">FRIDAY</option>
<option
value="6">SATURDAY</option>
<option
value="7">SUNDAY</option>
</select>
相較前述透過SelectList設定的結果,這裏的清單項目明確設定了value屬性值,這方便我們進一步取得使用者點選的對應資料項目。當然,你依然可以透過SelectList進行SelectListItem的設定,利用選單的資料項目內初始化建立一個List
@{ var listItems = new List<SelectListItem>
{
new SelectListItem { Text = "MONDAY",
Value = "1"},
…
};
}
@Html.DropDownList("days", new
SelectList(listItems, "Value", "Text"))
至於清單格式的 ListBox 原理相同,請自行測試。
沒有留言:
張貼留言