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 原理相同，請自行測試。
沒有留言:
張貼留言