はじめてのasp.net mvc5

115
ははははは ASP.NET MVC 5

Upload: tomo-mizoe

Post on 25-May-2015

23.191 views

Category:

Software


4 download

DESCRIPTION

ASP.NET MVC5 の使い方を学習します。 HelloWorldからはじまって、映画のタイトル、監督、公開日等のCRUDができるWebアプリケーションを開発します。

TRANSCRIPT

Page 1: はじめてのASP.NET MVC5

はじめてのASP.NET MVC 5

Page 2: はじめてのASP.NET MVC5

About me

•Tomo Mizoe•CEO & Founder of July Inc.•http://www.july.co.jp•Twitter: @tmizoe

•Microsoft Certified Trainer•Microsoft Certified Solution Developer• Windows Store Apps using HTML5 and JavaScript• Web Applications

Page 4: はじめてのASP.NET MVC5

ASP.NET MVC の特徴

•MVC•C#•統合環境 Visual Studio• コード補完• 文法チェック

• Facebook 、 Twitter 、 Office 365 など各種認証のモジュール導入も簡単•Single Page Application にも対応( AngularJS 等)•デプロイ• Azure へクリック 1 回• Azure だからスケールアップもクリック 2-3 回

Page 5: はじめてのASP.NET MVC5

用意するもの

•Windows OS•Visual Studio 2013 Express for Web ( 無償 )有償版でも、もちろん OK

Page 6: はじめてのASP.NET MVC5

新プロジェクト作成

•ファイル ⇒ 新しいプロジェクト

Page 7: はじめてのASP.NET MVC5

インストール済み: Visual C# : ASP.NET Web アプリケーション

名前「 MvcMovie 」

Page 8: はじめてのASP.NET MVC5

テンプレート「 MVC 」Windows Azure 「クラウド内のホスト:オフ」

Page 9: はじめてのASP.NET MVC5

新しいプロジェクトの完成

Page 10: はじめてのASP.NET MVC5

まだ何もしてないけどコンパイルして実行してみる

•デバッグ⇒デバッグ開始•または F5

Page 11: はじめてのASP.NET MVC5

何もしてないけどレスポンシブ スマホはメニューをたたむ

PCは 3カラム

タブレットとスマホは1カラム

Page 12: はじめてのASP.NET MVC5

コントローラ追加

•コントローラ:処理の振り分け担当•ソリューションエクスプローラ⇒(プロジェクト名)⇒ Controllers フォルダ右クリック⇒追加⇒コントローラー

Page 13: はじめてのASP.NET MVC5

•MVC 5 コントローラ⇒追加

コントローラ追加

Page 14: はじめてのASP.NET MVC5

コントローラ追加

•コントローラ名: HelloworldController

Page 15: はじめてのASP.NET MVC5

追加されたもの•Controllers• HelloworldController.cs

•Views• Helloworld フォルダ

コントローラ追加

Page 16: はじめてのASP.NET MVC5

HelloworldController.cs 編集

Page 17: はじめてのASP.NET MVC5

デバッグ実行

• F5 キーまたはデバッグ⇒ デバッグ開始

•ブラウザで URL 指定• http://localhost:55880/Helloworld/• http://localhost:55880/Helloworld/Welcome※ 55880 の部分はポート番号。実行タイミングや IIS の設定で異なります

Page 18: はじめてのASP.NET MVC5

ルーティング

•どのコントローラーを呼び出すか指定•どのメソッドを呼び出すか指定•引数の処理

•App_Start / RouteConfig.cs

Page 19: はじめてのASP.NET MVC5

ルーティング

defaults: new { controller = "Helloworld",action = "Welcome", id = UrlParameter.Optional }

デフォルトのコントローラとアクションを変更controller = “Helloworld”,action = “Welcome”

Page 20: はじめてのASP.NET MVC5

パラメータ

•HelloworldController.cs の Welcome アクションを編集 デフォルト値の

指定もできるよ

http://サーバ名 /?name=文字列&numTimes=整数

HttpUtility.HtmlEncode特殊文字等を使った攻撃を無効化

Page 21: はじめてのASP.NET MVC5

パラメータに変な値が入ったらどうなる?

•試しにやってみようhttp://サーバ名 /?numTimes=2.3http://サーバ名 /?numTimes=5%http://サーバ名 /?numTimes=“8”

•コントローラ・アクションの大文字小文字は?/helloWORLD/welCOMe/?name=aaa

Page 22: はじめてのASP.NET MVC5

アクション追加

HelloworldController.cs に Login アクション追加

アクセスしてみる/helloworld/login/?id=3&name=Taro/helloworld/login/4?name=Jiro

Page 23: はじめてのASP.NET MVC5

なぜ 「 id= 」を省略できたか

•App_Start / RouteConfig.cs

Page 24: はじめてのASP.NET MVC5

ここまででやったこと

•コントローラで HTML を return ( View Controller )•まぁ、難しくない。

•でも、 HTML が複雑になると大変になるよね?•そんなあなたに!  View  です

Page 25: はじめてのASP.NET MVC5

View 作成

•作業内容: HelloWorldController にView テンプレートを適用

•Razor view engine • 拡張子 .cshtml• C# で HTML を生成• テンプレート作成時のキータイピングを最小化• 効率よくコーディング

Page 26: はじめてのASP.NET MVC5

Controller が View オブジェクトを return するように変更

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

テンプレートを使うように、 View に指令する。

コントローラのメソッド(=アクションメソッド)は多くの場合、 ActionResult (またはそれを継承したクラス)をreturn する。

Page 27: はじめてのASP.NET MVC5

View 追加

•Views / HelloWorld 右クリック⇒追加⇒レイアウトを使用する MVC 5 ビューページ( Razor )

Page 28: はじめてのASP.NET MVC5

項目名とレイアウトページ

•項目名: Index

•レイアウトページの選択: _Layout.cshtml•Shared 選択•OK

Page 29: はじめてのASP.NET MVC5

確認

•Views / HelloWorld / Index.cshtml が追加されている

Page 30: はじめてのASP.NET MVC5

コード追加

Page 31: はじめてのASP.NET MVC5

確認

• Index.cshtml 右クリック⇒ブラウザーで表示

Page 32: はじめてのASP.NET MVC5

タイトル、トップのリンクを変更

「アプリケーション名」「ホーム」「詳細」のところ

Shared / _Layout.cshtml を開く•すべてのページで共有•「レイアウトページ」と呼ぶ

Page 33: はじめてのASP.NET MVC5

レイアウトページ編集

Page 34: はじめてのASP.NET MVC5

レイアウトページ確認

•Views/HelloWorld/Index.cshtmlに次の記述があるのでレイアウトページが呼ばれる

@{ Layout = "~/Views/Shared/_Layout.cshtml";}

Page 35: はじめてのASP.NET MVC5

Index.cshtml を編集

@{ ViewBag.Title = “My Movie List";}

<h2>Movie List</h2><p>Hello from View テンプレート !</p>

ページタイトル

Page 36: はじめてのASP.NET MVC5

<head><title>

レイアウトページの@ViewBag.Title で読み込まれる

ViewBag にはパラメータを自由に含めることができる

Page 37: はじめてのASP.NET MVC5

この段階でできたこと

•固定のデータ「 Hello from View テンプレート ! 」を View に設定し、表示させる

•次は:• データを可変にしたい。データベースに保存されたデータを表示させたい。• ⇒Model をつくります

Page 38: はじめてのASP.NET MVC5

データの流れ

•Model  ⇒  Controller  ⇒  View

•View では処理を実行したり、データを作成しない。•処理ロジックは Controller へ•データは Model からもらったものをそのまま使う

Page 39: はじめてのASP.NET MVC5

HelloWorldController.cs の Welcome アクション変更

View に対して ViewBag オブジェクトでデータを渡す。このデータは URI で受け取った、ユーザからのパラメータとします。

ViewBag はダイナミックオブジェクトで、なんでも入れることが可能。

Page 40: はじめてのASP.NET MVC5

この時点での HelloWorldController.cs

Page 41: はじめてのASP.NET MVC5

ソリューションをビルドしておく

•ソリューションを右クリック⇒ソリューションのビルド

Page 42: はじめてのASP.NET MVC5

View 追加

Views/HelloWorld を右クリック⇒ 追加⇒レイアウトを使用する MVC5 ビューページ( Razor )

Page 43: はじめてのASP.NET MVC5

View 追加

•項目名: Welcome

•レイアウトページの選択: _Layout.cshtml•Shared 選択•OK

Page 44: はじめてのASP.NET MVC5

Welcome.cshtml

•ViewBag で受け取った Message を NumTimes個表示させる

Page 45: はじめてのASP.NET MVC5

動作確認

http://localhost:x/HelloWorld/Welcome?name=Taro&numtimes=4

モデルバインダにより、URI から取得したデータをController が受け取り、ViewBag 経由で View に渡す。

ViewBag の代わりに「 View Model 」を使う方法もある。後述。

Page 46: はじめてのASP.NET MVC5

Model

•データベースとの接続部分•  Entity Framework (EF)  による Code First 手法•シンプルなクラスによる Model 定義( POCO クラス "plain-old CLR objects") •クラスを定義 = データベースのテーブル作成

•Database First 手法もありますhttp://www.asp.net/visual-studio/overview/2013/aspnet-scaffolding-overview (by Tom Fizmakens)

迅速な開発

Page 47: はじめてのASP.NET MVC5

Model 追加してみよう

•Models⇒ 追加⇒クラス

•クラス名Movie

Page 48: はじめてのASP.NET MVC5

Model にクラス Movie 追加

•映画のタイトル等を管理するデータベース•Movie オブジェクトのインスタンス = データベースのレコード•Movie オブジェクトのプロパティ = データベースのカラム

Page 49: はじめてのASP.NET MVC5

Model にクラス MovieDBContext 追加

Entity Framework

Page 50: はじめてのASP.NET MVC5

MovieDBContext クラスの役割

•Entity Framework の基底クラス DbContext を継承

•データベースに接続して:•検索• 保存• 更新•削除

•DbContext と DbSet の参照のためにはファイル上部で「 using System.Data.Entity; 」が必要。

Page 51: はじめてのASP.NET MVC5

Note: 未使用の using の削除

•ファイル右クリック⇒ using の整理⇒未使用の using の削除

Page 52: はじめてのASP.NET MVC5

ここまでのおさらい

•ついに Model も追加•MVC のすべてが登場• Model• View• Controller

•次は、データベースと接続していきます

Page 53: はじめてのASP.NET MVC5

SQL Server LocalDB との接続

•MovieDBContext クラスは、 Movie オブジェクトをデータベースのレコードにマッピングする•では、どのデータベースに接続するか?•まだデータベースの設定はしていないはず… ?

•Entity Framework のデフォルト設定ではLocalDB を使います•設定はアプリケーションの Web.config ファイルで

Page 54: はじめてのASP.NET MVC5

SQL Server Express LocalDB

• LocalDB• SQL Server Express の軽量版• .mdf ファイルをデータベースとして取り扱う•通常、プロジェクトの App_Data フォルダに保存• リリース時には使わないほうが良い⇒ Web サーバと一緒に使うことを想定していないから• ただし LocalDB からの変換は簡単

• SQL Server• SQL Azure

• Visual Studio 2013 と一緒に LocalDB がインストールされます( 2012 でも)• Entity Framework は最初に、オブジェクトのコンテキストクラスと同じ名前の接続文字列を探します。

(今の場合は MovieDBContext )

Page 55: はじめてのASP.NET MVC5

接続文字列の確認

•Web.config を開く

•<connectionStrings> を探す

Page 56: はじめてのASP.NET MVC5

MovieDBContext の接続文字列を追加

<add name="MovieDBContext" connectionString="Data Source=(LocalDB)\v11.0;

AttachDbFilename=|DataDirectory|\Movies.mdf; Integrated Security=True" providerName="System.Data.SqlClient"/>

新規プロジェクトに入っている「 <add name=“DefaultConnection” 」の部分とほとんど同じです。コピペしてから編集すると便利

DefaultConnection はユーザのアクセス権を担当

会員ページの作成はここではやりません。下記を参照http://www.windowsazure.com/en-us/develop/net/tutorials/web-site-with-sql-database/

Page 57: はじめてのASP.NET MVC5

Model と接続文字列

•接続文字列の Nameと DbContext クラスの名前は一致させる

•  .mdf ファイルの名前はご自由に

Page 58: はじめてのASP.NET MVC5

Controller から Model のデータにアクセス

•MoviesController クラスを新規作成• 映画のデータを取り出す• 映画の一覧を View テンプレートでブラウザに表示させる

•作業の前にビルドしておいてくださいビルドしないとエラーが出るかも

Page 59: はじめてのASP.NET MVC5

Controller 追加

•Controller 右クリック⇒追加⇒コントローラ-

Page 60: はじめてのASP.NET MVC5

•「 Entity Framework を使用した、ビューがある MVC5 コントローラー」⇒追加•MoviesController⇒ 追加

Page 61: はじめてのASP.NET MVC5

Controller 追加

プルダウンから選ぶ•モデルクラス: Movie(MvcMovie.Models)•データコンテキストクラス:MovieDBContext(MvcMovie.Models)

※ 追加ボタンでエラーになる場合は、ビルドしてください

Page 62: はじめてのASP.NET MVC5

この操作でできたファイル

•Controllers/MoviesController.cs•Views/Movies フォルダ• Create.cshtml• Delete.cshtml• Details.cshtml• Edit.cshtml• Index.cshtml

•自動的に CRUD(Create, Read, Update, Delete) アクションメソッドと、 View が作られる•映画データの作成、一覧表示、編集、削除ができるようになった! ありがとう!

Page 63: はじめてのASP.NET MVC5

動作確認

•Views/Index.cshtml右クリック⇒ブラウザで表示

Page 64: はじめてのASP.NET MVC5

ルーティング設定

•App_Start/RouteConfig.cs

routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "Movies",

action = "Index", id = UrlParameter.Optional }

);

http://localhost:xx/ でアクセス可能に

Page 65: はじめてのASP.NET MVC5

新しいデータを作成

• Index ページで Create New を押す•適当なデータを入力してみる•わざと変な値を入れてみるRelease Date: todayPrice: -9,999

•入力したら Edit, Details, Delete も動作確認

Page 66: はじめてのASP.NET MVC5

MoviesController.cs に自動生成されたコードを確認

•先頭部分 データベースからのMovie コンテキスト

DB の Movies テーブルはそのまますべて View に転送

Page 67: はじめてのASP.NET MVC5

厳密な型指定の Model とキーワード @model

•このチュートリアルの最初のほうで ViewBag を紹介しました。データやオブジェクトを転送する。これは遅延バインディングによるダイナミックオブジェクト。•これに対し、厳密に型指定して View テンプレートにオブジェクトを渡すこともできます。⇒ コンパイル時のチェックと、 Visual Studio のIntelliSence によるコードチェックを便利に利用できる•今回のスキャフォールディング機能は厳密な型指定による MoviesController クラスと View テンプレートを作成

•次に、自動生成の Details メソッドを確認してみよう

Page 68: はじめてのASP.NET MVC5

自動生成の Details メソッド

• パラメータ「 id 」は基本としてルートデータから獲得• 例) http://localhost:xx/movies/details/1

• コントローラ: Movies• アクション: Details• ID: 1

• http://localhost:xx/movies/details?1 でも同じ

Movie がみつかったら View に渡す

Page 69: はじめてのASP.NET MVC5

Views/Movies/Details.cshtml

@model によって、このView が参照すべき型を指定

後述のため略

Model のタイトルのカラム名

ViewBag も一緒に使える

Page 70: はじめてのASP.NET MVC5

Views/Movie/Index.cshtml

item: 厳密な型指定Ienumerable<Movie>

オブジェクト

型指定のおかげでforeach できる

型指定のおかげでIntelliSence が効く

Page 71: はじめてのASP.NET MVC5

SQL Server LocalDB

•Entity Framework の Code First は、指定されたMovies のデータベースがなければ自動的に生成•App_Data フォルダに Movies.mdf が保存される•ソリューションエクスプローラで見えないとき:「すべてのファイルを表示」をオン「最新の情報に更新」を押す

Page 72: はじめてのASP.NET MVC5

サーバーエクスプローラー

•Movies.mdf をダブルクリック•テーブルフォルダを開いて確認• ID は鍵アイコン⇒プライマリキー

•参考:「 Getting Started with Entity Framework 6 Code First using MVC 5 」http://www.asp.net/mvc/tutorials/getting-started-with-ef-using-mvc/creating-an-entity-framework-data-model-for-an-asp-net-mvc-application

Page 73: はじめてのASP.NET MVC5

テーブルデータの表示

•Movies テーブルを右クリック⇒テーブルデータの表示

•入力したレコードが確認できる

Page 74: はじめてのASP.NET MVC5

テーブル定義を開く

•Movies テーブルを右クリック⇒テーブル定義を開く•テーブルの構造を確認

•Movies テーブルと Movies クラスが結合されている•Entity Framework による自動生成のスキーマによる

Page 75: はじめてのASP.NET MVC5

切断

•確認が終わったら MovieDBContext を右クリック⇒切断•切断しておかないと、次のプロジェクト実行時にエラーになる

•次のトピック• スキャフォールディングの残りのコード•検索インデックス

Page 76: はじめてのASP.NET MVC5

Edit メソッドと Edit View

•Edit アクションメソッドの詳細を確認•その前に: Release Date を調整します•Models/Movie.cs を開く•ハイライト部分を追加

Display(Name=“ リリース日” )

Page 77: はじめてのASP.NET MVC5

動作確認

•ビルドして一覧から Edit を選択⇒ URI を確認: /Movies/Edit/1•Views/Movies/Index.cshtml の ActionLink メソッドで URI を生成している@Html.ActionLink("Edit", "Edit", new { id=item.ID })• リンク文字を日本語にするには:@Html.ActionLink(“ 編集 ", "Edit", new { id=item.ID })

•価格を DataType.Currency にしてみよう

Page 78: はじめてのASP.NET MVC5

ActionLink メソッド

•Html オブジェクト:System.Web.Mvc.WebViewPage を継承するヘルパー•ヘルパーの ActionLink メソッドは Controller アクションメソッドへの HTML リンクを動的に生成•引数 1: 表示される文字(例: <a> 編集 </a> )•引数 2: アクションメソッド(例: Edit アクション)•引数 3: ルーティングのための匿名オブジェクト(例 :ID )

•結果として URI は http://localhost:xx/Movies/Edit/4のようになる。参考: App_Start/RouteConfig.cs

•課題: Create New, Details, Delete も日本語にしてみよう

Page 79: はじめてのASP.NET MVC5

パラメータの指定方法

•http://localhost:xx/movies/edit?id=2 でも指定できる

POST の場合・ Bind 属性による攻撃の無効化・受け取るデータの選択(今回はすべて)

Edit アクションメソッドが2つある。こっちは GET の場合

ValidateAntiForgeryTokenリクエスト偽装のためのトークン発行Views/Movies/Edit.cshtml も参照

Page 80: はじめてのASP.NET MVC5

Html.ValidateAntiForgeryToken()

•クロスサイトスクリプティング (XSRF, CSRF)攻撃対策• type=hidden の input要素を生成し、トークンを埋め込む• Movies Controller の Edit メソッドと一致していなければ先に進めない

Page 81: はじめてのASP.NET MVC5

HttpGet メソッド

•Movie の ID を取得•Entity Framework の Find メソッドで DB のレコード検索•見つからないときは HttpNotFound を返す•スキャフォールディングのとき:• View に <label> と <input>要素も一緒に作る

Page 82: はじめてのASP.NET MVC5

HTMLヘルパー

•Html.LabelForフィールド名 (Title, ReleaseDate, Genre, Price) を出力•Html.EditFor<input> を出力•Html.ValidationMessageForバリデーションメッセージ

• /Movies/Edit/id にアクセスして HTML ソースを確認

Page 83: はじめてのASP.NET MVC5

/Movies/Edit に POST データが渡ったとき

•Saveボタンが押されると <form> から /Movies/Editを呼ぶ モデルバインダが POST

データを取得し、 Movieオブジェクトを作成

取得したデータが Movie オブジェクトの編集・更新に利用できるかどうかチェック

DB に保存

保存後 Index に戻り、 Movie の一覧を表示。いま保存したばかりのデータも一緒に表示する。

Page 84: はじめてのASP.NET MVC5

/Views/Movies/Edit.cshtml のバリデーション•Html.ValidationMessageForヘルパーによるエラーメッセージ

Page 85: はじめてのASP.NET MVC5

POST と GET

•HttpGet の場合• Movie オブジェクト( Index の場合はオブジェクトのリスト)を

Model から取得する

Model に変更を加える場合(作成、編集、削除)は POST を使う(セキュリティのためと、 REST パターンのため)

Page 86: はじめてのASP.NET MVC5

検索機能

•ジャンルや名前で検索できるようにしよう•MoviesController の Index アクションを編集

•movies: DB から検索するための LINQ クエリ• searchString が存在するときはクエリを変更•「 s=>s.Title 」というのはラムダ表現•Contains は SQL の Like にマップされる• /movies/index?searchString=検索語

Page 87: はじめてのASP.NET MVC5

検索機能のためのルーティング調整

• /App_Start/RouteConfig.cs の設定{Controller}/{action}/{id}

•{id} で string も受け付けるように調整

• /movies/index/検索語

Page 88: はじめてのASP.NET MVC5

検索ボックス

•URL で指定するのも大変なので元に戻します

• /Views/Movies/Index.cshtml を編集@Html.ActionLink(“ 新規作成” , “Create”) のすぐ下

Page 89: はじめてのASP.NET MVC5

検索ボックス

•Html.BeginForm ヘルパー• <form> タグを作成•検索ボタンを押したら、自分自身に POST

•検索するだけでデータの変更はない ⇒ GET で良いので、 HttpPost をオーバーロードする必要はない•しかし、 POST を使うこともできる(MoviesController に追加)

Page 90: はじめてのASP.NET MVC5

フレンドリー URL

•POST だと次のような場合にページを再現できない• ブックマークしたとき• メールで URL を送るとき

•解決策: BeginForm をオーバーロードして、 POSTだった場合は GET バージョンの Index メソッドに転送する

Page 91: はじめてのASP.NET MVC5

ジャンル (Genre) で検索 : Controller

•MoviesController.cs を再編集

Page 92: はじめてのASP.NET MVC5

ジャンル (Genre) で検索 : Controller

パラメータ追加

ジャンルをデータベースから獲得し、リスト GenreLst へ

Distinct()… 重複を避ける

ViewBag にSelectList として保存

movieGenre を調べて、カラでなかったら…

… 今後の movie はジャンルでフィルタリングする

Page 93: はじめてのASP.NET MVC5

ジャンル (Genre) で検索 : View

•Views/Movies/index.cshtml

• movieGenre … Controller が ViewBag に保存したやつ• Html.DropDownList … ViewBag から IEnumerable<SelectListItem> を探してドロップダウンリストを出力

Page 94: はじめてのASP.NET MVC5

動作確認と課題• ジャンル、タイトル、およびその両方で検索して動作確認

• やってみよう: リリース日、価格で検索できるようにしよう

• 映画の主演俳優を追加するにはどうしたら良いでしょうか?⇒データベースの変更が必要: 次の章へ。

Page 95: はじめてのASP.NET MVC5

DB に新しいフィールドを追加

•Entity Framework の Code First では、 Migrationにより Model クラスへの変更をデータベースに反映させることができる•このチュートリアルの最初のほうで試したように、Model クラスに見合うデータベーススキーマに同期するように、 Code First が自動的にテーブルを追加する。•同期していなければ Entity Framework がエラーを返す•エラーが出ることで、実行時の不具合の原因が明確になる

Page 96: はじめてのASP.NET MVC5

Code First Migrations の設定

•既存のデータベースを削除ソリューションエクスプローラ⇒ App_Data/Movies.mdf を右クリック⇒ 削除

Page 97: はじめてのASP.NET MVC5

Code First Migrations の設定

•ライブラリパッケージマネージャを開くツール⇒ NuGet パッケージマネージャー   ⇒パッケージマネージャーコンソール

Page 98: はじめてのASP.NET MVC5

パッケージマネージャーコンソール

•プロンプト 「 PM> 」で次のコマンドレットEnable-Migrations -ContextTypeName MvcMovie.Models.MovieDBContext

•プロジェクトに Migration フォルダが作成される•Configuration.cs を開き、次ページのように編集

Page 99: はじめてのASP.NET MVC5

※ 映画のタイトルと数はご自由に

Page 100: はじめてのASP.NET MVC5

Code First Migrations

•Code First Migrations はマイグレーションの後に毎回 Seed メソッドを呼び出す•AddOrUpdate :レコードが存在しなければinsert 、存在していれば update を実行( upsert )•AddOrUpdate の最初の引数:そのレコードが存在しているかを確認するためのカラム。今回はTitle(重複した Title を登録しようとするとエラー)

•ソリューションのビルドを実行(やっておかないとこれに続く操作でエラーになります)

Page 101: はじめてのASP.NET MVC5

Code First Migrations

•パッケージマネージャーコンソールでadd-migration Initial

•プロジェクトに Migrations/( タイムスタンプ )_Initial.cs が作成される。このファイルにはデータベーススキーマが含まれている。(開いて確認)•再びパッケージマネージャーコンソールでupdate-database

「 Initial 」は migration ファイルの名前で、任意に指定できる

Page 102: はじめてのASP.NET MVC5

Code First Migrations

•update-database はレコードがすでに存在するとエラー「シーケンスに複数の要素が含まれています」•この場合はデータベースの削除からやり直し•成功していれば、アプリケーションを実行して /Movies にアクセスすると Seed のレコードが一覧に出る

Page 103: はじめてのASP.NET MVC5

カラム追加

•「 Director 」カラムを追加したい

•必要な作業は?• Model 、 View 、 Controller修正• データベース更新

•まずModels/Movies.cs•変更したらビルド(画面左下に注目)

Page 104: はじめてのASP.NET MVC5

MovieController.cs の編集

public ActionResult Create([Bind(Include = "ID,Title,Director,ReleaseDate,Genre,Price")] Movie movie)

public ActionResult Edit([Bind(Include = "ID,Title,Director,ReleaseDate,Genre,Price")] Movie movie)

Page 105: はじめてのASP.NET MVC5

Views/Movies/Index.cshtml

•一覧で監督が出るように

Page 106: はじめてのASP.NET MVC5

Views/Movies/Create.cshtml

•Create で監督が出るように

•Details.cshtml 、 Edit.cshtml も同様に変更

Page 107: はじめてのASP.NET MVC5

エラーの確認

•この時点で Index.cshtml にアクセスするとエラー

⇒ カラムが変更されているため•対処法はいくつかあるが今回は Code First の「 Migration 」機能を使う

Page 108: はじめてのASP.NET MVC5

Migrations/Configuration.cs の Seed を変更•Movies オブジェクトに「 Director 」を追加

•パッケージマネージャーコンソールで次のコマンドadd-migration Director

Page 109: はじめてのASP.NET MVC5

Migration ファイル

•自動生成された Migrations ファイルが開く

namespace MvcMovie.Migrations{ using System; using System.Data.Entity.Migrations; public partial class Director : DbMigration { public override void Up() { AddColumn("dbo.Movies", "Director", c => c.String()); } public override void Down() { DropColumn("dbo.Movies", "Director"); } }}

Page 110: はじめてのASP.NET MVC5

update-database

•パッケージマネージャーコンソールでupdate-database

•再実行して動作確認

Page 111: はじめてのASP.NET MVC5

バリデーション

•セキュリティの観点から、ユーザから送られてくるデータは、すべてチェックしなければなりません。•ASP.NET MVC の DRY(Don’t Repeat Yourself) により、チェックは一度限りにする⇒ エラーの軽減、開発のスピードアップ•バリデーションのルールを 1箇所に書けば、アプリケーションの全体で共有する

•Movie Model にバリデーションを追加⇒  Movie.cs を編集

Page 112: はじめてのASP.NET MVC5

[StringLength(60, MinimumLength=1), Required] [Display(Name = " タイトル ")] public string Title { get; set; }

[Display(Name = "監督 ")] public string Director { get; set; } [Display(Name = " リリース日 ")] [DisplayFormat(DataFormatString="{0:yyyy-MM-dd}", ApplyFormatInEditMode=true)] public DateTime ReleaseDate { get; set; }

[Display(Name = " ジャンル ")] public string Genre { get; set; }

[Display(Name = "価格 ")] [DataType(DataType.Currency)] [Range(1,999999, ErrorMessage="{0} は {1}~ {2} の間で入力してください。 ")] public decimal Price { get; set; }

最大 60 文字最小 1 文字必須

バリデーション Movie.cs

編集時も表示形式を適用

{0} Display(Name){1} Range(Min){2} Range(Max)

Page 113: はじめてのASP.NET MVC5

テーブル構造の確認、変更

•サーバーエクスプローラー⇒ Movies テーブル右クリック⇒テーブル定義を開く•すべての文字列カラムのデータ型は nvarchar(MAX)•このスキーマを変更するため Migration を使う•パッケージマネージャーコンソールでadd-migration DataAnnotationsupdate-database

Page 114: はじめてのASP.NET MVC5

自動生成された Delete メソッド

    // GET: Movies/Delete/5 public ActionResult Delete(int? id) { if (id == null) { return new HttpStatusCodeResult(HttpStatusCode.BadRequest); } Movie movie = db.Movies.Find(id); if (movie == null) { return HttpNotFound(); } return View(movie); }

// POST: Movies/Delete/5 [HttpPost, ActionName("Delete")] [ValidateAntiForgeryToken] public ActionResult DeleteConfirmed(int id) { Movie movie = db.Movies.Find(id); db.Movies.Remove(movie); db.SaveChanges(); return RedirectToAction("Index"); }

削除ボタンを押すと最初に GET でリクエストする。この時点では確認ウィンドウを出すのみで、データベースを変更しない

POST リクエストで、かつトークンのバリデーションが OK だったとき

データベースに変更を加える

DeleteConfirmed メソッドのアクション名を” Delete” に

Page 115: はじめてのASP.NET MVC5

まとめ

•ASP.NET MVC5 で Web アプリケーションを作成した•データは LocalDB に保存できた•映画の情報の CRUD ( Create, Read, Update, Delete) と検索の機能を作った

次のステップ• 「 Deploy a Secure ASP.NET MVC 5 app with Membership, OAuth, and SQL Database to an Azure Web Site 」• 「 Getting Started with Entity Framework 6 Code First using MVC 5 」•マイクロソフト公式トレーニング #20486「 ASP.NET MVC 4 Web アプリケーションの開発」 (日本語 )