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 原理相同，請自行測試。