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

[アーティクル]
05/07/2024

このチュートリアルでは、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 Tools Update
SQL Server Compact 4.0 (ランタイム + ツールのサポート)

Visual Web Developer 2010 ではなく Visual Studio 2010 を使用している場合は、Visual Studio 2010 の前提条件のリンクをクリックして、前提条件をインストールします。このチュートリアルは、ASP.NET MVC 入門のチュートリアルか ASP.NET MVC Music Store のチュートリアルを修了していること、または ASP.NET MVC 開発に精通していることを前提としています。このチュートリアルは、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 キーを押してアプリケーションを実行し、[テスト] リンクをクリックします。

アプリケーションテストリンクの画像

[ムービーカテゴリの選択 (シンプル)] リンクを選択します。 [ムービータイプ] の選択リストが表示され、選択した値として [コメディ] が表示されます。

ムービーの種類の選択リストの画像

ブラウザー内を右クリックし、ビューソースを選択します。ページの HTML が表示されます。次のコードは、選択要素の 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] と表示されます。

ブラウザーの U R L の画像

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 ヘルパーに明示的に渡すか、SelectListItem にモデルプロパティと同じ名前を使用して、IEnumerable<SelectListItem > を ViewBag に追加できます。 SelectListItem を暗黙的かつ明示的に渡す方法については、チュートリアルの次の部分で説明します。上記のコードは、IEnumerable<SelectListItem> を作成し、テキストと値を設定する最も簡単な方法を示しています。 ComedySelectListItem の Selected プロパティが true に設定されていることに注意してください。これにより、レンダリングされた選択リストに、選択したリスト内項目として [コメディ] が表示されます。

上記で作成した 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 を使用してデータを送信します。 W3C の HTTP GET または POST を選択するためのクイックチェックリストに関するセクションを参照してください。アプリケーションを変更してフォームを送信しないため、アクションメソッド、コントローラー、フォームメソッド (HTTP POST または HTTP GET) を指定できる Html.BeginForm オーバーロードを使用します。通常、ビューには、パラメーターを取らない Html.BeginForm オーバーロードが含まれます。パラメーターなしのバージョンの既定の設定は、同じアクションメソッドとコントローラーの POST バージョンにフォームデータを送信します。

次の行

@Html.DropDownList("MovieType")

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

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

値が 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");

}

enum eMovieCategoriesは、4 つの映画の種類をキャプチャします。 SetViewBagMovieType メソッドは、eMovieCategories列挙型から IEnumerable<SelectListItem> を作成し、selectedMovie パラメーターから Selected プロパティを設定します。 SelectCategoryEnum アクションメソッドは、SelectCategory アクションメソッドと同じビューを使用します。

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

列挙型値の送信

HTML フォームは、通常、サーバーにデータを送信するために使用されます。次のコードは、SelectCategoryEnumPost メソッドの HTTP GET と 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");

}

POST メソッドに eMovieCategories 列挙型を渡すことで、列挙値と列挙型文字列の両方を抽出できます。サンプルを実行し、[テスト] ページに移動します。 Select Movie Category(Enum Post) リンクをクリックします。ムービーの種類を選択し、[送信] ボタンを押します。ディスプレイには、映画の種類の値と名前の両方が表示されます。

映画の種類の値と名前の画像

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

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 コンストラクターに渡します。上記の GetCountries メソッドで使用される MultiSelectList コンストラクターオーバーロードは、次の 4 つのパラメーターを取ります。

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 という 2 つのパラメーターを取ります。上記の 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 プラグインを使用して選択要素を使いやすくする

Harvest Chosen jQuery プラグインを HTML の<選択>要素に追加して、ユーザーフレンドリな UI を作成できます。次の図は、Harvest Chosen jQuery プラグインと MultiSelectCountry ビューを示しています。

Harvest Chosen j Query プラグインの画像

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

選択されたカナダの画像

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

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

選ばれたカナダの中国と日本の画像

Harvest Chosen jQuery プラグインの接続

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

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

github から Chosen プラグインをダウンロードします。この手順は既に完了しています。
Chosen フォルダーを ASP.NET MVC プロジェクトに追加します。前の手順でダウンロードした Chosen プラグインのアセットを、Chosen フォルダーに追加します。この手順は既に完了しています。
Chosen プラグインを DropDownList または ListBox HTML ヘルパーに接続します。

Chosen プラグインを 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 は有効な識別子ですが、class はそうではありません。class はキーワードであるためです。

Chosen/chosen.jquery.js と Chosen/chosen.css ファイルへの参照を追加します。 Chosen/chosen.jquery.js は、Chosen プラグインの機能を実装します。 Chosen/chosen.css ファイルはスタイルを提供します。 Views\Home\MultiSelectCountry.cshtml ファイルの一番下にこれらの参照を追加します。次のコードは、Chosen プラグインを参照する方法を示しています。

<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 ビューファイルの一番下に次の行を追加します。この行により、Chosen プラグインがアクティブになります。

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

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

$(".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 ヘルパーとどのように連携するかを確認します。

次の方法で共有