Razor と控えめな JavaScript で MVC 3 を作成する
User List サンプル Web アプリケーションは、Razor ビュー エンジンを使用して MVC 3 アプリケーション ASP.NET 作成するのがいかに簡単であるかを示しています。 サンプル アプリケーションでは、新しい Razor ビュー エンジンと ASP.NET MVC バージョン 3 と Visual Studio 2010 を使用して、ユーザーの作成、表示、編集、削除などの機能を含む架空のユーザー リスト Web サイトを作成する方法を示します。
このチュートリアルでは、MVC 3 アプリケーション ASP.NET User List サンプルをビルドするために実行された手順について説明します。 C# と VB のソース コードを含む Visual Studio プロジェクトは、次のトピックに付属しています: ダウンロード。 このチュートリアルについて質問がある場合は、 MVC フォーラムに投稿してください。
概要
構築するアプリケーションは、単純なユーザー リスト Web サイトです。 ユーザーは、ユーザー情報を入力、表示、更新できます。
VB と C# の完了したプロジェクト は、こちらからダウンロードできます。
Web アプリケーションの作成
チュートリアルを開始するには、Visual Studio 2010 を開き、 ASP.NET MVC 3 Web アプリケーション テンプレートを使用して新しいプロジェクトを作成します。 アプリケーションに "Mvc3Razor" という名前を付けます。
[ New ASP.NET MVC 3 Project]\(新しい ASP.NET MVC 3 プロジェクト \) ダイアログ で、[Internet Application]\(インターネット アプリケーション\) を選択し、Razor ビュー エンジンを選択して、[OK] をクリック します。
![[新しい ASP.NET MVC 3 プロジェクト] ダイアログ](creating-a-mvc-3-application-with-razor-and-unobtrusive-javascript/_static/image4.png)
このチュートリアルでは、ASP.NET メンバーシップ プロバイダーを使用しないため、ログオンとメンバーシップに関連付けられているすべてのファイルを削除できます。 ソリューション エクスプローラーで、次のファイルとディレクトリを削除します。
- Controllers\AccountController
- Models\AccountModels
- Views\Shared\_LogOnPartial
- Views\Account (およびこのディレクトリ内のすべてのファイル)
_Layout.cshtml ファイルを編集し、 という名前logindisplayの要素内のマークアップを <div> "Login Disabled" というメッセージに置き換えます。 次の例は、新しいマークアップを示しています。
<div id="logindisplay">
Login Disabled
</div>
モデルの追加
ソリューション エクスプローラーで、[Models] フォルダーを右クリックし、[追加] を選択し、[クラス] をクリックします。
クラスに UserModel という名前を付けます。 UserModel ファイルの内容を次のコードに置き換えます。
using System.ComponentModel.DataAnnotations;
using System.Collections.Generic;
namespace Mvc3Razor.Models {
public class UserModel {
[Required]
[StringLength(6, MinimumLength = 3)]
[Display(Name = "User Name")]
[RegularExpression(@"(\S)+", ErrorMessage = "White space is not allowed")]
[ScaffoldColumn(false)]
public string UserName { get; set; }
[Required]
[StringLength(8, MinimumLength = 3)]
[Display(Name = "First Name")]
public string FirstName { get; set; }
[Required]
[StringLength(9, MinimumLength = 2)]
[Display(Name = "Last Name")]
public string LastName { get; set; }
[Required()]
public string City { get; set; }
}
public class Users {
public Users() {
_usrList.Add(new UserModel
{
UserName = "BenM",
FirstName = "Ben",
LastName = "Miller",
City = "Seattle"
});
_usrList.Add(new UserModel
{
UserName = "AnnB",
FirstName = "Ann",
LastName = "Beebe",
City = "Boston"
});
}
public List<UserModel> _usrList = new List<UserModel>();
public void Update(UserModel umToUpdate) {
foreach (UserModel um in _usrList) {
if (um.UserName == umToUpdate.UserName) {
_usrList.Remove(um);
_usrList.Add(umToUpdate);
break;
}
}
}
public void Create(UserModel umToUpdate) {
foreach (UserModel um in _usrList) {
if (um.UserName == umToUpdate.UserName) {
throw new System.InvalidOperationException("Duplicat username: " + um.UserName);
}
}
_usrList.Add(umToUpdate);
}
public void Remove(string usrName) {
foreach (UserModel um in _usrList) {
if (um.UserName == usrName) {
_usrList.Remove(um);
break;
}
}
}
public UserModel GetUser(string uid) {
UserModel usrMdl = null;
foreach (UserModel um in _usrList)
if (um.UserName == uid)
usrMdl = um;
return usrMdl;
}
}
}
クラスは UserModel ユーザーを表します。 クラスの各メンバーには、DataAnnotations 名前空間の Required 属性で注釈が付けられます。 DataAnnotations 名前空間の属性は、Web アプリケーションのクライアント側とサーバー側の自動検証を提供します。
クラスをHomeController開き、 クラスと Users クラスにusingアクセスできるように ディレクティブをUserModel追加します。
using Mvc3Razor.Models;
宣言の直後に HomeController 、次のコメントとクラスへの参照を Users 追加します。
public class HomeController : Controller {
// The __usrs class is replacement for a real data access strategy.
private static Users _usrs = new Users();
クラスは Users 、このチュートリアルで使用する簡略化されたメモリ内データ ストアです。 実際のアプリケーションでは、データベースを使用してユーザー情報を格納します。 ファイルの最初の数行を HomeController 次の例に示します。
using System.Web.Mvc;
using Mvc3Razor.Models;
namespace Mvc3Razor.Controllers {
public class HomeController : Controller {
// The __usrs class is replacement for a real data access strategy.
private static Users _usrs = new Users();
次の手順でユーザー モデルをスキャフォールディング ウィザードで使用できるように、アプリケーションをビルドします。
既定のビューの作成
次の手順では、アクション メソッドとビューを追加してユーザーを表示します。
既存の Views\Home\Index ファイルを 削除します。 ユーザーを表示する新しい インデックス ファイルを作成します。
クラスで HomeController 、 メソッドの内容を Index 次のコードに置き換えます。
return View(_usrs._usrList);
メソッド内を右クリックし、[ビューのIndex追加] をクリックします。
[ 厳密に型指定されたビューを作成 する] オプションを選択します。 [データ クラスの表示] で、[Mvc3Razor.Models.UserModel] を選択します。 ([データの表示] クラス ボックスに Mvc3Razor.Models.UserModel が表示されない場合は、プロジェクトをビルドする必要があります)。ビュー エンジンが Razor に設定されていることを確認します。 [ コンテンツの表示] を [リスト ] に設定し、[ 追加] をクリックします。
新しいビューでは、ビューに渡されるユーザー データが自動的に Index スキャフォールディングされます。 新しく生成された Views\Home\Index ファイルを 調べます。 [新規作成]、[編集]、[詳細]、[削除] リンクは機能しませんが、ページの残りの部分は機能します。 ページを実行します。 ユーザーの一覧が表示されます。
Index.cshtml ファイルを開き、Edit、Details、Delete のマークアップを次のコードに置き換えますActionLink。
@Html.ActionLink("Edit", "Edit", new { id=item.UserName }) |
@Html.ActionLink("Details", "Details", new { id=item.UserName }) |
@Html.ActionLink("Delete", "Delete", new { id=item.UserName })
ユーザー名は、[ 編集]、[ 詳細]、[ 削除 ] リンクで選択したレコードを検索するための ID として使用されます。
詳細ビューの作成
次の手順では、ユーザーの詳細を Details 表示するためにアクション メソッドとビューを追加します。
ホーム コントローラーに次 Details のメソッドを追加します。
public ViewResult Details(string id) {
return View(_usrs.GetUser(id));
}
メソッド内を右クリックし、[ビューの Details 追加] を選択 します。 [データ クラスの表示] ボックスに Mvc3Razor.Models.UserModel が含まれていることを確認します。[コンテンツの表示] を [詳細] に設定し、[追加] をクリックします。
アプリケーションを実行し、詳細リンクを選択します。 自動スキャフォールディングでは、モデル内の各プロパティが表示されます。
![スクリーンショットは、ユーザーの値を含む [詳細フィールド] を示しています。](creating-a-mvc-3-application-with-razor-and-unobtrusive-javascript/_static/image12.png)
編集ビューの作成
ホーム コントローラーに次 Edit のメソッドを追加します。
public ViewResult Edit(string id) {
return View(_usrs.GetUser(id));
}
[HttpPost]
public ViewResult Edit(UserModel um) {
if (!TryUpdateModel(um)) {
ViewBag.updateError = "Update Failure";
return View(um);
}
// ToDo: add persistent to DB.
_usrs.Update(um);
return View("Details", um);
}
前の手順のようにビューを追加しますが、[ コンテンツの表示] を [編集] に設定します。
アプリケーションを実行し、いずれかのユーザーの姓と名を編集します。 クラスに適用されている制約にUserModel違反DataAnnotationした場合、フォームを送信すると、サーバー コードによって生成される検証エラーが表示されます。 たとえば、名 "Ann" を "A" に変更した場合、フォームを送信すると、フォームに次のエラーが表示されます。
The field First Name must be a string with a minimum length of 3 and a maximum length of 8.
このチュートリアルでは、ユーザー名を主キーとして扱います。 したがって、ユーザー名プロパティを変更することはできません。 Edit.cshtml ファイルで、 ステートメントの直後にHtml.BeginForm、ユーザー名を非表示フィールドに設定します。 これにより、 プロパティがモデルに渡されます。 次のコード フラグメントは、 ステートメントの配置を Hidden 示しています。
<h2>Edit</h2>
@using (Html.BeginForm()) {
@Html.Hidden("UserName", Model.UserName)
ユーザー名の TextBoxFor および ValidationMessageFor マークアップを呼び出しに DisplayFor 置き換えます。 メソッドは DisplayFor 、 プロパティを読み取り専用要素として表示します。 完全なマークアップの例を次に示します。 元 TextBoxFor の と ValidationMessageFor の呼び出しは、Razor の begin-comment 文字と end-comment 文字 (@* *@) でコメントアウトされます
<div class="editor-label">
@Html.LabelFor(model => model.UserName)
</div>
<div class="editor-field">
@*
@Html.TextBoxFor(model => model.UserName)
@Html.ValidationMessageFor(model => model.UserName)
*@
@Html.DisplayFor(model => model.UserName)
</div>
Client-Side検証の有効化
ASP.NET MVC 3 でクライアント側の検証を有効にするには、2 つのフラグを設定し、3 つの JavaScript ファイルを含める必要があります。
アプリケーションの Web.configファイルを 開きます。 アプリケーション設定で と UnobtrusiveJavaScriptEnabled が true に設定されていることを確認that ClientValidationEnabledします。 ルート Web.config ファイルの次のフラグメントは、正しい設定を示しています。
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
true に設定 UnobtrusiveJavaScriptEnabled すると、目立たない Ajax と目立たないクライアント検証が有効になります。 目立たない検証を使用すると、検証規則は HTML5 属性に変換されます。 HTML5 属性名は、小文字、数字、ダッシュのみで構成できます。
true に設定 ClientValidationEnabled すると、クライアント側の検証が有効になります。 アプリケーション Web.config ファイルでこれらのキーを設定することで、アプリケーション全体に対してクライアント検証と目立たない JavaScript を有効にします。 次のコードを使用して、個々のビューまたはコントローラー メソッドでこれらの設定を有効または無効にすることもできます。
HtmlHelper.ClientValidationEnabled = true;
HtmlHelper.UnobtrusiveJavaScriptEnabled = true;
また、レンダリングされたビューに複数の JavaScript ファイルを含める必要もあります。 すべてのビューに JavaScript を含める簡単な方法は、 それらを Views\Shared\_Layout.cshtml ファイルに 追加することです。 <head>_Layout.cshtml ファイルの 要素を次のコードに置き換えます。
<head>
<title>@View.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
</head>
最初の 2 つの jQuery スクリプトは、Microsoft Ajax Content Delivery Network (CDN) によってホストされます。 Microsoft Ajax CDN を利用することで、アプリケーションの初回ヒット パフォーマンスを大幅に向上させることができます。
アプリケーションを実行し、編集リンクをクリックします。 ブラウザーでページのソースを表示します。 ブラウザー ソースには、フォーム data-val の多くの属性が表示されます (データ検証用)。 クライアント検証と目立たない JavaScript が有効になっている場合、クライアント検証規則を持つ入力フィールドには、目立たないクライアント検証をトリガーする属性が含まれます data-val="true" 。 たとえば、モデル内の City フィールドは Required 属性で装飾されており、その結果、次の例に示す HTML が表示されます。
<div class="editor-field">
<input data-val="true" data-val-required="The City field is required." id="City" name="City" type="text" value="Seattle" />
<span class="field-validation-valid" data-valmsg-for="City" data-valmsg-replace="true"></span>
</div>
クライアント検証規則ごとに、 という形式 data-val-rulename="message"の属性が追加されます。 前に示したフィールドの City 例を使用して、必要なクライアント検証規則によって data-val-required 属性と"City フィールドが必要です" というメッセージが生成されます。 アプリケーションを実行し、いずれかのユーザーを編集して、フィールドを City クリアします。 フィールドからタブアウトすると、クライアント側の検証エラー メッセージが表示されます。
同様に、クライアント検証規則のパラメーターごとに、 という形式 data-val-rulename-paramname=paramvalueの 属性が追加されます。 たとえば、 FirstName プロパティは StringLength 属性で注釈を付け、最小長は 3、最大長は 8 を指定します。 という名前 length のデータ検証規則には、パラメーター名 max とパラメーター値 8 があります。 次に、いずれかのユーザーを編集するときにフィールドに FirstName 対して生成される HTML を示します。
<input data-val="true"
data-val-length="The field First Name must be a string with a minimum length of 3 and a maximum length of 8."
data-val-length-max="8"
data-val-length-min="3"
data-val-required="The First Name field is required."
id="FirstName"
name="FirstName"
type="text"
value="Ben" />
目立たないクライアント検証の詳細については、Brad Wilson のブログの「 ASP.NET MVC 3 の控えめなクライアント検証 」のエントリを参照してください。
注意
ASP.NET MVC 3 ベータ版では、クライアント側の検証を開始するためにフォームを送信する必要がある場合があります。 これは、最終リリースで変更される可能性があります。
作成ビューの作成
次の手順では、ユーザーが新しいユーザーを Create 作成できるように、アクション メソッドとビューを追加します。 ホーム コントローラーに次 Create のメソッドを追加します。
public ViewResult Create() {
return View(new UserModel());
}
[HttpPost]
public ViewResult Create(UserModel um) {
if (!TryUpdateModel(um)) {
ViewBag.updateError = "Create Failure";
return View(um);
}
// ToDo: add persistent to DB.
_usrs.Create(um);
return View("Details", um);
}
前の手順のようにビューを追加しますが、[ コンテンツの表示] を [作成] に設定します。
アプリケーションを実行し、[ 作成 ] リンクを選択して、新しいユーザーを追加します。 メソッドは Create 、クライアント側とサーバー側の検証を自動的に利用します。 "Ben X" などの空白を含むユーザー名を入力してみてください。 ユーザー名フィールドからタブアウトすると、クライアント側の検証エラー (White space is not allowed) が表示されます。
Delete メソッドを追加する
チュートリアルを完了するには、ホーム コントローラーに次 Delete のメソッドを追加します。
public ViewResult Delete(string id) {
return View(_usrs.GetUser(id));
}
[HttpPost]
public RedirectToRouteResult Delete(string id, FormCollection collection) {
_usrs.Remove(id);
return RedirectToAction("Index");
}
前の Delete 手順と同様にビューを追加し、[ コンテンツの表示] を [削除] に設定します。
これで、検証を使用して MVC 3 アプリケーション ASP.NET シンプルでありながら完全に機能するようになりました。
フィードバック
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「https://aka.ms/ContentUserFeedback」を参照してください。
フィードバックの送信と表示