Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

13,095 views

Published on

2012/08/25 に開催したASP.NET MVC入門。
ハンズオン形式で、アプリを作成しました。

  • Be the first to comment

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

  1. 1. ASP.NET MVC 入門アプリケーション作成 以下、ASP.NET MVCを MVCと呼びます。 1
  2. 2. 全体像 ControlllerHTTPリクエスト ModelHTTPレスポンス View 2
  3. 3. 9月末に、Hokuriku.NET vol.10が開催されるということで、セッション・アンケート管理のWEBアプリを作成します。 3
  4. 4. プロジェクト作成・新しいプロジェクト>ASP.NET MVC 4 WEB アプリケーション・プロジェクトの名前を入力し、「OK」ボタン
  5. 5. プロジェクト作成 ・テンプレートを選択します。 ・ビューエンジンを選択します。 ・Razor ←今日はこれを選択。 ・ASPX ビューエンジンの選択について Viewを作成するときの構文 を選択します。 ASPX WEBフォームでの構文を記載 できます。 往来のスキルを活かせます。 Razor MVC3から追加されたもの。 タイピング数が少なくて楽 なので、Razorがオススメ。
  6. 6. プロジェクト構成 MVCは、「規約は設定に勝る」というコンセプトに基づいているため、 命名規則など、あらかじめ決められていることがあります。 (開発者が変更できるところとできないところがあります。) プロジェクト構成も、決められていることがあります。 Controllerクラスの場所  Controllers名前空間に属すこと。 MVCプロジェクト以外のプロジェクトでも良いが、その場合はプロジェクト参照設定 を 忘れない。 Controllerクラス  クラス名は「~~Controller」と、最後にControllerをつける。  Controllerクラスを継承する。 Viewファイルの場所  MVCプロジェクト配下のViewsフォルダの中に配置する。  Viewsファイルは、対応するControllerの名前のフォルダか、Sharedフォルダに配置。
  7. 7. URL HTTPメソッド 目的/Session/List GET セッション一覧を表示する 7
  8. 8. 一覧取得画面の流れを確認アクセス GET /Session/List 一覧画面のHtml
  9. 9. セッション一覧SessionControllerクラスを作成します。一覧の処理を実装する、アクションメソッドを作成します。 public ActionResult List() { return View(); }次に、一覧のViewを作成します。デバッグし、/Session/List にアクセスします。
  10. 10. フレームワークURL/Session/ListSessionControllerクラス ASP.NETインスタンス化 MVC フレームワークSessionControllerクラスのListメソッド実行List.csHtml より Htmlを出力
  11. 11. ルーティング初期設定URL SessionControllerクラスの/Session/List Listメソッド なぜ、/Session/List が SessionControllerクラスのListメソッド紐づいたか? RouteConfig.cs(またはGlobal.asax)にて、 そのように初期設定されている。 ルーティングの初期設定 /コントローラ名/アクションメソッド名/(ID) →ルーティング という機能ですが、このルーティングについては後程。
  12. 12. アクションメソッドアクションメソッド コントローラクラスの中に定義するメソッドです。 MVCのうちのコントローラの部分の処理を実装しているところです。 ユーザからのリクエストを、処理し、Viewを呼び出します。 基本的には、戻り値として、ActionResultクラスを返します。ActionResult アクションメソッドの結果を表す抽象クラスです。 アクションメソッドの結果を表すものは、このクラスを継承しています。 Viewを返す時は、ViewResultクラスを返し、 何かファイルをダウンロードさせたいときは、FileResultを返すなど いろいろな種類があります。
  13. 13. 戻り値のヘルパーメソッドreturn View(); ActionResultをインスタンス化して、返す処理を、 リファクタリングしたもの。 大体のActionResultを継承しているクラスはこのヘルパーが用意されています。
  14. 14. ActionResultの種類クラス名 概要 ヘルパーメソッド利用ContentResult 文字列を出力します return Content(“ya-!”);ViewResult ビューを出力します return View();PartialViewResult 部分ビューを出力します return PartialView();RedirectResult 指定されたURLにリダイ return レクトします Redirect("http://sample.com" );RedirectToRouteResul 指定されたアクションに、 returnt リダイレクトします RedirectToAction("Create");FileContentResult ファイルの内容を出力し return File(byte[], ます(バイト配列) "image/jpeg");HttpNotFoundResult 404を返します。 return HttpNotFound(); などなどたくさんあります。
  15. 15. Viewの指定Return View(); のように、引数に何も指定しない場合は、 Views/コントローラクラス名/アクションメソッドの名前 または、 Views/Shared/アクションメソッドの名前 が呼び出されされます。 Sharedフォルダ内は、すべてのコントローラ共有のViewを格納します。
  16. 16. Viewの指定 2return View(“Index”); のように文字列を指定すると、Viewの名前を指定できます。場所は、先ほどと同じように、 Views/コントローラクラス名/Index.csHtml Views/Shared/Index.csHtml コントローラクラス名のフォルダ、またはSharedフォルダの中のViewが指定されます。 View/違うコントローラのクラス名/….csHtml ↑のように、違うコントローラのクラス名のフォルダのViewは、 指定できません。
  17. 17. コントローラのインスタンス化コントローラのコンストラクタの引数に気をつける。コントローラのインスタンス化は、MVCフレームワークが行うので、コンストラクタの引数に、int number などを定義すると、「numberって何いれればいいの?」 とエラーが起きます。コンストラクタの引数を、開発者が定義し、フレームワークにこれ使ってね、と設定することは可能です。 キーワード: Unity, 依存性の注入, カスタムコントローラファクトリー
  18. 18. コントローラの作成をカスタムするフレームワークが行っているコントローラの作成を、開発者側で定義した方法で行うよう、定義します。以下は方法の1つです。カスタムコントローラファクトリーの作成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));
  19. 19. 多くの拡張ポイント MVCには、このように拡張できるポイントが、いくつもあります。 開発者の自由にカスタマイズできるところが、MVCの特徴でもあります。 (ほとんどはあまり使用されません。)アクションインボーカー アクションメソッドの実行、レスポンスの制御などコントローラファクトリー コントローラインンスタンスのファクトリディクショナリ値 リクエストの入力値の読み取りモデルバインダー ★よく使われる ディクショナリ値から、モデルを生成モデルバインダープロバイダー モデルバインダーを動的に作成するためのファクトリーモデルメタデータ モデルのメタ情報の取得と関連付けモデルバリデータ モデルメタデータの検証特化TempData TempDataのストレージビューエンジン HTMLを生成する機能をもつコンポーネント。 規定はASPX, Razor
  20. 20. キーワード*セッション一覧  実装-アクションメソッド Controlller HTTPリクエスト  ActionResultクラス Viewは指定できる Model HTTPレスポンス View 20
  21. 21. URL HTTPメソッド 目的/Session/Create GET セッションを作成するための 画面を取得します POST セッションを新規追加します 21
  22. 22. 作成時の流れを確認アクセス GET /Session/Create 作成画面のHtml入力POST /Session/Create Title = メトロアプリ作成 & Speaker = 太郎 DB登録 302 Redirect /Session/ListGET /Session/List 一覧画面のHtml 一覧画面確認 22
  23. 23. モデルの作成セッションのモデルを作成します。  タイトル string  サブタイトル string  開始時間 datetime  終了時間 datetime  発表者名 string  概要 string  参考URL string
  24. 24. 作成画面取得アクションメソッド一覧画面と同じように作成します。 public ActionResult Create() { return View(); }Viewを作成します。 メソッドの上で右クリック→ビューの追加 <div class="editor-label"> タイトル </div> <div class="editor-field"> @Html.TextBox("Title") </div>
  25. 25. おさらい 送信時の画面のHTML <form action=“home/create” method=“post”> POSTかGETSubmitボタンを押すと、 <input type=“text” name=“Who”Formで囲まれたコントロールの value=“Taro” />NameとValueの値をペアとして 送信する名前送信する。 <input type=“submit” /> と値のペア送信するときの、HTTPメソッドは、GETかPOSTの2つのどれか。 </form>GETの場合は、URIのクエリ文字列として、POSTの場合は、Bodyの値として送信される。
  26. 26. 作成画面 Html ヘルパーの利用<form></form> タグ @using (Html.BeginForm()) { } ↑だと、現在表示しているURLへ、POSTメソッドで送信します。 @using (Html.BeginForm( “action”, ← 送信先のアクションメソッド名 “controller”, ← 送信先のコントローラ名 new { id = 1 }, ← パラメータの設定 FormMethod.Get, ← GETで送信 new { @class = “form” })) { ← クラス属性の値設定 } ↑のように、たくさんのオプションを設定することもできます。 多くのHtmlヘルパーは、自由にオプションを設定することができます。
  27. 27. 作成画面 Html inputタグの作成<input type=“text”> タグ @Html.TextBox(“Title”) name属性の値がTitleである、テキストボックス のHtmlタグを出力します。<input type=“submit” />は対応するHtmlヘルパーがないのでそのまま。作成画面の取得の実装は以上です。/Session/Create にアクセス!
  28. 28. Razor @ここで、基本的なRazorの書き方を見てみます。コードブロック @{ var name = “Taro”; }if 文やforeach文は、@の後すぐに記述できます。 @if (true) { <span>こんにちは</span> }コメント @* 出力されません *@
  29. 29. Razor @ヘルパーメソッドの利用 @ViewMessage("メッセージ") @helper ViewMessage(string message) { <span>@message</span> }  全て、@から始まる  基本的にHtmlエスケープしてくれ ます。
  30. 30. マスターページマスターページとは HPへようこそ! HPへようこそ! あなたは123番目の 自己紹介します! お客様です! 名前:たろうくん 複数のページにまたがって同じものを描画したい時に使う。
  31. 31. マスターページ利用方法 マスターページを利用したいViewに記述します。 Layoutにマスタページのパスを指定します。省略 View/_ViewSart.csHtml に記述したものは、 すべてのページに反映されます。 ので、個別にLayoutを記述しなくてもOK
  32. 32. マスターページ@RendarBody() (マスターページ) この場所に、子ページの内容が入ります。
  33. 33. マスターページ@RenderSection(名前, required) (マスターページ) RendarBodyの他に、何か埋め込みたいときに記述します。 Requiredは、子ページ側で必ずコンテンツを指定するかどうかです。 デフォルトはtrueで、@RenderSection(“名前”)と書くと、 必ず子ページ側でコンテンツを記述する必要があります。@Section “名前” { } (子ページ) 子ページ側で、マスターページで RenderSectionと書いた場所に、 コンテンツを埋め込む方法です。 @sectionの後には、名前を指定します。 Requiredがfalseの場合は、記述しなく ても構いません。
  34. 34. キーワード*セッション作成取得 ControlllerHTTPリクエスト ModelHTTPレスポンス  Htmlヘルパー View  マスターページ  Razor記法 34
  35. 35. 作成画面 POST送信後の処理POST /Session/Create で送信された時の、アクションメソッドの仕事を確認します。入力POST /Session/Create Title = メトロアプリ作成 & Speaker = 太郎 DB登録 302 Redirect /Session/List仕事 送信された値を取得し、データベースを更新する。 更新後、一覧へするようリダイレクトを送信する。
  36. 36. 作成画面 POSTアクションメソッド一覧画面と同じように作成します。メソッド名が被るので、CreateRegistにします。 public ActionResult CreateRegist() { return View(); }リダイレクトを送信します。同じSessionコントローラのListメソッドを指定します。すると、MVCフレームワークは、そのアクションメソッドに対応するURLを生成して、リダイレクトを送信してくれます。 return RedirectToAction(“List");RedirectToActionは、多数の引数を指定可能です。 return RedirectToAction("Index", "Home", new { id = 3 });
  37. 37. 作成画面 POSTアクションメソッド//取得時public ActionResult Create(){ return View();}//送信時[ActionName("Create")][HttpPost]public ActionResult CreateRegist(){ return View();}/Session/CreateでPOST送信すると、上の取得メソッドの方にマッピンングされてしまいます。送信時の処理を行うのは、下のメソッドなので、2つの属性を追加します。どちらもActionNameSelectorAttributeを継承しているクラスで、アクションメソッドの選択に影響する属性です。
  38. 38. 作成画面 POSTアクションメソッドPOST /Session/Create Title = メトロアプリ作成 & SpeakerName = 太郎送信された値を取得します。方法は2つあります。① Request.Formで取得 var title = Request.Form["Title"]; var start = Request.Form["StartTime"];送信されたnameを文字列で指定し、値を取得する方法です。しかしこれでは、すべてstring型として1つ1つ取得するので、大変面倒です。一般的にこの方法は利用しません。
  39. 39. 作成画面 モデルバインダーそこで登場するのが2つ目の方法、モデルバインダーです。MVCの主要機能の1つです。POST /Session/Create Title = メトロアプリ作成 & StartTime = 2012/01/01モデルバインダは、フォーム送信データなどのHTTPリクエストの値(文字列)から、オブジェクト(クラスなど)を生成するプロセスのことです。
  40. 40. 作成画面 モデルバインダーモデルバインダーは、アクションメソッドの引数のオブジェクトに対して、行われます。引数に定義するだけで、モデルバインダーが働き、オブジェクトを生成してメソッドに渡してくれます。Request.Form[“Title”]を使うよりも、session クラスに値が入ってくれれば、開発者はとても楽になります。
  41. 41. 作成画面 モデルバインダー規定モデルバインダーのバインドルール定義したクラスの、プロパティ名と同じnameの値がバインドされます。 フォーム送信データ: Title = メトロアプリ作成 & StartTime = 2012/01/01 Session クラス ・Title プロパティ = “メトロアプリ作成” ・StartTime プロパティ = new DateTime(2012, 1, 1)
  42. 42. 作成画面 モデルバインダー規定モデルバインダーのバインドルール 2層 定義したクラスのプロパティが別のクラスの型であっても、バインドできます。 Nameは[プロパティ名] . [プロパティ名]です。(ドットをいれます。)フォーム送信データ:Title = メトロアプリ作成 &Speaker.Name = 2012/01/01 &Speaker.Location = “Toyama”
  43. 43. 作成画面 モデルバインダー規定モデルバインダーのバインドルール 階層 極端な話、何階層でも 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 より }
  44. 44. 作成画面 モデルバインダー規定モデルバインダーのバインドルール コレクション 定義したクラスのプロパティが、コレクションであってもバインドしてくれます。フォーム送信データ:Title = メトロアプリ作成 &Speakers[0] .Name = “ひとりめ” & Speakers[1] . Name = “ふたりめ”
  45. 45. 作成画面 モデルバインダー規定モデルバインダー 値の取得元バインドする時に参照する文字列は、フォーム送信だけではなく、他のHTTPリクエストの値も参照されます。  フォーム送信データ  ルートデータ(URLの一部)  クエリ文字列(URLの後ろ)  送信されたファイル
  46. 46. 作成画面 モデルバインダー規定モデルバインダー 注意定義したクラスのコンストラクタに、何か引数が指定している場合は、規定モデルバインダーは失敗します。どうしても引数ありのコンストラクタしか使えないのであれば、独自のモデルバインダーを作成する必要があります。
  47. 47. 作成画面 モデルバインダーまとめ  HTTPリクエストの内容を、文字列ではなく オブジェクトとして扱いやすくするためにPOST /Session/Create 利用する。 Title = メトロアプリ作成 & StartTime = 2012/01/01  アクションメソッドの引数に定義されたものを バインドしてくれる。  規定のモデルバイダーが動くが、独自の モデルバインダーを設定することができる。  バインドしやすいように、送信するnameを 制御するとよい。(方法については後程)
  48. 48. 作成画面 POSTアクションメソッド実装に戻ります。送信された値を取得するため、モデルバインダーを利用します。メソッドの引数にSessionを定義します。そのSessionでDBを更新します。デバッグ! DBに追加されたかを確認します。・・・開始日や終了日に何も入力しないと、コミット時にエラーが起きるはずです。
  49. 49. 作成画面 検証時の流れデータを作成するときは、値が適切になるよう、検証する必要があります。そして、ユーザに「この値は必ず入力してください」などと、伝える必要があります。検証を実装する前に、この時のHTTP通信の流れはどうなるのか?確認します。 この値じゃだめだよ! データ
  50. 50. 作成画面 検証時の流れを確認送信! POST /Session/Create Title = (空)& Speaker = 太郎 検証失敗 作成画面のHtml +ユーザが入力した値を 表示するHtml修正して送信! POST /Session/Create Title = タイトルやで& +検証失敗の理由を Speaker = 太郎 表示するHtml 成功 リダイレクトGET /Session/List 50
  51. 51. 作成画面 検証の実装検証の実装は、とても簡単です。①モデルに、検証属性を追加します。 51
  52. 52. 作成画面 検証の実装②Viewに検証メッセージを表示するようにします。 52
  53. 53. 作成画面 検証の実装③POST時のアクションメソッドで、検証に失敗した場合は、入力情報があるsessionをViewに渡し、表示させます。検証が成功した場合は、リダイレクトを送信します。検証機能の実装は以上です。デバッグ! 53
  54. 54. 作成画面 検証の実装しくみ モデルバインダーにて、Sessionクラスを生成するときに、 属性の情報を元に検証を行い、 ModelStateにエラー情報を格納しています。 また、ModelStateには、新たにエラー情報を追加することもできます。 54
  55. 55. 検証 クライアント側・サーバ側今実装したのは、サーバ側で検証する処理です。WEBアプリでは、サーバ側の他に、クライアント側で検証する方法があります。クライアント側で行う利点は、 不要な通信が減る レスポンスが早いの2つがあります。クライアント側の検証はJavaScriptとHtmlで行います。 ブラウザ上で検証 サーバで検証 Javascript データ 55
  56. 56. 検証 クライアント検証クライアント検証 注意 クライアント側だけで検証するのは控えてください。 クライアント側の処理なので、ユーザ側は自由に検証をOFFにすることができます。 (JavaScriptをOFFにしたり、ブラウザ以外で通信したり) ですので、サーバ側の検証は必ず実装してください。 ブラウザ上で検証 無防備なり Javascript データ 56
  57. 57. 検証 クライアント検証 実装クライアンド検証の実装も簡単です。①WebConfigの設定<appSettings> <add key="ClientValidationEnabled" value="true" /> <add key="UnobtrusiveJavaScriptEnabled" value="true" /></appSettings>クライアント検証を有効にするかどうかと、控え目なJavaScriptを有効にすうるかどうかの2つの値をtrueにします。(デフォルトで既にそうなっています。)↓のようにページに記述し、ページ単位で制御することも可能です。 @{ Html.EnableClientValidation(); Html.EnableUnobtrusiveJavaScript(); }
  58. 58. 検証 クライアント検証 実装②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で上記2つのファイルを読み込むよう設定してあります。)@Scripts.Render("~/bundles/jqueryval")
  59. 59. 検証 クライアント検証 実装③Htmlヘルパーの変更作成画面のViewに、下のコードを追加し、型情報よりViewを記述できるようにします。 @model HokurikuMvc.Models.Sessionまた、このコードを、 @Html.TextBox(“Title”) @Html.ValidationMessage(“Tite”) 下のように変更します。 @Html.TextBoxFor(m => m.Title) @Html.ValidationMessageFor(m => m.Title) これにより、検証属性の情報から、検証できるようHtmlタグが出力されます。 デバッグで、ソースを確認してみます。
  60. 60. 検証 他他、クライアントサイドの検証については非同期でサーバと通信し、検証を行うリモート検証や、独自の検証を実装する、カスタム検証があります。また、複数の値でから検証を行うこともできます。(CustomValidation)
  61. 61. キーワード*セッション作成送信  モデルバインダ  検証 Controlller HTTPリクエスト クライアント検証 (JavaScript) Model HTTPレスポンス View  エラーメッセージの表示  クライアント検証ができるように、 Htmlヘルパーを利用 61
  62. 62. ASP.NET MVCアプリケーション作成ここで時間オーバーにより 終了… お疲れ様でした。 62

×