Hokuriku.NET ASP.NET MVC入門「実践」 20120825

ASP.NET MVC 入門
アプリケーション作成

以下、ASP.NET MVCを
MVCと呼びます。

1

全体像

Controlller
HTTPリクエスト

Model

HTTPレスポンス
View

2

９月末に、Hokuriku.NET vol.10
が開催されるということで、

セッション・アンケート管理のWEBアプリを
作成します。

3

プロジェクト作成

・新しいプロジェクト＞ASP.NET MVC 4 WEB アプリケーション
・プロジェクトの名前を入力し、「OK」ボタン

プロジェクト作成
・テンプレートを選択します。

・ビューエンジンを選択します。
・Razor ←今日はこれを選択。
・ASPX

ビューエンジンの選択について
Viewを作成するときの構文
を選択します。
ASPX
WEBフォームでの構文を記載
できます。
往来のスキルを活かせます。
Razor
MVC3から追加されたもの。
タイピング数が少なくて楽
なので、Razorがオススメ。

プロジェクト構成
MVCは、「規約は設定に勝る」というコンセプトに基づいているため、
命名規則など、あらかじめ決められていることがあります。
（開発者が変更できるところとできないところがあります。）
プロジェクト構成も、決められていることがあります。

 Controllerクラスの場所
 Controllers名前空間に属すこと。
MVCプロジェクト以外のプロジェクトでも良いが、その場合はプロジェクト参照設定
を
忘れない。

 Controllerクラス
 クラス名は「～～Controller」と、最後にControllerをつける。
 Controllerクラスを継承する。

 Viewファイルの場所
 MVCプロジェクト配下のViewsフォルダの中に配置する。
 Viewsファイルは、対応するControllerの名前のフォルダか、Sharedフォルダに配置。

URL HTTPメソッド目的

/Session/List GET セッション一覧を表示する

7

一覧取得画面の流れを確認

アクセス GET /Session/List

一覧画面のHtml

セッション一覧
SessionControllerクラスを作成します。
一覧の処理を実装する、アクションメソッドを作成します。

public ActionResult List()
{
return View();
}

次に、一覧のViewを作成します。

デバッグし、/Session/List にアクセスします。

フレームワーク

URL
/Session/List

SessionControllerクラス ASP.NET
インスタンス化 MVC
フレームワーク

SessionControllerクラスの
Listメソッド実行

List.csHtml より Htmlを出力

ルーティング初期設定

URL SessionControllerクラスの
/Session/List Listメソッド

なぜ、/Session/List が SessionControllerクラスのListメソッド紐づいたか？

RouteConfig.cs（またはGlobal.asax）にて、
そのように初期設定されている。

ルーティングの初期設定
/コントローラ名/アクションメソッド名/(ID)

→ルーティングという機能ですが、このルーティングについては後程。

アクションメソッド

アクションメソッド
コントローラクラスの中に定義するメソッドです。
MVCのうちのコントローラの部分の処理を実装しているところです。

ユーザからのリクエストを、処理し、Viewを呼び出します。
基本的には、戻り値として、ActionResultクラスを返します。

ActionResult
アクションメソッドの結果を表す抽象クラスです。
アクションメソッドの結果を表すものは、このクラスを継承しています。

Viewを返す時は、ViewResultクラスを返し、
何かファイルをダウンロードさせたいときは、FileResultを返すなど
いろいろな種類があります。

戻り値のヘルパーメソッド

return View();
ActionResultをインスタンス化して、返す処理を、
リファクタリングしたもの。

大体のActionResultを継承しているクラスはこのヘルパーが用意されています。

ActionResultの種類

クラス名概要ヘルパーメソッド利用
ContentResult 文字列を出力します return Content(“ya-!”);
ViewResult ビューを出力します return View();
PartialViewResult 部分ビューを出力します return PartialView();
RedirectResult 指定されたURLにリダイ return
レクトします Redirect("http://sample.com"
);
RedirectToRouteResul 指定されたアクションに、 return
t リダイレクトします RedirectToAction("Create");

FileContentResult ファイルの内容を出力し return File(byte[],
ます（バイト配列） "image/jpeg");
HttpNotFoundResult 404を返します。 return HttpNotFound();
などなどたくさんあります。

Viewの指定

Return View(); のように、引数に何も指定しない場合は、

Views/コントローラクラス名/アクションメソッドの名前

または、

Views/Shared/アクションメソッドの名前

が呼び出されされます。

Sharedフォルダ内は、すべてのコントローラ共有のViewを格納します。

Viewの指定 2

return View(“Index”);
のように文字列を指定すると、Viewの名前を指定できます。

場所は、先ほどと同じように、

Views/コントローラクラス名/Index.csHtml

Views/Shared/Index.csHtml

コントローラクラス名のフォルダ、またはSharedフォルダの中のViewが指定されます。

View/違うコントローラのクラス名/….csHtml

↑のように、違うコントローラのクラス名のフォルダのViewは、
指定できません。

コントローラのインスタンス化

コントローラのコンストラクタの引数に気をつける。

コントローラのインスタンス化は、MVCフレームワークが行うので、
コンストラクタの引数に、int number などを定義すると、
「numberって何いれればいいの？」とエラーが起きます。

コンストラクタの引数を、開発者が定義し、フレームワークに
これ使ってね、と設定することは可能です。

キーワード：
Unity, 依存性の注入, カスタムコントローラファクトリー

コントローラの作成をカスタムする
フレームワークが行っているコントローラの作成を、
開発者側で定義した方法で行うよう、定義します。以下は方法の１つです。

カスタムコントローラファクトリーの作成

public class ControllerFactory : DefaultControllerFactory
{
public override IController CreateController(
RequestContext requestContext, string controllerName)
{
int number = 3;
return new SessionController(number);
}
}

カスタムコントローラファクトリーの登録

Global.asaxにて。

ControllerBuilder.Current.SetControllerFactory(typeof(ControllerFactory));

多くの拡張ポイント
MVCには、このように拡張できるポイントが、いくつもあります。
開発者の自由にカスタマイズできるところが、MVCの特徴でもあります。
（ほとんどはあまり使用されません。）

アクションインボーカーアクションメソッドの実行、レスポンスの制御など

コントローラファクトリーコントローラインンスタンスのファクトリ
ディクショナリ値リクエストの入力値の読み取り
モデルバインダー ★よく使われるディクショナリ値から、モデルを生成

モデルバインダープロバイダーモデルバインダーを動的に作成するためのファクトリー

モデルメタデータモデルのメタ情報の取得と関連付け

モデルバリデータモデルメタデータの検証特化
TempData TempDataのストレージ
ビューエンジン HTMLを生成する機能をもつコンポーネント。
規定はASPX, Razor

キーワード＊セッション一覧

 実装-アクションメソッド

Controlller
HTTPリクエスト
 ActionResultクラス

 Viewは指定できる
Model

HTTPレスポンス
View

20

URL HTTPメソッド目的

/Session/Create GET セッションを作成するための
画面を取得します
POST セッションを新規追加します

21

作成時の流れを確認
アクセス GET /Session/Create

作成画面のHtml

入力
POST /Session/Create
Title = メトロアプリ作成 &
Speaker = 太郎
DB登録
302 Redirect /Session/List

GET /Session/List

一覧画面のHtml
一覧画面確認
22

モデルの作成
セッションのモデルを作成します。

 タイトル string
 サブタイトル string
 開始時間 datetime
 終了時間 datetime
 発表者名 string
 概要 string
 参考URL string

作成画面取得アクションメソッド

一覧画面と同じように作成します。

public ActionResult Create()
{
return View();
}

Viewを作成します。
メソッドの上で右クリック→ビューの追加
<div class="editor-label">
タイトル
</div>
<div class="editor-field">
@Html.TextBox("Title")
</div>

おさらい送信時の画面のHTML

<form action=“home/create”
method=“post”>
POSTかＧＥＴ

Submitボタンを押すと、 <input type=“text” name=“Who”
Formで囲まれたコントロールの value=“Taro” />
NameとValueの値をペアとして
送信する名前
送信する。
<input type=“submit” /> と値のペア

送信するときの、HTTPメソッド
は、GETかPOSTの２つのどれか。 </form>

ＧＥＴの場合は、URＩのクエリ文字列として、
ＰＯＳＴの場合は、Bodyの値として送信される。

作成画面 Html ヘルパーの利用
<form></form> タグ

@using (Html.BeginForm()) {

}

↑だと、現在表示しているURLへ、POSTメソッドで送信します。
@using (Html.BeginForm(
“action”, ← 送信先のアクションメソッド名
“controller”, ← 送信先のコントローラ名
new { id = 1 }, ← パラメータの設定
FormMethod.Get, ← GETで送信
new { @class = “form” })) { ← クラス属性の値設定
}

↑のように、たくさんのオプションを設定することもできます。
多くのHtmlヘルパーは、自由にオプションを設定することができます。

作成画面 Html inputタグの作成

<input type=“text”> タグ

@Html.TextBox(“Title”)

name属性の値がTitleである、テキストボックス
のHtmlタグを出力します。

<input type=“submit” />は対応するHtmlヘルパーがないのでそのまま。

作成画面の取得の実装は以上です。
/Session/Create にアクセス！

Razor @
ここで、基本的なRazorの書き方を見てみます。
コードブロック

@{
var name = “Taro”;
}

if 文やforeach文は、@の後すぐに記述できます。

@if (true)
{
<span>こんにちは</span>
}

コメント
@* 出力されません *@

Razor @
ヘルパーメソッドの利用

@ViewMessage("メッセージ")

@helper ViewMessage(string message) {
<span>@message</span>
}

 全て、@から始まる
 基本的にHtmlエスケープしてくれ
ます。

マスターページ
マスターページとは

ＨＰへようこそ！ＨＰへようこそ！

あなたは１２３番目の自己紹介します!
お客様です！
名前：たろうくん

複数のページにまたがって同じものを描画したい時に使う。

利用方法

マスターページを利用したいViewに記述します。
Layoutにマスタページのパスを指定します。

省略
View/_ViewSart.csHtml
に記述したものは、
すべてのページに反映されます。
ので、個別にLayoutを記述しなくてもＯＫ

@RendarBody() (マスターページ）

この場所に、子ページの内容が入ります。


@RenderSection(名前, required) (マスターページ）

RendarBodyの他に、何か埋め込みたいときに記述します。
Requiredは、子ページ側で必ずコンテンツを指定するかどうかです。
デフォルトはtrueで、@RenderSection(“名前”)と書くと、
必ず子ページ側でコンテンツを記述する必要があります。

@Section “名前” { } (子ページ）
子ページ側で、マスターページで
RenderSectionと書いた場所に、
コンテンツを埋め込む方法です。
@sectionの後には、名前を指定します。
Requiredがfalseの場合は、記述しなく
ても構いません。

キーワード＊セッション作成取得

Controlller
HTTPリクエスト

Model

HTTPレスポンス  Htmlヘルパー
View
 マスターページ

 Razoｒ記法
34

作成画面 POST送信後の処理

POST /Session/Create で送信された時の、アクションメソッ
ドの仕事を確認します。

入力
Speaker = 太郎
DB登録
302 Redirect /Session/List

仕事
 送信された値を取得し、データベースを更新する。
 更新後、一覧へするようリダイレクトを送信する。

作成画面 POSTアクションメソッド

一覧画面と同じように作成します。
メソッド名が被るので、CreateRegistにします。

public ActionResult CreateRegist()
{
return View();
}

リダイレクトを送信します。同じSessionコントローラのListメソッドを指定します。
すると、MVCフレームワークは、そのアクションメソッドに対応するURLを生成して、
リダイレクトを送信してくれます。
return RedirectToAction(“List");

RedirectToActionは、多数の引数を指定可能です。

return RedirectToAction("Index", "Home", new { id = 3 });

//取得時
public ActionResult Create()
{
return View();
}

//送信時
[ActionName("Create")]
[HttpPost]
public ActionResult CreateRegist()
{
return View();
}

/Session/CreateでPOST送信すると、上の取得メソッドの方にマッピンングされて
しまいます。送信時の処理を行うのは、下のメソッドなので、２つの属性を追加し
ます。
どちらもActionNameSelectorAttributeを継承しているクラスで、
アクションメソッドの選択に影響する属性です。

SpeakerName = 太郎

送信された値を取得します。
方法は２つあります。

① Request.Formで取得

var title = Request.Form["Title"];
var start = Request.Form["StartTime"];

送信されたnameを文字列で指定し、値を取得する方法です。
しかしこれでは、すべてstring型として１つ１つ取得するので、
大変面倒です。一般的にこの方法は利用しません。

作成画面モデルバインダー
そこで登場するのが2つ目の方法、モデルバインダーです。
MVCの主要機能の1つです。

ＳｔａｒｔＴｉｍｅ = 2012/01/01

モデルバインダは、フォーム送信データなどのHTTPリクエストの値（文字列）から、
オブジェクト（クラスなど）を生成するプロセスのことです。


モデルバインダーは、アクションメソッドの引数のオブジェクトに対して、
行われます。
引数に定義するだけで、モデルバインダーが働き、オブジェクトを生成して
メソッドに渡してくれます。

Request.Form[“Title”]を使うよりも、session クラスに値が入ってくれれば、
開発者はとても楽になります。

規定モデルバインダーのバインドルール

定義したクラスの、プロパティ名と同じnameの値がバインドされます。

フォーム送信データ：
ＳｔａｒｔＴｉｍｅ = 2012/01/01

Session クラス
・Title プロパティ = “メトロアプリ作成”
・StartTime プロパティ = new DateTime(2012, 1, 1)

規定モデルバインダーのバインドルール２層

定義したクラスのプロパティが別のクラスの型であっても、バインドできます。
Nameは[プロパティ名] . [プロパティ名]です。(ドットをいれます。)

Speaker.Name =
2012/01/01 &
Speaker.Location =
“Toyama”

規定モデルバインダーのバインドルール階層

極端な話、何階層でも new Product {
バインドしてくれます。 Child = new Product {
Child = new Product {
<input type="text" Child = new Product {
name="Child.Child.Child. Child = new Product {
Child.Child.Child.Name"/> Child = new Product {
Child = new Product {
Name = "MADNESS!"
}
}
}
}
}
}
http://msdn.microsoft.com/ja-jp/magazine/hh781022.aspx より
}

規定モデルバインダーのバインドルールコレクション

定義したクラスのプロパティが、コレクションであってもバインドしてくれます。

Speakers[0] .Name = “ひとりめ” & Speakers[1] . Name = “ふたりめ”

規定モデルバインダー値の取得元

バインドする時に参照する文字列は、フォーム送信だけではなく、
他のHTTPリクエストの値も参照されます。

 フォーム送信データ
 ルートデータ（URLの一部）
 クエリ文字列（URLの後ろ）
 送信されたファイル

規定モデルバインダー注意

定義したクラスのコンストラクタに、何か引数が指定している場合は、
規定モデルバインダーは失敗します。

どうしても引数ありのコンストラクタしか使えないのであれば、
独自のモデルバインダーを作成する必要があります。

まとめ  HTTPリクエストの内容を、文字列ではなく
オブジェクトとして扱いやすくするために
POST /Session/Create 利用する。
ＳｔａｒｔＴｉｍｅ = 2012/01/01  アクションメソッドの引数に定義されたものを
バインドしてくれる。

 規定のモデルバイダーが動くが、独自の
モデルバインダーを設定することができる。

 バインドしやすいように、送信するnameを
制御するとよい。（方法については後程）


実装に戻ります。
送信された値を取得するため、モデルバインダーを利用します。

メソッドの引数にSessionを定義します。

そのSessionでDBを更新します。

デバッグ！ DBに追加されたかを確認します。

・・・開始日や終了日に何も入力しないと、コミット時にエラーが起きるはずです。

作成画面検証時の流れ

データを作成するときは、値が適切になるよう、検証する必要があります。
そして、ユーザに「この値は必ず入力してください」などと、伝える必要があります。

検証を実装する前に、
この時のＨＴＴＰ通信の流れはどうなるのか？確認します。

この値じゃだめだよ！
データ

作成画面検証時の流れを確認
送信！ POST /Session/Create
Title = （空）&
Speaker = 太郎
検証失敗

作成画面のHtml

＋ユーザが入力した値を
表示するHtml
修正して送信！
Title = タイトルやで& ＋検証失敗の理由を
Speaker = 太郎表示するHtml

成功
リダイレクト

GET /Session/List

50

作成画面検証の実装

検証の実装は、とても簡単です。

①モデルに、検証属性を追加します。

51


②Viewに検証メッセージを表示するようにします。

52


③POST時のアクションメソッドで、検証に失敗した場合は、
入力情報があるsessionをViewに渡し、表示させます。
検証が成功した場合は、リダイレクトを送信します。

検証機能の実装は以上です。デバッグ！

53

しくみ

モデルバインダーにて、Sessionクラスを生成するときに、
属性の情報を元に検証を行い、
ModelStateにエラー情報を格納しています。

また、ModelStateには、新たにエラー情報を追加することもできます。

54

検証クライアント側・サーバ側
今実装したのは、サーバ側で検証する処理です。
WEBアプリでは、サーバ側の他に、クライアント側で検証する方法があります。

クライアント側で行う利点は、
不要な通信が減る
レスポンスが早い
の２つがあります。
クライアント側の検証はJavaScriptとHtmlで行います。

ブラウザ上で検証サーバで検証
Javascript データ

55

検証クライアント検証
クライアント検証注意
クライアント側だけで検証するのは控えてください。
クライアント側の処理なので、ユーザ側は自由に検証をOFFにすることができます。
（JavaScriptをOFFにしたり、ブラウザ以外で通信したり）

ですので、サーバ側の検証は必ず実装してください。

ブラウザ上で検証無防備なり
Javascript データ

56

検証クライアント検証実装
クライアンド検証の実装も簡単です。

①WebConfigの設定
<appSettings>
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
クライアント検証を有効にするかどうかと、
控え目なJavaScriptを有効にすうるかどうかの２つの値をtrueにします。
（デフォルトで既にそうなっています。）

↓のようにページに記述し、ページ単位で制御することも可能です。
@{
Html.EnableClientValidation();
Html.EnableUnobtrusiveJavaScript();
}

②JavaScriptのスクリプトファイルの読み込み
検証を実装しているクスリプトファイルを読み込むよう設定します。
各ページ、またはマスタページや_ViewStart.csHtmlに記述します。
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"
type="text/javascript"></script>

MVC4のテンプレートの場合は、以下のように記述できます。
（BundleConfig.csで上記２つのファイルを読み込むよう設定してあります。）

@Scripts.Render("~/bundles/jqueryval")

③Htmlヘルパーの変更

作成画面のViewに、下のコードを追加し、型情報よりView
を記述できるようにします。

@model HokurikuMvc.Models.Session
また、このコードを、
@Html.TextBox(“Title”)
@Html.ValidationMessage(“Tite”)

下のように変更します。
@Html.TextBoxFor(m => m.Title)
@Html.ValidationMessageFor(m => m.Title)

これにより、検証属性の情報から、検証できるようHtmlタグが出力されます。
デバッグで、ソースを確認してみます。

検証他
他、クライアントサイドの検証については
非同期でサーバと通信し、検証を行うリモート検証や、
独自の検証を実装する、カスタム検証があります。

また、複数の値でから検証を行うこともできます。(CustomValidation)

キーワード＊セッション作成送信
 モデルバインダ
 検証
Controlller
HTTPリクエスト

 クライアント検証
（JavaScript）
Model

HTTPレスポンス
View  エラーメッセージの表示
 クライアント検証ができるように、
Htmlヘルパーを利用 61

ASP.NET MVC
アプリケーション作成
ここで時間オーバーにより
終了…

お疲れ様でした。

62

Hokuriku.NET ASP.NET MVC入門「実践」 20120825

More Related Content

What's hot (20)

Viewers also liked (8)

Similar to Hokuriku.NET ASP.NET MVC入門「実践」 20120825 (20)

More from miso- soup3 (7)