使用 DropDownList 協助程式與 ASP.NET MVC
本教學課程將教導您在 ASP.NET MVC Web 應用程式中使用 DropDownList 協助程式和 ListBox 協助程式的基本概念。 您可以使用 Microsoft Visual Web Developer 2010 Express Service Pack 1，這是免費版本的 Microsoft Visual Studio，以遵循本教學課程。 開始之前，請確定您已安裝下列必要項目。 您可按以下連結安裝所有專案：Web Platform Installer。 或者可使用下列連結個別安裝必要條件：
- Visual Studio Web Developer Express SP1 必要條件
- ASP.NET MVC 3 工具更新
- SQL Server Compact 4.0 (執行階段 + 工作支援)
如果您使用 Visual Studio 2010 而非 Visual Web Developer 2010，請按以下連結安裝必要條件：Visual Studio 2010 必要條件。 本教學課程假設您已完成 ASP.NET MVC 教學課程或 ASP.NET MVC 音樂市集教學課程的簡介，或您已熟悉 ASP.NET MVC 開發。 本教學課程從 ASP.NET MVC音樂市集教學課程中的修改項目開始。
包含已完成教學課程 C# 原始程式碼的 Visual Web Developer 專案隨附於本主題中。 下載。
你將建構什麼
您將建立動作方法和檢視，以使用 DropDownList 協助程式來選取類別。 您也將使用 jQuery 來新增插入類別對話框，此對話框可在需要新類別時使用（例如內容類型或藝術家）。 以下是 [建立] 檢視的螢幕快照，其中顯示新增內容類型和新增藝術家的連結。
您將學習的技能
以下是您將學習的項目：
- 如何使用 DropDownList 協助程式來選取類別數據。
- 如何新增 jQuery 對話框以新增類別。
快速入門
首先，使用下列鏈接下載入門專案。 在 Windows 檔案總管中 ，以滑鼠右鍵按兩下DDL_Starter.zip 檔案，然後選取屬性。 在 [ DDL_Starter.zip屬性 ] 對話框中，選取 [解除封鎖]。
以滑鼠右鍵按兩下DDL_Starter.zip檔案，然後選取 [ 全部 解壓縮] 將檔案解壓縮。 使用 Visual Web Developer 2010 Express 開啟StartMusicStore.sln檔案（簡稱「Visual Web Developer」或「VWD」或 Visual Studio 2010。
按 CTRL+F5 以執行應用程式，然後按兩下 [ 測試] 連結。
選取 [ 選取電影類別 （簡單）] 連結。 [電影類型選取] 列表隨即顯示，並顯示 [喜劇] 選取的值。
在瀏覽器中按下滑鼠右鍵，然後選取 [檢視來源]。 頁面的 HTML 隨即顯示。 下列程式代碼顯示 select 元素的 HTML。
<form action="/Home/CategoryChosen" method="get">
<fieldset>Movie Type <select id="MovieType" name="MovieType">
<option value=""></option>
<option value="0">Action</option>
<option value="1">Drama</option>
<option selected="selected" value="2">Comedy</option>
<option value="3">Science Fiction</option>
</select>
<p><input type="submit" value="Submit" /> </p>
</fieldset>
</form>
您可以看到選取清單中的每個專案都有一個值（0 代表動作，1 代表戲劇，2 代表科幻片，3 代表科幻小說），以及顯示名稱（動作、戲劇、喜劇和科幻小說）。 上述程式代碼是選取清單的標準 HTML。
將選取清單變更為 [戲劇]，然後按 [ 提交] 按鈕。 瀏覽器中的 URL 是 http://localhost:2468/Home/CategoryChosen?MovieType=1 ，而頁面會顯示 [您選取]：1。
開啟 Controllers\HomeController.cs 檔案，並檢查 SelectCategory 方法。
public ActionResult SelectCategory() {
List<SelectListItem> items = new List<SelectListItem>();
items.Add(new SelectListItem { Text = "Action", Value = "0"});
items.Add(new SelectListItem { Text = "Drama", Value = "1" });
items.Add(new SelectListItem { Text = "Comedy", Value = "2", Selected = true });
items.Add(new SelectListItem { Text = "Science Fiction", Value = "3" });
ViewBag.MovieType = items;
return View();
}
用來建立 HTML 選取清單的DropDownList協助程式需要明確或隱含的 IEnumerable<SelectListItem>。 也就是說，您可以明確地將 IEnumerable SelectListItem >傳遞至 DropDownList 協助程式，或者您可以使用與模型屬性相同的名稱，將 IEnumerable<<SelectListItem > 新增至 ViewBag。 本教學課程的下一個部分中會隱含地傳遞 SelectListItem 並明確說明。 上述程式代碼顯示建立 IEnumerable SelectListItem > 的最簡單方式，並填入文字和<值。 Comedy請注意，SelectListItem 的 Selected 屬性設定為 true;這會導致轉譯的選取清單顯示 Comedy 做為清單中選取的專案。
上面建立的 IEnumerable<SelectListItem >會新增至名稱為 MovieType 的 ViewBag。 這就是我們將 IEnumerable SelectListItem > 隱含傳遞至如下所示的 DropDownList 協助程式<的方式。
開啟 Views\Home\SelectCategory.cshtml 檔案，並檢查標記。
@{
ViewBag.Title = "Category Select";
Layout = "~/Views/Shared/_Simple_Layout.cshtml";
}
@using (Html.BeginForm("CategoryChosen", "Home", FormMethod.Get)) {
<fieldset>
Movie Type
@Html.DropDownList("MovieType")
<p>
<input type="submit" value="Submit" />
</p>
</fieldset>
}
第三行會將版面配置設定為 Views/Shared/_Simple_Layout.cshtml，這是標準版面配置檔案的簡化版本。 我們會這麼做，讓顯示和轉譯的 HTML 保持簡單。
在此範例中，我們不會變更應用程式的狀態，因此我們會使用 HTTP GET 而非 HTTP POST 來提交數據。 如需選擇 HTTP GET 或 POST，請參閱 W3C 一節快速檢查清單。 因為我們不會變更應用程式並張貼窗體，所以我們使用 Html.BeginForm 多載，讓我們指定動作方法、控制器和表單方法（HTTP POST 或 HTTP GET）。 檢視通常包含不採用任何參數的 Html.BeginForm 多載。 無參數版本預設會將表單數據張貼至相同動作方法和控制器的 POST 版本。
下面這行
@Html.DropDownList("MovieType")
將字串自變數傳遞至 DropDownList 協助程式。 此字串 「MovieType」 在我們的範例中會執行兩件事：
- 它會提供DropDownList協助程式索引鍵，以在 ViewBag 中尋找 IEnumerable<SelectListItem>。
- 它是數據系結至MovieType窗體專案。 如果 submit 方法是 HTTP GET，
MovieType將會是查詢字串。 如果送出方法是 HTTP POST，MovieType則會在訊息本文中新增。 下圖顯示值為 1 的查詢字串。
下列程式代碼顯示 CategoryChosen 已提交表單的方法。
public ViewResult CategoryChosen(string MovieType) {
ViewBag.messageString = MovieType;
return View("Information");
}
流覽回測試頁面，然後選取 [HTML SelectList ] 連結。 HTML 頁面會轉譯類似簡單 ASP.NET MVC 測試頁面的 select 元素。 以滑鼠右鍵按兩下瀏覽器視窗，然後選取 [檢視來源]。 選取清單的 HTML 標記基本上完全相同。 測試 HTML 頁面，其運作方式就像 ASP.NET MVC 動作方法，並檢視我們先前測試過。
使用列舉改善電影選取清單
如果應用程式中的類別已修正且不會變更，您可以利用列舉，讓您的程式代碼更強固且更容易擴充。 當您新增類別時，會產生正確的類別值。 當您新增類別時，可避免複製並貼上錯誤，但忘記更新類別值。
開啟 Controllers\HomeController.cs 檔案，並檢查下列程式代碼：
public enum eMovieCategories { Action, Drama, Comedy, Science_Fiction };
private void SetViewBagMovieType(eMovieCategories selectedMovie) {
IEnumerable<eMovieCategories> values =
Enum.GetValues(typeof(eMovieCategories))
.Cast<eMovieCategories>();
IEnumerable<SelectListItem> items =
from value in values
select new SelectListItem
{
Text = value.ToString(),
Value = value.ToString(),
Selected = value == selectedMovie,
};
ViewBag.MovieType = items;
}
public ActionResult SelectCategoryEnum() {
SetViewBagMovieType(eMovieCategories.Drama);
return View("SelectCategory");
}
列舉eMovieCategories會擷取四種電影類型。 方法SetViewBagMovieType會從eMovieCategories列舉建立 IEnumerable<SelectListItem>，並從 參數設定 Selected 屬性selectedMovie。 SelectCategoryEnum動作方法會使用與SelectCategory動作方法相同的檢視。
流覽至 [測試] 頁面，然後按兩下 Select Movie Category (Enum) 連結。 這次，會顯示代表列舉的字串，而不是顯示值（number）。
張貼列舉值
HTML 表單通常用來將數據張貼到伺服器。 下列程式代碼顯示 HTTP GET 方法的 SelectCategoryEnumPost 和 HTTP POST 版本。
public ActionResult SelectCategoryEnumPost() {
SetViewBagMovieType(eMovieCategories.Comedy);
return View();
}
[HttpPost]
public ActionResult SelectCategoryEnumPost(eMovieCategories MovieType) {
ViewBag.messageString = MovieType.ToString() +
" val = " + (int)MovieType;
return View("Information");
}
藉由將 eMovieCategories 列舉傳遞至 POST 方法，我們可以擷取列舉值和列舉字串。 執行範例並流覽至 [測試] 頁面。 Select Movie Category(Enum Post)按兩下連結。 選取電影類型，然後按 [提交] 按鈕。 顯示會顯示值和電影類型的名稱。
建立多個區段 Select 元素
ListBox HTML 協助程式會使用 multiple 屬性來轉譯 HTML <select> 元素，讓用戶能夠進行多個選取。 流覽至 [測試] 鏈接，然後選取 [ 多重選取國家/地區 ] 連結。 轉譯的UI可讓您選取多個國家/地區。 在下圖中，會選取加拿大和中國。
檢查 MultiSelectCountry 程式代碼
檢查 Controllers\HomeController.cs 檔案中的下列程式代碼。
private MultiSelectList GetCountries(string[] selectedValues) {
List<Country> Countries = new List<Country>()
{
new Country() { ID = 1, Name= "United States" },
new Country() { ID = 2, Name= "Canada" },
new Country() { ID = 3, Name= "UK" },
new Country() { ID = 4, Name= "China" },
new Country() { ID = 5, Name= "Japan" }
};
return new MultiSelectList(Countries, "ID", "Name", selectedValues);
}
public ActionResult MultiSelectCountry() {
ViewBag.Countrieslist = GetCountries(null);
return View();
}
方法 GetCountries 會建立國家/地區清單，然後將它傳遞給建 MultiSelectList 構函式。 MultiSelectList上述方法中使用的GetCountries建構函式多載採用四個參數：
public MultiSelectList(
IEnumerable items,
string dataValueField,
string dataTextField,
IEnumerable selectedValues
)
- items： 包含清單中專案的 IEnumerable 。 在上述範例中，國家/地區清單。
- dataValueField：包含值的 IEnumerable 清單中的屬性名稱。 在上述範例中，
ID屬性。 - dataTextField：IEnumerable 清單中的屬性名稱，其中包含要顯示的資訊。 在上述範例中，
name屬性。 - selectedValues：選取值的清單。
在上述範例中， MultiSelectCountry 此方法會傳遞 null 所選國家/地區的值，因此UI顯示時不會選取任何國家/地區。 下列程式代碼顯示用來呈現檢視的 MultiSelectCountry Razor 標記。
@{
ViewBag.Title = "MultiSelect Country";
Layout = "~/Views/Shared/_Simple_Layout.cshtml";
}
@if (ViewBag.YouSelected != null) {
<div> You Selected: @ViewBag.YouSelected</div>
}
@using (Html.BeginForm()) {
<fieldset>
<legend>Multi-Select Demo</legend>
<div class="editor-field">
@Html.ListBox("Countries", ViewBag.Countrieslist as MultiSelectList
)
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
上述使用的 HTML 協助程式 ListBox 方法會採用兩個參數：要建立模型系結的屬性名稱，以及 包含選取選項和值的 MultiSelectList 。 上述程式 ViewBag.YouSelected 代碼是用來顯示您提交表單時所選取國家/地區的值。 檢查 方法的 MultiSelectCountry HTTP POST 多載。
[HttpPost]
public ActionResult MultiSelectCountry(FormCollection form) {
ViewBag.YouSelected = form["Countries"];
string selectedValues = form["Countries"];
ViewBag.Countrieslist = GetCountries(selectedValues.Split(','));
return View();
}
ViewBag.YouSelected動態屬性包含針對表單集合中專案取得Countries的選取國家/地區。 在此版本中，GetCountries 方法會傳遞所選國家/地區的清單，因此當檢視顯示時 MultiSelectCountry ，會在UI中選取選取的國家/地區。
使用 Harvest Chosen jQuery 外掛程式讓 Select 元素變得易記
Harvest Chosen jQuery 外掛程式可以新增至 HTML <select> 元素，以建立使用者易記 UI。 下列影像示範具有MultiSelectCountry檢視的 Harvest Chosen jQuery 外掛程式。
在下方的兩個影像中， 會選取加拿大 。
在上圖中，已選取加拿大，其中包含 x，您可以按下以移除選取範圍。 下圖顯示已選取加拿大、中國和日本。
鏈接收穫選擇的 jQuery 外掛程式
如果您有 jQuery 的一些體驗，下一節會更容易遵循。 如果您之前從未使用過 jQuery，您可能想要嘗試下列其中一個 jQuery 教學課程。
選擇的外掛程式包含在本教學課程隨附的入門和已完成範例專案中。 在本教學課程中，您只需要使用 jQuery 將它連結至 UI。 若要在 ASP.NET MVC 專案中使用 Harvest Chosen jQuery 外掛程式，您必須：
- 從 github 下載選擇的外掛程式。 此步驟已為您完成。
- 將 [選擇] 資料夾新增至您的 ASP.NET MVC 專案。 將您在上一個步驟中下載的 [選擇] 外掛程式中的資產新增至 [選擇] 資料夾。 此步驟已為您完成。
- 將所選的外掛程式連結至 DropDownList 或 ListBox HTML 協助程式。
將 [選擇的外掛程式] 連結至 MultiSelectCountry 檢視。
開啟 Views\Home\MultiSelectCountry.cshtml 檔案，並將參數新增htmlAttributes至 Html.ListBox。 您將新增的參數包含選取清單（@class = "chzn-select"） 的類別名稱。 完成的程式代碼如下所示：
<div class="editor-field">
@Html.ListBox("Countries", ViewBag.Countrieslist as MultiSelectList
, new
{
@class = "chzn-select",
data_placeholder = "Choose Countries..."
}
)
</div>
在上述程式代碼中，我們會新增 HTML 屬性和屬性值 class = "chzn-select"。 上述類別的 @ 字元與 Razor 檢視引擎無關。 class是 C# 關鍵詞。 除非 C# 關鍵詞包含 @ 作為前置詞，否則無法作為標識碼使用。 在上述範例中，@class是有效的標識符，但類別不是因為 類別是關鍵詞。
將參考新增至 Chosen/chosen.jquery.js 和 Chosen/chosen.css 檔案。 Chosen/chosen.jquery.js 並實作 Chosen 外掛程式的功能。 選擇/chosen.css檔案會提供樣式。 將這些參考新增至 Views\Home\MultiSelectCountry.cshtml 檔案底部。 下列程式代碼示範如何參考選擇的外掛程式。
<script src="@Url.Content("~/Chosen/chosen.jquery.js")" type="text/javascript"></script><script src="@Url.Content("~/Chosen/chosen.jquery.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Chosen/chosen.css")" rel="stylesheet" type="text/css" />
使用 Html.ListBox 程式代碼中使用的類別名稱來啟動 Chosen 外掛程式。 在上述範例中，類別名稱為 chzn-select。 將下列這一行新增至 Views\Home\MultiSelectCountry.cshtml 檢視檔案的底部。 這一行會啟動選擇的外掛程式。
<script > $(".chzn-select").chosen(); </script> @*Hookup Chosen Plugin*@
下行是呼叫 jQuery 就緒函式的語法，它會選取類別名稱 chzn-select為 的 DOM 元素。
$(".chzn-select")
然後，從上述呼叫傳回的包裝集會套用所選方法 （.chosen();），這會連結 Chosen 外掛程式。
下列程式代碼顯示已完成 的 Views\Home\MultiSelectCountry.cshtml 檢視檔案。
@{
ViewBag.Title = "MultiSelect Country";
Layout = "~/Views/Shared/_Simple_Layout.cshtml";
}
@if (ViewBag.YouSelected != null) {
<div> You Selected: @ViewBag.YouSelected</div>
}
@using (Html.BeginForm()) {
<fieldset>
<legend>Multi-Select Demo</legend>
<div class="editor-field">
@Html.ListBox("Countries", ViewBag.Countrieslist as MultiSelectList
, new
{
@class = "chzn-select"
}
)
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
<script src="@Url.Content("~/Chosen/chosen.jquery.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Chosen/chosen.css")" rel="stylesheet" type="text/css" />
<script > $(".chzn-select").chosen(); </script> @*Hookup Chosen Plugin*@
執行應用程式並流覽至 MultiSelectCountry 檢視。 請嘗試新增和刪除國家/地區。 提供的範例下載也包含 MultiCountryVM 使用檢視模型實作 MultiSelectCountry 功能的方法和檢視，而不是 ViewBag。
在下一節中，您將瞭解 ASP.NET MVC Scaffolding 機制如何與 DropDownList 協助程式搭配運作。