使用 DropDownList 協助程式與 ASP.NET MVC

作者 ：Rick Anderson

本教學課程將教導您在 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 (「Visual Web Developer」 或 「VWD」 開啟 StartMusicStore.sln 檔案，簡短) 或 Visual Studio 2010。

按 CTRL+F5 以執行應用程式，然後按一下 [測試] 連結。

選取 [ 選取電影類別] ([簡單) ] 連結。 [電影類型選取] 清單隨即顯示，並顯示 [Comedy] 選取的值。

在瀏覽器中按一下滑鼠右鍵，然後選取 [檢視來源]。 頁面的 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 for Action，1 for Science Fiction，2 for Comedy，3 for Science Fiction) ，以及一個顯示名稱 (Action、一文、Comedy 和 Science Fiction) 。 上述程式碼是選取清單的標準 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 >的最簡單方式，並填入文字和值。 請注意， ComedySelectListItem的Selected屬性設定為true;這會導致轉譯的選取清單顯示為清單中的選取專案。

上面建立的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 表單元素。 如果送出方法是 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 測試頁面的選取專案。 以滑鼠右鍵按一下瀏覽器視窗，然後選取 檢視來源。 選取清單的 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) 連結。 這次，會顯示代表列舉的字串，而不是顯示 (數位) 的值。

張貼列舉值

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

)

1. items： IEnumerable ，其中包含清單中的專案。 在上述範例中，國家/地區清單。
2. dataValueField：包含值的 IEnumerable 清單中屬性的名稱。 在上述範例中 ID ，屬性。
3. dataTextField： IEnumerable 清單中的屬性名稱，其中包含要顯示的資訊。 在上述範例中 name ，屬性。
4. 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 中選取選取的國家/地區。

使用 [收集選擇的 jQuery 外掛程式] 讓 Select 元素成為易記專案

[收集 選擇 的 jQuery] 外掛程式可以新增至 HTML < 選取 > 專案，以建立使用者易記的 UI。 下圖示范具有檢視的「收集 選擇 的 jQuery 外掛程式 MultiSelectCountry 」。

在下列兩個影像中，已選取 加拿大 。

在上圖中，已選取加拿大，其中包含您可以按一下以移除選取範圍的 x 。 下圖顯示已選取加拿大、中國和日本。

連結收集選擇的 jQuery 外掛程式

如果您有 jQuery 的一些體驗，下一節會比較容易遵循。 如果您之前從未使用過 jQuery，建議您嘗試下列其中一個 jQuery 教學課程。

• jQuery Works by John Resig
• 消費者入門 jQuery by Jörn Zaefferer
• Cody Lindley的jQuery 即時範例

所選外掛程式包含在本教學課程隨附的入門和已完成範例專案中。 在本教學課程中，您只需要使用 jQuery 將它連結至 UI。 若要在 ASP.NET MVC 專案中使用 Harvest Chosen jQuery 外掛程式，您必須：

1. 從 github下載選擇的外掛程式。 此步驟已為您完成。
2. 將 Chosen 資料夾新增至您的 ASP.NET MVC 專案。 將您在上一個步驟中下載的所選外掛程式資產新增至 [選擇] 資料夾。 此步驟已為您完成。
3. 將所選的外掛程式連結至 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();) ，這會連結選擇的外掛程式。

下列程式碼顯示已完成的 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 協助程式搭配運作。

下一步