トレーニング
モジュール
ASP.NET Core コントローラーを使用して Web API を作成する - Training
作成、読み取り、更新、削除 (CRUD) 操作をサポートする ASP.NET Core コントローラーを使用して、RESTful サービスを作成します。
このブラウザーはサポートされなくなりました。
Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。
「ASP.NET MVC 4 モデルとデータ アクセス」ハンズオン ラボでは、データベースからデータを読み込んで表示しました。 このハンズオン ラボでは、そのデータを編集する機能をミュージック ストア アプリケーションに追加します。
そのために、まず、アルバムの作成、読み取り、更新、削除 (CRUD) アクションをサポートするコントローラーを作成します。 ASP.NET MVC のスキャフォールディング機能を利用してインデックス ビュー テンプレートを生成し、アルバムのプロパティを HTML テーブルに表示します。 ビューの機能を拡張するために、長い説明を切り捨てるカスタム HTML ヘルパーを追加します。
その後、編集ビューと作成ビューを追加します。これらのビューでは、ドロップダウンなどのフォーム要素を使用して、データベース内のアルバムを変更できます。
最後に、ユーザーがアルバムを削除できるようにします。また、入力を検証して、ユーザーが間違ったデータを入力できないようにします。
このハンズオン ラボは、ASP.NET MVC に関する基本的な知識があることを前提としています。 これまでに ASP.NET MVC を使用したことがない場合は、ASP.NET MVC の基礎に関するハンズオン ラボを確認することをお勧めします。
このラボでは、ソース フォルダーに用意されているサンプル Web アプリケーションに軽微な変更を適用することで、前述の拡張機能と新機能について説明します。
注意
すべてのサンプル コードとスニペットは、Microsoft-Web/WebCampTrainingKit リリースで入手できる Web Camps トレーニング キットに含まれています。 このラボに固有のプロジェクトは、「ASP.NET MVC 4 ヘルパー、フォーム、検証」で入手できます。
このハンズオン ラボでは、次の手順について学習します。
このラボを完了するには、次の項目が必要です:
コード スニペットのインストール
利便性のため、このラボで管理するコードの多くは、Visual Studio コード スニペットとして入手可能です。 コード スニペットをインストールするには、.\Source\Setup\CodeSnippets.vsi ファイルを実行します。
Visual Studio Code スニペットに慣れていない場合、その使用方法については、このドキュメントの付録「付録 B: コード スニペットの使用」を参照してください。
このハンズオン ラボは、次の演習で構成されます。
注意
各演習には、演習を完了した後に得られる、結果のソリューションが含まれる End フォルダーが付帯しています。 このソリューションは、演習の作業についてさらにヘルプが必要な場合に、ガイドとして使用できます。
このラボの推定所要時間: 60 分
この演習では、CRUD 操作をサポートする新しいコントローラーを作成し、その Index アクション メソッドをカスタマイズしてデータベースからアルバムの一覧を返し、最後に ASP.NET MVC のスキャフォールディング機能を利用してインデックス ビュー テンプレートを生成して、アルバムのプロパティを HTML テーブルで表示する方法について学習します。
このタスクでは、CRUD 操作をサポートするために StoreManagerController という新しいコントローラーを作成します。
Source/Ex1-CreatingTheStoreManagerController/Begin/ フォルダーにある Begin ソリューションを開きます。
作業の続行前に、いくつかの不足している NuGet パッケージをダウンロードする必要があります。 これを行うには、[プロジェクト] メニューをクリックし、[NuGet パッケージの管理] を選択します。
[NuGet パッケージの管理] ダイアログで、[復元] をクリックして、不足しているパッケージをダウンロードします。
最後に、[ビルド] | [ソリューションのビルド] をクリックしてソリューションをビルドします。
注意
NuGet を使用する利点の 1 つは、プロジェクト内のすべてのライブラリを発送する必要がなく、プロジェクト サイズが縮小される点です。 NuGet Power Tools では、Packages.config ファイルでパッケージのバージョンを指定することで、プロジェクトを初回実行するときに必要なすべてのライブラリをダウンロードできます。 このラボから既存のソリューションを開いた後に、これらの手順を実行する必要があるのは、このような理由によります。
新しいコントローラーを追加します。 これを行うには、ソリューション エクスプローラー内の Controllers フォルダーを右クリックし、[追加] を選択して、[コントローラー] コマンドを選択します。 Controller Name を StoreManagerController に変更し空の読み取り/書き込みアクションMVC コントローラーのオプションが選択されていることを確認。 追加をクリックします。
"[コントローラーの追加] ダイアログ"
新しい Controller クラスが生成されます。 読み取り/書き込み用のアクションを追加するように指定したので、それらのアクションのスタブ メソッド、共通の CRUD アクションが TODO コメント付きで作成され、アプリケーション固有のロジックを含めるように求めるメッセージが表示されます。
このタスクでは、データベースからアルバムの一覧を含むビューを返すように StoreManager インデックス アクション メソッドをカスタマイズします。
StoreManagerController クラスで、次の using ディレクティブを追加します。
(コード スニペット - "ASP.NET MVC 4 ヘルパーとフォームおよび検証 - Ex1 using MvcMusicStore")
using System.Data;
using System.Data.Entity;
using MvcMusicStore.Models;
StoreManagerController に、MusicStoreEntities のインスタンスを保持するフィールドを追加します。
(コード スニペット - "ASP.NET MVC 4 ヘルパーとフォームおよび検証 - Ex1 MusicStoreEntities")
public class StoreManagerController : Controller
{
private MusicStoreEntities db = new MusicStoreEntities();
アルバムの一覧を含むビューを返す StoreManagerController インデックス アクションを実装します。
このコントローラー アクション ロジックは、前述の StoreController の Index アクションによく似ています。 LINQ を使用して、表示するジャンルとアーティストの情報を含むすべてのアルバムを取得します。
(コード スニペット - "ASP.NET MVC 4 ヘルパーとフォームおよび検証 - Ex1 StoreManagerController インデックス")
//
// GET: /StoreManager/
public ActionResult Index()
{
var albums = this.db.Albums.Include(a => a.Genre).Include(a => a.Artist)
.OrderBy(a => a.Price);
return this.View(albums.ToList());
}
このタスクでは、StoreManager コントローラーによって返されたアルバムの一覧を表示するインデックス ビュー テンプレートを作成します。
[ビューの追加] ダイアログで使用する Album クラスを認識できるようにするため、新しいビュー テンプレートを作成する前に、プロジェクトをビルドする必要があります。 [Build | Build MvcMusicStore] (ビルド | MvcMusicStore をビルド) を選択して、プロジェクトをビルドします。
Index アクション メソッド内を右クリックして、[ビューの追加] を選択します。 これにより [ビューの追加] ダイアログが表示されます。
"Index メソッド内からのビューの追加"
[ビューの追加] ダイアログで、[ビュー名] が [インデックス] であることを確認します。 [厳密に型指定されたビューを作成する] オプションを選択し、[モデル クラス] ドロップダウンから [アルバム (MvcMusicStore.Models)] を選択します。 [スキャフォールディング テンプレート] ドロップダウンから [List] (リスト) を選択します。 [ビュー エンジン] は [Razor] に、他のフィールドは既定値のままにして、[追加] をクリックします。
インデックス ビューの追加
このタスクでは、目的のフィールドが表示されるようにするため、ASP.NET MVC スキャフォールディング機能を使用して作成された単純なビュー テンプレートを調整します。
注意
ASP.NET MVC 内のスキャフォールディング サポートにより、アルバム モデル内のすべてのフィールドを一覧表示する単純なビュー テンプレートが生成されます。 スキャフォールディングを使用すると、厳密に型指定されたビューを簡単に開始できます。ビュー テンプレートを手作業で作成する必要はなく、スキャフォールディングによって既定のテンプレートが迅速に生成され、生成されたコードをユーザーが変更できます。
作成されたコードを確認します。 生成されたフィールドの一覧は、スキャフォールディングで表形式データの表示に使用されている次の HTML テーブルの一部になります。
@model IEnumerable<MvcMusicStore.Models.Album>
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table>
<tr>
<th>
@Html.DisplayNameFor(model => model.GenreId)
</th>
<th>
@Html.DisplayNameFor(model => model.ArtistId)
</th>
<th>
@Html.DisplayNameFor(model => model.Title)
</th>
<th>
@Html.DisplayNameFor(model => model.Price)
</th>
<th>
@Html.DisplayNameFor(model => model.AlbumArtUrl)
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.GenreId)
</td>
<td>
@Html.DisplayFor(modelItem => item.ArtistId)
</td>
<td>
@Html.DisplayFor(modelItem => item.Title)
</td>
<td>
@Html.DisplayFor(modelItem => item.Price)
</td>
<td>
@Html.DisplayFor(modelItem => item.AlbumArtUrl)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
@Html.ActionLink("Details", "Details", new { id=item.AlbumId }) |
@Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
</td>
</tr>
}
</table>
[ジャンル]、[アーティスト]、[アルバム タイトル]、[価格] フィールドのみが表示されるようにするため、<table> コードを次のコードに置き換えます。 これにより、AlbumId 列と Album Art URL 列が削除されます。 また、Artist.Name および Genre.Name のリンクされたクラス プロパティを表示するために GenreId 列と ArtistId 列が変更され、Details リンクは削除されます。
<table>
<tr>
<th></th>
<th>Genre</th>
<th>Artist</th>
<th>Title</th>
<th>Price</th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
@Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
</td>
<td>
@Html.DisplayFor(modelItem => item.Genre.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Artist.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Title)
</td>
<td>
@Html.DisplayFor(modelItem => item.Price)
</td>
</tr>
}
</table>
次の説明を変更します。
@model IEnumerable<MvcMusicStore.Models.Album>
@{
ViewBag.Title = "Store Manager - All Albums";
}
<h2>Albums</h2>
このタスクでは、前の手順の設計に従って、 StoreManager Index View テンプレートにアルバムの一覧が表示されることをテストします。
F5 キーを押してアプリケーションを実行します。
プロジェクトはホーム ページから開始します。 URL を /StoreManager に変更して、アルバムの一覧が表示され、[タイトル]、[タイトル]、および [ジャンル] が表示されることを確認します。
"アルバムの一覧の画面"
StoreManager のインデックス ページには、1 つの潜在的な問題があります。それは、[タイトル] プロパティと [アーティスト名] プロパティの長さが、どちらもテーブルの書式設定を崩す長さになりうることです。 この演習では、カスタム HTML ヘルパーを追加して、テキストを切り詰める方法について学習します。
次の図では、ブラウザー サイズが小さい場合に、テキストの長さが原因で書式設定が変更されている様子を確認できます。
テキストが切り詰められていないアルバムの一覧の画面
このタスクでは、ASP.NET MVC ビュー内で公開されている HTML オブジェクトに新しい Truncate メソッドを追加します。 これを行うには、ASP.NET MVC によって提供されている組み込みの System.Web.Mvc.HtmlHelper クラスに拡張メソッドを実装します。
注意
拡張メソッドの詳細については、次の msdn の記事を参照してください。 https://msdn.microsoft.com/library/bb383977.aspx.
Source/Ex2-AddingAnHTMLHelper/Begin/ フォルダーにある Begin ソリューションを開きます。 または、前の演習を完了して取得した End ソリューションを引き続き使用できます。
提供された Begin ソリューションを開いた場合は、続行する前に、不足している NuGet パッケージをダウンロードする必要があります。 これを行うには、[プロジェクト] メニューをクリックし、[NuGet パッケージの管理] を選択します。
[NuGet パッケージの管理] ダイアログで、[復元] をクリックして、不足しているパッケージをダウンロードします。
最後に、[ビルド] | [ソリューションのビルド] をクリックしてソリューションをビルドします。
注意
NuGet を使用する利点の 1 つは、プロジェクト内のすべてのライブラリを発送する必要がなく、プロジェクト サイズが縮小される点です。 NuGet Power Tools では、Packages.config ファイルでパッケージのバージョンを指定することで、プロジェクトを初回実行するときに必要なすべてのライブラリをダウンロードできます。 このラボから既存のソリューションを開いた後に、これらの手順を実行する必要があるのは、このような理由によります。
StoreManager のインデックス ビューを開きます。 これを行うには、ソリューション エクスプローラーで Views フォルダー、StoreManager の順に展開して、Index.cshtml ファイルを開きます。
次のコードを @model ディレクティブの下に追加して、Truncate ヘルパー メソッドを定義します。
@model IEnumerable<MvcMusicStore.Models.Album>
@helper Truncate(string input, int length)
{
if (input.Length <= length) {
@input
} else {
@input.Substring(0, length)<text>...</text>
}
}
@{
ViewBag.Title = "Store Manager - All Albums";
}
<h2>Albums</h2>
このタスクでは、Truncate メソッドを使用して、ビュー テンプレート内のテキストを切り詰めます。
StoreManager のインデックス ビューを開きます。 これを行うには、ソリューション エクスプローラーで Views フォルダー、StoreManager の順に展開して、Index.cshtml ファイルを開きます。
[アーティスト名] とアルバムの [タイトル] を表示する行を置き換えます。 これを行うには、次の行を置き換えます。
<tr>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
@Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
</td>
<td>
@Html.DisplayFor(modelItem => item.Genre.Name)
</td>
<td>
@Truncate(item.Artist.Name, 25)
</td>
<td>
@Truncate(item.Title, 25)
</td>
<td>
@Html.DisplayFor(modelItem => item.Price)
</td>
</tr>
このタスクでは、 StoreManager Index View テンプレートがアルバムのタイトルとアーティスト名を切り捨てることをテストします。
F5 キーを押してアプリケーションを実行します。
プロジェクトはホーム ページから開始します。 URL を /StoreManager に変更して、[タイトル] 列と [アーティスト] 列の長いテキストが切り詰められていることを確認します。
"切り詰められた [タイトル] と [アーティスト名]"
この演習では、ストア マネージャーでアルバムを編集できるようにするフォームの作成方法について学習します。 ストア マネージャーは、/StoreManager/Edit/id URL (編集するアルバムの一意の ID である id) を参照するので、サーバーに対して HTTP-GET 呼び出しを行います。
Controller Edit アクション メソッドは、データベースから適切なアルバムを取得して、そのアルバムを (アーティストおよびジャンルの一覧と共に) カプセル化する StoreManagerViewModel オブジェクトを作成し、そのオブジェクトをビュー テンプレートに渡して、ユーザーに表示される HTML ページをレンダリングします。 このページには、アルバム プロパティを編集するためのテキスト ボックスとドロップダウンを持つ <form> 要素が含まれています。
ユーザーがアルバム フォームの値を更新して、[保存] ボタンをクリックすると、HTTP-POST 呼び出しを介して /StoreManager/Edit/id に変更が送信されます。URL は前回の呼び出しと同じですが、ASP.NET MVC で今回の呼び出しが HTTP-POST であることを識別しているため、別の Edit アクション メソッド ([HttpPost] で修飾されたメソッド) が実行されます。
このタスクでは、データベースから適切なアルバムと、すべてのジャンルおよびアーティストの一覧を取得する HTTP-GET バージョンの Edit アクション メソッドを実装します。 このメソッドは、取得したデータを最後の手順で定義された StoreManagerViewModel オブジェクトにパッケージ化し、次のそのオブジェクトが View テンプレートに渡されて、応答がレンダリングされます。
Source/Ex3-CreatingTheEditView/Begin/ フォルダーにある Begin ソリューションを開きます。 または、前の演習を完了して取得した End ソリューションを引き続き使用できます。
提供された Begin ソリューションを開いた場合は、続行する前に、不足している NuGet パッケージをダウンロードする必要があります。 これを行うには、[プロジェクト] メニューをクリックし、[NuGet パッケージの管理] を選択します。
[NuGet パッケージの管理] ダイアログで、[復元] をクリックして、不足しているパッケージをダウンロードします。
最後に、[ビルド] | [ソリューションのビルド] をクリックしてソリューションをビルドします。
注意
NuGet を使用する利点の 1 つは、プロジェクト内のすべてのライブラリを発送する必要がなく、プロジェクト サイズが縮小される点です。 NuGet Power Tools では、Packages.config ファイルでパッケージのバージョンを指定することで、プロジェクトを初回実行するときに必要なすべてのライブラリをダウンロードできます。 このラボから既存のソリューションを開いた後に、これらの手順を実行する必要があるのは、このような理由によります。
StoreManagerController クラスを開きます。 これを行うには、Controllers フォルダーを展開して、StoreManagerController.cs をダブルクリックします。
HTTP-GET Edit アクション メソッドを次のコードに置き換えて、適切な [アルバム] と、[ジャンル] および [アーティスト] の一覧を取得します。
(コード スニペット - "ASP.NET MVC 4 ヘルパーとフォームおよび検証 - Ex3 StoreManagerController HTTP-GET Edit アクション")
public ActionResult Edit(int id)
{
Album album = this.db.Albums.Find(id);
if (album == null)
{
return this.HttpNotFound();
}
this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);
return this.View(album);
}
注意
System.Collections.Generic リストの代わりに、アーティストとジャンルのSystem.Web.Mvc SelectList を使用しています。
SelectList は、HTML ドロップダウンを設定し、現在の選択内容などを管理するためのよりクリーンな方法です。 コントローラー アクションでこれらの ViewModel オブジェクトをインスタンス化して後で設定することにより、よりクリーンな編集フォーム シナリオを実現できます。
このタスクでは、後でアルバムのプロパティ表示に使用する編集ビュー テンプレートを作成します。
編集ビューを作成します。 これを行うには、Edit アクション メソッド内を右クリックして、[ビューの追加] を選択します。
[ビューの追加] ダイアログで、[ビュー名] が [編集] であることを確認します。 [厳密に型指定されたビューを作成する] チェックボックスをオンにし、[データ クラスの表示] ドロップダウンから [アルバム (MvcMusicStore.Models)] を選択します。 [スキャフォールディング テンプレート] ドロップダウンから [編集] を選択します。 他のフィールドは既定値のままにして、[追加] をクリックします。
"編集ビューの追加"
このタスクでは、パラメーターとして渡されたアルバムのプロパティの値が StoreManager Edit View ページに表示されることをテストします。
F5 キーを押してアプリケーションを実行します。
プロジェクトはホーム ページから開始します。 URL を /StoreManager/Edit/1 に変更して、渡されたアルバムのプロパティの値が表示されることを確認します。
アルバムの編集ビューの画面
このタスクでは、ユーザーがアーティストとジャンルの一覧から選択できるように、最後のタスクで作成したビュー テンプレートにドロップダウンを追加します。
すべての [アルバム] フィールドセット コードを次のように置き換えます。
<fieldset>
<legend>Album</legend>
@Html.HiddenFor(model => model.AlbumId)
<div class="editor-label">
@Html.LabelFor(model => model.Title)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Title)
@Html.ValidationMessageFor(model => model.Title)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Price)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Price)
@Html.ValidationMessageFor(model => model.Price)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.AlbumArtUrl)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.AlbumArtUrl)
@Html.ValidationMessageFor(model => model.AlbumArtUrl)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Artist)
</div>
<div class="editor-field">
@Html.DropDownList("ArtistId", (SelectList) ViewData["Artists"])
@Html.ValidationMessageFor(model => model.ArtistId)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Genre)
</div>
<div class="editor-field">
@Html.DropDownList("GenreId", (SelectList) ViewData["Genres"])
@Html.ValidationMessageFor(model => model.GenreId)
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
注意
アーティストとジャンルを選択するためのドロップダウンをレンダリングするため、Html.DropDownList ヘルパーが追加されています。 Html.DropDownList に渡されるパラメーターは次のとおりです。
このタスクでは、 StoreManager Edit View ページに、アーティストとジャンル ID のテキスト フィールドの代わりにドロップダウンが表示されることをテストします。
F5 キーを押してアプリケーションを実行します。
プロジェクトはホーム ページから開始します。 URL を /StoreManager/Edit/1 に変更して、アーティストとジャンルの ID テキスト フィールドの代わりにドロップダウンが表示されることを確認します。
アルバムの編集ビューの画面 (今回はドロップダウン付き)
編集ビューが期待どおりに表示されたので、HTTP-POST Edit アクション メソッドを実装して、アルバムに加えられた変更を保存する必要があります。
必要に応じてブラウザーを閉じ、Visual Studio ウィンドウに戻ります。 Controllers フォルダーから StoreManagerController を開きます。
HTTP-POST Edit アクション メソッド コードを次のコードに置き換えます (置き換える必要があるメソッドは、2 つのパラメーターを受け取るオーバーロードされたバージョンであることに注意してください)。
(コード スニペット - "ASP.NET MVC 4 ヘルパーとフォームおよび検証 - Ex3 StoreManagerController HTTP-POST Edit アクション")
[HttpPost]
public ActionResult Edit(Album album)
{
if (ModelState.IsValid)
{
this.db.Entry(album).State = EntityState.Modified;
this.db.SaveChanges();
return this.RedirectToAction("Index");
}
this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);
return this.View(album);
}
注意
このメソッドは、ユーザーがビューの [保存] ボタンをクリックして、フォーム値の HTTP-POST をサーバーに返し、それらの値をデータベースに保持するときに実行されます。 デコレーター [HttpPost] は、そのメソッドをこれらの HTTP-POST シナリオで使用する必要があることを示しています。 このメソッドは Album オブジェクトを受け取ります。 ASP.NET MVC は、POST された <form> の値から Album オブジェクトを自動的に作成します。
このメソッドは、次の手順を実行します。
モデルが有効な場合:
モデルが有効でない場合は、ViewBag に GenreId と ArtistId を設定し、受け取った Album オブジェクトを含むビューを返して、ユーザーが必要な更新を実行できるようにします。
このタスクでは、StoreManager の [編集] ビュー ページで、更新されたアルバム データがデータベースに実際に保存されることをテストします。
F5 キーを押してアプリケーションを実行します。
プロジェクトはホーム ページから開始します。 URL を /StoreManager/Edit/1 に変更します。 アルバムのタイトルを「Load」に変更し、[保存] をクリックします。 アルバムのタイトルがアルバムの一覧で実際に変更されたことを確認します。
"アルバムの更新"
StoreManagerController で [編集] 機能がサポートされたので、この演習では、[作成] ビュー テンプレートを追加して、ストア マネージャーで新しいアルバムをアプリケーションに追加できるようにする方法について学習します。
編集機能のときと同様に、StoreManagerController クラス内で 2 つの異なるメソッドを使用して作成シナリオを実装します。
このタスクでは、HTTP-GET バージョンの Create アクション メソッドを実装して、すべてのジャンルおよびアーティストの一覧を取得して、そのデータを StoreManagerViewModel オブジェクトにパッケージ化し、そのオブジェクトがビュー テンプレートに渡されるようにします。
Source/Ex4-AddingACreateView/Begin/ フォルダーにある Begin ソリューションを開きます。 または、前の演習を完了して取得した End ソリューションを引き続き使用できます。
提供された Begin ソリューションを開いた場合は、続行する前に、不足している NuGet パッケージをダウンロードする必要があります。 これを行うには、[プロジェクト] メニューをクリックし、[NuGet パッケージの管理] を選択します。
[NuGet パッケージの管理] ダイアログで、[復元] をクリックして、不足しているパッケージをダウンロードします。
最後に、[ビルド] | [ソリューションのビルド] をクリックしてソリューションをビルドします。
注意
NuGet を使用する利点の 1 つは、プロジェクト内のすべてのライブラリを発送する必要がなく、プロジェクト サイズが縮小される点です。 NuGet Power Tools では、Packages.config ファイルでパッケージのバージョンを指定することで、プロジェクトを初回実行するときに必要なすべてのライブラリをダウンロードできます。 このラボから既存のソリューションを開いた後に、これらの手順を実行する必要があるのは、このような理由によります。
StoreManagerController クラスを開きます。 これを行うには、Controllers フォルダーを展開して、StoreManagerController.cs をダブルクリックします。
Create アクション メソッド コードを次のように置き換えます。
(コード スニペット - "ASP.NET MVC 4 ヘルパーとフォームおよび検証 - Ex4 StoreManagerController HTTP-GET Create アクション")
//
// GET: /StoreManager/Create
public ActionResult Create()
{
this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name");
this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name");
return this.View();
}
このタスクでは、新しい (空の) アルバム フォームを表示する作成ビュー テンプレートを追加します。
Create アクション メソッド内を右クリックして、[ビューの追加] を選択します。 これにより、[ビューの追加] ダイアログが表示されます。
[ビューの追加] ダイアログで、[ビュー名] が [作成] であることを確認します。 [厳密に型指定されたビューを作成する] オプションを選択し、[モデル クラス] ドロップダウンから [アルバム (MvcMusicStore.Models)] を選択し、[スキャフォールディング テンプレート] ドロップダウンから [作成] を選択します。 他のフィールドは既定値のままにして、[追加] をクリックします。
"作成ビューの追加"
次のようにして、ドロップダウン リストを使用するように GenreId フィールドと ArtistId フィールドを更新します。
...
<fieldset>
<legend>Album</legend>
<div class="editor-label">
@Html.LabelFor(model => model.GenreId, "Genre")
</div>
<div class="editor-field">
@Html.DropDownList("GenreId", String.Empty)
@Html.ValidationMessageFor(model => model.GenreId)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.ArtistId, "Artist")
</div>
<div class="editor-field">
@Html.DropDownList("ArtistId", String.Empty)
@Html.ValidationMessageFor(model => model.ArtistId)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Title)
</div>
...
このタスクでは、 StoreManager Create View ページに空のアルバム フォームが表示されることをテストします。
F5 キーを押してアプリケーションを実行します。
プロジェクトはホーム ページから開始します。 URL を /StoreManager/Create に変更します。 新しい Album プロパティに入力するための空のフォームが表示されていることを確認します。
"空のフォームを含む [作成] ビュー"
このタスクでは、ユーザーが [保存] ボタンをクリックしたときに呼び出される HTTP-POST バージョンの Create アクション メソッドを実装します。 このメソッドは、新しいアルバムをデータベースに保存します。
必要に応じてブラウザーを閉じ、Visual Studio ウィンドウに戻ります。 StoreManagerController クラスを開きます。 これを行うには、Controllers フォルダーを展開して、StoreManagerController.cs をダブルクリックします。
HTTP-POST Create アクション メソッド コードを次のように置き換えます。
(コード スニペット - "ASP.NET MVC 4 ヘルパーとフォームおよび検証 - Ex4 StoreManagerController HTTP- POST Create アクション")
[HttpPost]
public ActionResult Create(Album album)
{
if (ModelState.IsValid)
{
this.db.Albums.Add(album);
this.db.SaveChanges();
return this.RedirectToAction("Index");
}
this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);
return this.View(album);
}
注意
この Create アクションは、前の Edit アクション メソッドとかなり似ていますが、オブジェクトを変更済みとして設定する代わりに、コンテキストに追加されます。
このタスクでは、StoreManager の [作成] ビュー ページで新しいアルバムを作成でき、その後に StoreManager インデックス ビューにリダイレクトされることをテストします。
F5 キーを押してアプリケーションを実行します。
プロジェクトはホーム ページから開始します。 URL を /StoreManager/Create に変更します。 次の図のようにして、すべてのフォーム フィールドに新しいアルバムのデータを入力します。
"アルバムの作成"
前の手順で作成した新しいアルバムを含む StoreManager インデックス ビューにリダイレクトされることを確認します。
"新しいアルバムの作成完了"
アルバムを削除する機能はまだ実装されていません。 この演習では、アルバムの削除機能について学習します。 前と同様に、StoreManagerController クラス内で 2 つの異なるメソッドを使用して削除シナリオを実装します。
このタスクでは、HTTP-GET バージョンの Delete アクション メソッドを実装して、アルバムの情報を取得します。
Source/Ex5-HandlingDeletion/Begin/ フォルダーにある Begin ソリューションを開きます。 または、前の演習を完了して取得した End ソリューションを引き続き使用できます。
提供された Begin ソリューションを開いた場合は、続行する前に、不足している NuGet パッケージをダウンロードする必要があります。 これを行うには、[プロジェクト] メニューをクリックし、[NuGet パッケージの管理] を選択します。
[NuGet パッケージの管理] ダイアログで、[復元] をクリックして、不足しているパッケージをダウンロードします。
最後に、[ビルド] | [ソリューションのビルド] をクリックしてソリューションをビルドします。
注意
NuGet を使用する利点の 1 つは、プロジェクト内のすべてのライブラリを発送する必要がなく、プロジェクト サイズが縮小される点です。 NuGet Power Tools では、Packages.config ファイルでパッケージのバージョンを指定することで、プロジェクトを初回実行するときに必要なすべてのライブラリをダウンロードできます。 このラボから既存のソリューションを開いた後に、これらの手順を実行する必要があるのは、このような理由によります。
StoreManagerController クラスを開きます。 これを行うには、Controllers フォルダーを展開して、StoreManagerController.cs をダブルクリックします。
[削除] コントローラー アクションは、前の [ストアの詳細] コントローラー アクションとまったく同じです。このアクションは、URL で指定された id を使用してデータベースから album オブジェクトにクエリを実行し、適切なビューを返します。 これを行うには、HTTP-GET Delete アクション メソッドのコードを次のように置き換えます。
(コード スニペット - "ASP.NET MVC 4 ヘルパーとフォームおよび検証 - Ex5 Handling Deletion HTTP-GET Delete アクション")
//
// GET: /StoreManager/Delete/5
public ActionResult Delete(int id)
{
Album album = this.db.Albums.Find(id);
if (album == null)
{
return this.HttpNotFound();
}
return this.View(album);
}
Delete アクション メソッド内を右クリックして、[ビューの追加] を選択します。 これにより、[ビューの追加] ダイアログが表示されます。
[ビューの追加] ダイアログで、[ビュー名] が [削除] であることを確認します。 [厳密に型指定されたビューを作成する] オプションを選択し、[モデル クラス] ドロップダウンから [アルバム (MvcMusicStore.Models)] を選択します。 [スキャフォールディング テンプレート] ドロップダウンから [削除] を選択します。 他のフィールドは既定値のままにして、[追加] をクリックします。
"削除ビューの追加"
削除テンプレートには、モデルのすべてのフィールドが表示されます。 ここでは、アルバムのタイトルのみが表示されるようにします。 これを行うには、ビューの内容を次のコードに置き換えます。
@model MvcMusicStore.Models.Album
@{
ViewBag.Title = "Delete";
}
<h2>Delete Confirmation</h2>
<h3> Are you sure you want to delete the album title <strong>@Model.Title </strong> ? </h3>
@using (Html.BeginForm()) {
<p>
<input type="submit" value="Delete" /> |
@Html.ActionLink("Back to List", "Index")
</p>
}
このタスクでは、 StoreManager Delete View ページに確認削除フォームが表示されることをテストします。
F5 キーを押してアプリケーションを実行します。
プロジェクトはホーム ページから開始します。 URL を /StoreManager に変更します。 [削除] をクリックして削除するアルバムを 1 つ選択し、新しいビューがアップロードされていることを確認します。
"アルバムの削除"
このタスクでは、ユーザーが [削除] ボタンをクリックしたときに呼び出される HTTP-POST バージョンの Delete アクション メソッドを実装します。 このメソッドは、データベース内のアルバムを削除します。
必要に応じてブラウザーを閉じ、Visual Studio ウィンドウに戻ります。 StoreManagerController クラスを開きます。 これを行うには、Controllers フォルダーを展開して、StoreManagerController.cs をダブルクリックします。
HTTP-POST Delete アクション メソッド コードを次のように置き換えます。
(コード スニペット - "ASP.NET MVC 4 ヘルパーとフォームおよび検証 - Ex5 Handling Deletion HTTP-POST Delete アクション")
//
// POST: /StoreManager/Delete/5
[HttpPost]
public ActionResult Delete(int id, FormCollection collection)
{
Album album = this.db.Albums.Find(id);
this.db.Albums.Remove(album);
this.db.SaveChanges();
return this.RedirectToAction("Index");
}
このタスクでは、StoreManager の [削除] ビュー ページでアルバムを削除でき、その後に StoreManager インデックス ビューにリダイレクトされることをテストします。
F5 キーを押してアプリケーションを実行します。
プロジェクトはホーム ページから開始します。 URL を /StoreManager に変更します。 [削除] をクリックして、削除するアルバムを 1 つ選択します。[削除] ボタンをクリックして、削除を確認します。
"アルバムの削除"
アルバムが [インデックス] ページに表示されず、削除されたことを確認します。
ここまでで作成した作成フォームと編集フォームでは、どのような種類の検証も実行されません。 ユーザーが必須フィールドを空白のままにするか、価格フィールドに文字を入力すると、最初のエラーはデータベースから発生します。
モデル クラスにデータ注釈を追加することにより、アプリケーションに検証を追加できます。 データ注釈を使用すると、モデルのプロパティに適用する規則を記述できます。さらに、ASP.NET MVC によって適切なメッセージが適用され、ユーザーに表示されます。
このタスクでは、アルバム モデルにデータ注釈を追加します。これにより、[作成] ページと [編集] ページに必要に応じて検証メッセージが表示されるようになります。
単純な Model クラスの場合、データ注釈の追加は、System.ComponentModel.DataAnnotation に対して using ステートメントを追加し、適切なプロパティに [必須] 属性を指定することで処理されます。 次の例では、Name プロパティをビューの必須フィールドに指定します。
using System.ComponentModel.DataAnnotations;
namespace SuperheroSample.Models
{
public class Superhero
{
[Required]
public string Name { get; set; }
public bool WearsCape { get; set; }
}
}
これは、Entity Data Model が生成されるこのアプリケーションのような場合は、もう少し複雑です。 データ注釈をモデル クラスに直接追加した場合、データベースからモデルを更新すると、上書きされてしまいます。 代わりに、メタデータ部分クラスを使用できます。メタデータ部分クラスは、注釈を保持するために存在しており、[MetadataType] 属性を使用してモデル クラスに関連付けられています。
Source/Ex6-AddingValidation/Begin/ フォルダーにある Begin ソリューションを開きます。 または、前の演習を完了して取得した End ソリューションを引き続き使用できます。
提供された Begin ソリューションを開いた場合は、続行する前に、不足している NuGet パッケージをダウンロードする必要があります。 これを行うには、[プロジェクト] メニューをクリックし、[NuGet パッケージの管理] を選択します。
[NuGet パッケージの管理] ダイアログで、[復元] をクリックして、不足しているパッケージをダウンロードします。
最後に、[ビルド] | [ソリューションのビルド] をクリックしてソリューションをビルドします。
注意
NuGet を使用する利点の 1 つは、プロジェクト内のすべてのライブラリを発送する必要がなく、プロジェクト サイズが縮小される点です。 NuGet Power Tools では、Packages.config ファイルでパッケージのバージョンを指定することで、プロジェクトを初回実行するときに必要なすべてのライブラリをダウンロードできます。 このラボから既存のソリューションを開いた後に、これらの手順を実行する必要があるのは、このような理由によります。
Models フォルダーから Album.cs を開きます。
Album.cs の内容を強調表示されたコードに置き換え、次のようにします。
注意
[DisplayFormat(ConvertEmptyStringToNull=false)] 行は、データ フィールドがデータ ソースで更新されるときに、モデルの空の文字列が null に変換されないことを示します。 この設定により、データ注釈がフィールドを検証する前に Entity Framework によってモデルに null 値が割り当てられる例外を回避できます。
(コード スニペット - "ASP.NET MVC 4 ヘルパーとフォームおよび検証 - Ex6 Album メタデータ部分クラス")
namespace MvcMusicStore.Models
{
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
public class Album
{
[ScaffoldColumn(false)]
public int AlbumId { get; set; }
[DisplayName("Genre")]
public int GenreId { get; set; }
[DisplayName("Artist")]
public int ArtistId { get; set; }
[Required(ErrorMessage = "An Album Title is required")]
[DisplayFormat(ConvertEmptyStringToNull = false)]
[StringLength(160, MinimumLength = 2)]
public string Title { get; set; }
[Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")]
[DataType(DataType.Currency)]
public decimal Price { get; set; }
[DisplayName("Album Art URL")]
[DataType(DataType.ImageUrl)]
[StringLength(1024)]
public string AlbumArtUrl { get; set; }
public virtual Genre Genre { get; set; }
public virtual Artist Artist { get; set; }
}
}
注意
この Album 部分クラスには、データ注釈のための AlbumMetaData クラスを指す [MetadataType] 属性があります。 アルバム モデルに注釈を付けるために使用するデータ注釈属性の一部を次に示します。
このタスクでは、最後のタスクで選択した表示名を使用して、[作成] ページと [編集] ページでフィールドが検証されることをテストします。
F5 キーを押してアプリケーションを実行します。
プロジェクトはホーム ページから開始します。 URL を /StoreManager/Create に変更します。 表示名が部分クラスの名前と一致することを確認します ([AlbumArtUrl] ではなく [アルバム アートの URL] など)
フォームに入力せずに、[作成] をクリックします。 対応する検証メッセージが表示されることを確認します。
"[作成] ページのフィールド検証結果"
[編集] ページでも同じようになることを確認できます。 URL を /StoreManager/Edit/1 に変更し、表示名が部分クラスの名前 ([AlbumArtUrl] ではなく [アルバム アートの URL] など) と一致することを確認します。 [タイトル] フィールドと [価格] フィールドを空にして、[保存] をクリックします。 対応する検証メッセージが表示されることを確認します。
"[編集] ページのフィールド検証結果"
この演習では、クライアント側で MVC 4 Unobtrusive jQuery 検証を有効にする方法について学習します。
注意
Unobtrusive jQuery は、インライン クライアント スクリプトを侵入的に出力するのではなく、data-ajax プレフィックス JavaScript を使用してサーバー上でアクション メソッドを呼び出します。
このタスクでは、両方の検証モデルを比較するために、jQuery を含める前にアプリケーションを実行します。
Source/Ex7-UnobtrusivejQueryValidation/Begin/ フォルダーにある Begin ソリューションを開きます。 または、前の演習を完了して取得した End ソリューションを引き続き使用できます。
提供された Begin ソリューションを開いた場合は、続行する前に、不足している NuGet パッケージをダウンロードする必要があります。 これを行うには、[プロジェクト] メニューをクリックし、[NuGet パッケージの管理] を選択します。
[NuGet パッケージの管理] ダイアログで、[復元] をクリックして、不足しているパッケージをダウンロードします。
最後に、[ビルド] | [ソリューションのビルド] をクリックしてソリューションをビルドします。
注意
NuGet を使用する利点の 1 つは、プロジェクト内のすべてのライブラリを発送する必要がなく、プロジェクト サイズが縮小される点です。 NuGet Power Tools では、Packages.config ファイルでパッケージのバージョンを指定することで、プロジェクトを初回実行するときに必要なすべてのライブラリをダウンロードできます。 このラボから既存のソリューションを開いた後に、これらの手順を実行する必要があるのは、このような理由によります。
F5 キーを押してアプリケーションを実行します。
プロジェクトはホーム ページから開始します。 /StoreManager/Create を参照し、フォームに入力せずに [作成] をクリックして、検証メッセージが表示されることを確認します。
"無効化されたクライアント検証"
ブラウザーで、HTML ソース コードを開きます。
...
<div class="editor-label">
<label for="Price">Price</label>
</div>
<div class="editor-field">
<input class="text-box single-line" id="Price" name="Price" type="text" value="" />
<span class="field-validation-valid" id="Price_validationMessage"></span>
</div>
<div class="editor-label">
<label for="AlbumArtUrl">Album Art URL</label>
</div>
<div class="editor-field">
<input class="text-box single-line" id="AlbumArtUrl" name="AlbumArtUrl" type="text" value="" />
<span class="field-validation-valid" id="AlbumArtUrl_validationMessage"></span>
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
</form><script type="text/javascript">
//<![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"GenreId","ReplaceValidationMessageContents":true,"ValidationMessageId":"GenreId_validationMessage","ValidationRules":[{"ErrorMessage":"The Genre field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Genre must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"ArtistId","ReplaceValidationMessageContents":true,"ValidationMessageId":"ArtistId_validationMessage","ValidationRules":[{"ErrorMessage":"The Artist field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Artist must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"Title","ReplaceValidationMessageContents":true,"ValidationMessageId":"Title_validationMessage","ValidationRules":[{"ErrorMessage":"An Album Title is required","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Title must be a string with a minimum length of 2 and a maximum length of 160.","ValidationParameters":{"min":2,"max":160},"ValidationType":"length"}]},{"FieldName":"Price","ReplaceValidationMessageContents":true,"ValidationMessageId":"Price_validationMessage","ValidationRules":[{"ErrorMessage":"Price must be between 0.01 and 100.00","ValidationParameters":{"min":0.01,"max":100},"ValidationType":"range"},{"ErrorMessage":"Price is required","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Price must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"AlbumArtUrl","ReplaceValidationMessageContents":true,"ValidationMessageId":"AlbumArtUrl_validationMessage","ValidationRules":[{"ErrorMessage":"The field Album Art URL must be a string with a maximum length of 1024.","ValidationParameters":{"max":1024},"ValidationType":"length"}]}],"FormId":"form0","ReplaceValidationSummary":false,"ValidationSummaryId":"validationSummary"});
//]]>
</script>
...
このタスクでは、Web.config ファイルから jQuery Unobtrusive Client Validation を有効にします。この検証は、新しい ASP.NET MVC 4 プロジェクトすべてで、既定では false に設定されています。 さらに、jQuery Unobtrusive Client Validation を機能させるために必要なスクリプト参照を追加します。
プロジェクト ルートで Web.Config ファイルを開きClientValidationEnabled キーと UnobtrusiveJavaScriptEnabled キーの値が true に設定されていることを確認します。
...
<configuration>
<appSettings>
<add key="webpages:Version" value="2.0.0.0" />
<add key="webpages:Enabled" value="false" />
<add key="PreserveLoginUrl" value="true" />
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
...
注意
Global.asax.cs のコードでクライアント検証を有効にして、同じ結果を得ることもできます。
HtmlHelper.ClientValidationEnabled = true;
さらに、ClientValidationEnabled 属性を任意のコントローラーに割り当てて、カスタムの動作を指定することもできます。
Views\StoreManager にある Create.cshtml を開きます。
スクリプト ファイル jquery.validate と jquery.validate.unobtrusive が、"~/bundles/jqueryval" バンドルを介したビューで参照されていることを確認します。
...
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
注意
これらの jQuery ライブラリはすべて、MVC 4 の新しいプロジェクトに含まれています。 その他のライブラリは、プロジェクトの /Scripts フォルダーにあります。
この検証ライブラリを機能させるには、jQuery フレームワーク ライブラリへの参照を追加する必要があります。 この参照は既に _Layout.cshtml ファイルに追加されているため、この特定のビューに追加する必要はありません。
このタスクでは、ユーザーが新しいアルバムを作成するときに、StoreManager の作成ビュー テンプレートが jQuery ライブラリを使用してクライアント側検証を実行することをテストします。
F5 キーを押してアプリケーションを実行します。
プロジェクトはホーム ページから開始します。 /StoreManager/Create を参照し、フォームに入力せずに [作成] をクリックして、検証メッセージが表示されることを確認します。
"jQuery を有効にしたクライアント検証"
ブラウザーで、作成ビューのソース コードを開きます。
...
<div class="editor-label">
<label for="Title">Title</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-length="The field Title must be a string with a minimum length of 2 and a maximum length of 160." data-val-length-max="160" data-val-length-min="2" data-val-required="An Album Title is required" id="Title" name="Title" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Title" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="Price">Price</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-number="The field Price must be a number." data-val-range="Price must be between 0.01 and 100.00" data-val-range-max="100" data-val-range-min="0.01" data-val-required="Price is required" id="Price" name="Price" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Price" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="AlbumArtUrl">Album Art URL</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-length="The field Album Art URL must be a string with a maximum length of 1024." data-val-length-max="1024" id="AlbumArtUrl" name="AlbumArtUrl" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="AlbumArtUrl" data-valmsg-replace="true"></span>
</div>
...
注意
クライアント検証規則ごとに、Unobtrusive jQuery は data-val-rulename="message" という属性を追加します。 クライアント検証を実行するために Unobtrusive jQuery が html 入力フィールドに挿入するタグの一覧を次に示します。
すべてのデータ値には、モデルのデータ注釈が入力されます。 そのため、サーバー側で動作するすべてのロジックをクライアント側で実行できます。 たとえば、Price 属性には、モデル内に次のデータ注釈があります。
[Required(ErrorMessage = "Price is required")]
[Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")]
public object Price { get; set; }
Unobtrusive jQuery を使用した後、生成されるコードは次のようになります。
<input data-val="true"
data-val-number="The field Price must be a number."
data-val-range="Price must be between 0.01 and 100.00"
data-val-range-max="100"
data-val-range-min="0.01"
data-val-required="Price is required"
id="Album_Price" name="Album.Price" type="text" value="0" />
このハンズオン ラボをとおして、ユーザーが次の方法でデータベースの格納データを変更できるようにする方法を学習しました。
Microsoft Web Platform Installer を使用して、Microsoft Visual Studio Express 2012 for Web または別の "Express" バージョンをインストールできます。 次の手順では、Microsoft Web Platform Installer を使用して Visual studio Express 2012 for Web をインストールするために必要な手順について説明します。
[/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169) に移動します。 または、Web Platform Installer を既にインストールしている場合、それを開き、製品 "Visual Studio Express 2012 for Web with Windows Azure SDK" を検索できます。
[今すぐインストール] をクリックします。 Web Platform Installer がない場合は、最初にダウンロードしてインストールするようにリダイレクトされます。
Web Platform Installer が開いたら、[インストール] をクリックしてセットアップを開始します。
Visual Studio Express をインストールする
すべての製品のライセンスと使用条件を読み、[同意する] をクリックして続行します。
ライセンス条項に同意する
ダウンロードとインストールのプロセスが完了するまで待機します。
インストールの進行状況
インストールが完了したら、[完了] をクリックします。
インストールの完了
[終了] をクリックして Web Platform Installer を閉じます。
Visual Studio Express for Web を開くには、[スタート] 画面に移動し、「VS Express」と記入して、[VS Express for Web] タイルをクリックします。
VS Express for Web タイル
コード スニペットを使用すると、必要なすべてのコードをすぐに入手できます。 ラボ ドキュメントでは、次の図に示すように、使用できるタイミングが正確に示されています。
Visual Studio コード スニペットを使用してプロジェクトにコードを挿入する
キーボードを使用してコード スニペットを追加するには (C# のみ)
スニペット名の入力を開始する
Tab キーを押して強調表示されたスニペットを選択する
Tab キーをもう一度押すと、スニペットが展開される
マウスを使用してコード スニペット追加するには (C#、Visual Basic、XML) 1. コード スニペットを挿入する場所を右クリックします。
コード スニペットを挿入する場所を右クリックし、[スニペットの挿入] を選択する
関連するスニペットをクリックして、一覧から選択する
トレーニング
モジュール
ASP.NET Core コントローラーを使用して Web API を作成する - Training
作成、読み取り、更新、削除 (CRUD) 操作をサポートする ASP.NET Core コントローラーを使用して、RESTful サービスを作成します。