ASP.NET MVC で DropDownList ヘルパーを使用する

作成者 : Rick Anderson

このチュートリアルでは、ASP.NET MVC Web アプリケーションで DropDownList ヘルパーと ListBox ヘルパーを操作する基本について説明します。 Microsoft Visual Studio の無料バージョンである Microsoft Visual Web Developer 2010 Express Service Pack 1 を使用して、このチュートリアルに従うことができます。 開始する前に、以下に示す前提条件がインストールされていることを確認してください。 これらのすべてをインストールするには、 Web プラットフォーム インストーラーのリンクをクリックします。 または、次のリンクを使用して、前提条件を個別にインストールすることもできます。

Visual Web Developer 2010 ではなく Visual Studio 2010 を使用している場合は、次のリンクをクリックして前提条件をインストールします。 Visual Studio 2010 の前提条件。 このチュートリアルでは、 ASP.NET MVC チュートリアルまたは ASP.NETMVC Music Store チュートリアルの概要を完了しているか、MVC 開発 ASP.NET 理解していることを前提としています。 このチュートリアルは、 ASP.NET MVC Music Store チュートリアルの変更されたプロジェクトから始まります。

このトピックでは、完成したチュートリアル 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") または Visual Studio 2010 で StartMusicStore.sln ファイルを開きます。

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、ドラマの場合は 1、コメディの場合は 2、サイエンス フィクションの場合は 3) と表示名 (Action、Drama、Comedy、Science Fiction) が含まれていることがわかります。 上記のコードは、選択リストの標準 HTML です。

選択リストをドラマに変更し、[ 送信 ] ボタンをクリックします。 ブラウザーの URL が で http://localhost:2468/Home/CategoryChosen?MovieType=1 、ページに [ 選択済み: 1] と表示されます。

ブラウザーでの URL の画像

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 >を作成し、テキストと値を設定する最も簡単な<方法を示しています。 ComedySelectListItemSelected プロパティが true に設定されていることに注意してください。これにより、レンダリングされた選択リストに、選択したアイテムとして [Comedy] が表示されます。

上で作成した IEnumerable<SelectListItem > が、MovieType という名前の ViewBag に追加されます。 これは、次に示す DropDownList ヘルパーに IEnumerable<SelectListItem > を暗黙的に渡す方法です。

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>

}

3 行目では、レイアウトを Views/Shared/_Simple_Layout.cshtml に設定します。これは、標準レイアウト ファイルの簡略化されたバージョンです。 これを行って、表示とレンダリングされた HTML をシンプルに保ちます。

このサンプルでは、アプリケーションの状態を変更しないため、HTTP POST ではなく HTTP GET を使用してデータを送信します。 「HTTP GET または POST を選択するためのクイック チェックリスト」の W3C セクションを参照してください。 アプリケーションを変更してフォームを投稿しないため、アクション メソッド、コントローラー、フォーム メソッド (HTTP POST または HTTP GET) を指定できる Html.BeginForm オーバーロードを使用します。 通常、ビューには、パラメーターを受け取っていない Html.BeginForm オーバーロードが含まれています。 no パラメーター バージョンは、同じアクション メソッドとコントローラーの POST バージョンにフォーム データを投稿する既定の設定です。

次の行

@Html.DropDownList("MovieType")

は、DropDownList ヘルパーに文字列引数を渡します。 この例の "MovieType" という文字列は、次の 2 つの処理を行います。

  • ViewBagIEnumerable<SelectListItem > を検索するための DropDownList ヘルパーのキーを提供します。
  • これは、MovieType フォーム要素にデータバインドされます。 submit メソッドが HTTP GET の場合、 MovieType はクエリ文字列になります。 submit メソッドが HTTP POST の場合は、 MovieType メッセージ本文に が追加されます。 次の図は、値が 1 のクエリ文字列を示しています。

値が 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は、4 つのムービーの種類をキャプチャします。 メソッドはSetViewBagMovieType、列挙型から IEnumerable<SelectListItem >をeMovieCategories作成し、 パラメーターから プロパティをSelectedselectedMovie設定します。 アクション メソッドは SelectCategoryEnum 、アクション メソッドと同じビューを SelectCategory 使用します。

[テスト] ページに移動し、リンクを Select Movie Category (Enum) クリックします。 今回は、値 (数値) が表示されるのではなく、列挙型を表す文字列が表示されます。

列挙値の転記

HTML フォームは、通常、サーバーにデータを投稿するために使用されます。 次のコードは、 メソッドの HTTP GET バージョンと HTTP POST バージョンを SelectCategoryEnumPost 示しています。

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) 。 ムービーの種類を選択し、[送信] ボタンをクリックします。 表示には、ムービーの種類の値と名前の両方が表示されます。

ムービーの種類の値と名前の画像

複数セクション選択要素の作成

ListBox HTML ヘルパーは、 属性を使用して HTML <select> 要素をmultipleレンダリングします。これにより、ユーザーは複数の選択を行うことができます。 [テスト] リンクに移動し、[ 国の複数選択 ] リンクを選択します。 レンダリングされた 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 4 つのパラメーターを受け取ります。

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 が表示されるときに国は選択されません。 次のコードは、ビューのレンダリングに使用される Razor マークアップを MultiSelectCountry 示しています。

@{

    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 という 2 つのパラメーターを受け取ります。 上記の ViewBag.YouSelected コードは、フォームの送信時に選択した国の値を表示するために使用されます。 メソッドの HTTP POST オーバーロードを MultiSelectCountry 調べます。

[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 要素をフレンドリにする

Harvest Chosen jQuery プラグインを HTML <select> 要素に追加して、使いやすい UI を作成できます。 次の画像は、Harvest Chosen jQuery プラグインとビューを MultiSelectCountry 示しています。

ハーベスト選択jクエリプラグインの画像

次の 2 つの画像では、 カナダ が選択されています。

選択されたカナダの画像

削除する X で選択されたカナダの画像

上の図では、カナダが選択されており、クリックして選択を削除できる x が含まれています。 次の画像は、カナダ、中国、日本が選択されていることを示しています。

カナダの中国と日本の画像を選択しました

ハーベストが選択したjQueryプラグインをフックする

jQuery の使用経験がある場合は、次のセクションに従う方が簡単です。 jQuery を使用したことがない場合は、次の jQuery チュートリアルのいずれかを試してみてください。

選択したプラグインは、このチュートリアルに付随するスターターおよび完成したサンプル プロジェクトに含まれています。 このチュートリアルでは、jQuery を使用して UI にフックするだけで済みます。 ASP.NET MVC プロジェクトで Harvest Chosen jQuery プラグインを使用するには、次の手順を実行する必要があります。

  1. Github から選択したプラグインをダウンロードします。 この手順は完了です。
  2. 選択したフォルダーを ASP.NET MVC プロジェクトに追加します。 前の手順でダウンロードした [選択済み] プラグインのアセットを [選択済み] フォルダーに追加します。 この手順は完了です。
  3. 選択したプラグインを DropDownList または ListBox HTML ヘルパーにフックします。

選択したプラグインを MultiSelectCountry ビューにフックする。

Views\Home\MultiSelectCountry.cshtml ファイルを開き、 に パラメーターをHtml.ListBox追加htmlAttributesします。 追加するパラメーターには、select list(@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 ビュー エンジンとは関係ありません。 classC# キーワード (keyword)です。 C# キーワードは、プレフィックスとして @ を含めない限り、識別子として使用できません。 上記の例では、 @class は有効な識別子ですが、 クラスキーワード (keyword)であるためではありません

Chosen/chosen.jquery.js ファイルと Chosen/chosen.css ファイルへの参照を追加します。 選択/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 コードで使用されるクラス名を使用して、選択したプラグインをアクティブにします。 上記の例では、クラス名は です chzn-selectViews\Home\MultiSelectCountry.cshtml ビュー ファイルの下部に次の行を追加します。 この行は、選択したプラグインをアクティブにします。

<script >    $(".chzn-select").chosen(); </script>  @*Hookup Chosen Plugin*@

次の行は、jQuery ready 関数を呼び出す構文で、クラス名 が の DOM 要素を選択します chzn-select

$(".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 移動します。 国を追加して削除してみてください。 提供されるサンプル ダウンロードには、ViewBag ではなくビュー モデルを使用して MultiSelectCountry 機能を実装するメソッドとビューも含まれていますMultiCountryVM

次のセクションでは、ASP.NET MVC スキャフォールディング メカニズムが DropDownList ヘルパーと連携する方法について説明します。