2.5 資料列舉清單 - select

ASP.NET MVC 實務精要|第二章 表單

除了簡單的資料輸入,另外還有一個比較複雜的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物件變數,然後利用這個變數初始化Selectlist 物件。

@{ var listItems = new List<SelectListItem>
    {
    new SelectListItem { Text = "MONDAY", Value = "1"},
   
    };
}

另外於 SelectList 建構式中傳入 listItems,並且指定其中作為Value與Text屬性值的欄位名稱,如此一來會建立上述相同的下拉式選單。

@Html.DropDownList("days", new SelectList(listItems, "Value", "Text"))

至於清單格式的 ListBox 原理相同,請自行測試。




沒有留言: