コーディング不要!entity framework 6.1.3 + asp.net mvc 5 サンプル...
TRANSCRIPT
![Page 1: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/1.jpg)
コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書
日本マイクロソフト株式会社
開発ツール推進部
武田 正樹 [email protected]
最終更新日 : 2016 年 6 月 15 日
![Page 2: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/2.jpg)
2
本手順書で構築できるアプリケーション Entity Framework 6.1.3 + ASP.NET MVC 5 スキャフォールディング を利用して、
データベースからほぼノンコーディングで Web アプリケーションを作成します。
本手順書では、以下のソフトウェアを同一マシンにインストールしています。
Visual Studio 2015 (Professional / Enterprise / Community) SQL Server Express 2014
http://www.microsoft.com/ja-jp/download/details.aspx?id=42299
![Page 3: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/3.jpg)
3
目次
データベースの準備 4 ASP.NET プロジェクトの新規作成 10 モデルのリバース エンジニアリング 15 スキャフォールディングによるコントローラーとビューの生成 23 アプリケーションの実行 29
![Page 4: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/4.jpg)
データベースの準備
![Page 5: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/5.jpg)
5
1. Visual Studio 2015 を起動し、メニュー [ 表示 ]-[ サーバーエクスプローラー ] の順にクリックします。
データベースの準備 (1)
1
![Page 6: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/6.jpg)
6
1. サーバーエクスプローラーが表示されます。 [ データ接続 ] を右クリックします。2. [ 接続の追加 ] をクリックします。
データベースの準備 (2)
1
2
![Page 7: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/7.jpg)
7
データベースの準備 (3)1. 接続の追加ウイザードが表示されます。 [ サーバー名 ] に今回使用するデータベース名を入力します。2. データベースのログオン情報を入力します。今回は SQL Server 認証を使用しています。3. [ データベース名の選択または入力 ] を選択し、 [DatabaseFirst.Blogging] と入力します。4. [OK] をクリックします。
1
2
3
4
![Page 8: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/8.jpg)
8
1. サーバーエクスプローラーにデータベースのサーバー名が表示されますので、右クリックします。2. [ 新しいクエリ ] をクリックします。
データベースの準備 (4)
1
2
![Page 9: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/9.jpg)
9
SQL 文を実行して、 DatabaseFirst.Blogging データベースにテーブルを作成します。1. 以下の SQL 文を実行します。2. [▶] をクリックします。 SQL 文が実行され、テーブル [Blogs], [Posts] が作成されます。
データベースの準備 (5)
CREATE TABLE [dbo].[Blogs] ( [BlogId] INT IDENTITY (1, 1) NOT NULL, [Name] NVARCHAR (200) NULL, [Url] NVARCHAR (200) NULL, CONSTRAINT [PK_dbo.Blogs] PRIMARY KEY CLUSTERED ([BlogId] ASC) ); CREATE TABLE [dbo].[Posts] ( [PostId] INT IDENTITY (1, 1) NOT NULL, [Title] NVARCHAR (200) NULL, [Content] NTEXT NULL, [BlogId] INT NOT NULL, CONSTRAINT [PK_dbo.Posts] PRIMARY KEY CLUSTERED ([PostId] ASC), CONSTRAINT [FK_dbo.Posts_dbo.Blogs_BlogId] FOREIGN KEY ([BlogId]) REFERENCES [dbo].[Blogs] ([BlogId]) ON DELETE CASCADE );
1
2
![Page 10: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/10.jpg)
ASP.NET プロジェクトの新規作成
![Page 11: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/11.jpg)
11
1. メニュー [ ファイル ]-[ 新規作成 ]-[ プロジェクト ] の順にクリックします。
ASP.NET プロジェクトの新規作成 (1)
1
![Page 12: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/12.jpg)
12
1. [Visual C#]-[Web] をクリックします。2. [ASP.NET Web アプリケーション ] を選択します。3. [Application Insight をプロジェクトに追加 ] のチェックが外れていることを確認します。4. [ ソース管理に追加 ] のチェックが外れていることを確認します。5. [OK] をクリックします。
ASP.NET プロジェクトの新規作成 (2)
1
2
3
4 5
![Page 13: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/13.jpg)
13
1. [ASP.NET 4.6 テンプレート ] の [Empty] を選択します。2. [ フォルダーおよびコア参照を追加する ] の [MVC] にチェックをいれます。3. [ クラウドにホストする ] のチェックが外れていることを確認します。4. [OK] をクリックします。
ASP.NET プロジェクトの新規作成 (3)
1
23
4
![Page 14: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/14.jpg)
14
[ ソリューション エクスプローラー ] に、 ASP.NET プロジェクトが作成されていることを確認します。
ASP.NET プロジェクトの新規作成 (4)
![Page 15: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/15.jpg)
モデルのリバース エンジニアリング
![Page 16: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/16.jpg)
16
1. [ ソリューション エクスプローラー ] の [ プロジェクト ] を右クリックします。2. [ 追加 ] をクリックします。3. [ 新しい項目 ] をクリックします。
モデルのリバース エンジニアリング (1)
1
2
3
![Page 17: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/17.jpg)
17
1. [Visual C#]-[ データ ] をクリックします。2. [ADO.NET Entity Data Model] を選択します。3. [ 名前 ] を [BloggingModel] と入力します。4. [OK] をクリックします。
モデルのリバース エンジニアリング (2)
1
2
3 4
![Page 18: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/18.jpg)
18
1. Entity Data Model ウイザードが表示されます。 [ データベースから ED Designer] を選択します。2. [ 次へ ] をクリックします。
モデルのリバース エンジニアリング (3)
1
2
![Page 19: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/19.jpg)
19
1. データ接続が […DatabaseFirst.Blogging.dbo] となっていることを確認します。2. 今回は、 [ はい、データベース接続文字列に含めます。 ] を選択します。3. [ 接続設定に名前を付けて Web.Config に保存 ] にチェックがはいっていることを確認します。4. [BloggingContext] と入力します。5. [ 次へ ] をクリックします。
モデルのリバース エンジニアリング (4)
1
5
2
3
4
![Page 20: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/20.jpg)
20
1. 使用する Entity Framework のバージョンを指定します。 [Entity Framework 6.x] を選択します。2. [ 次へ ] をクリックします。
モデルのリバース エンジニアリング (5)
1
2
![Page 21: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/21.jpg)
21
1. [ モデルに含めるデータベース オブジェクト ] の [ テーブル ] にチェックをいれます。2. [ 生成されたオブジェクトの名前を複数化まとは単数化する ] にチェックをいれます。3. [ モデル名前空間 ] が [DatabaseFirst.BloggingModel] になっていることを確認します。4. [ 完了 ] をクリックします。 その後セキュリティ警告が表示されますが、 [OK] をクリックします。
モデルのリバース エンジニアリング (6)
1
4
3
2
![Page 22: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/22.jpg)
22
リバース エンジニアリングのプロセスが完了すると、新しいモデルがプロジェクトに追加され、自動的にそのモデルが開いて Entity Framework デザイナーに表示されます。
モデルのリバース エンジニアリング (7)
![Page 23: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/23.jpg)
スキャフォールディングによる コントローラーとビューの生成
![Page 24: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/24.jpg)
24
スキャフォールディングの前にプロジェクトのビルドを行う必要があります。1. [ ソリューション エクスプローラー ] の [ プロジェクト ] を右クリックします。2. [ ビルド ] をクリックします。
コントローラーとビューの生成 (1)
12
![Page 25: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/25.jpg)
25
スキャフォールディングでコントローラーとビューを自動生成します。1. [ ソリューション エクスプローラー ] の [Controllers] フォルダーを右クリックします。2. [ 追加 ] をクリックします。3. [ 新規スキャフォールディングアイテム ] をクリックします。
コントローラーとビューの生成 (2)
1
2
3
![Page 26: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/26.jpg)
26
1. [Entity Framework を使用した、ビューがある MVC 5 コントローラー ] を選択します。2. [OK] をクリックします。
コントローラーとビューの生成 (3)
1
2
![Page 27: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/27.jpg)
27
1. [ モデルクラス ] に [Blog(…)] を選択します。2. [ データコンテキスト クラス ] に [BloggingContext (…)] を選択します。3. [ 追加 ] をクリックします。
コントローラーとビューの生成 (4)
1
3
2
![Page 28: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/28.jpg)
28
コントローラーとビューが自動生成されたことを確認します。
コントローラーとビューの生成 (5)
![Page 29: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/29.jpg)
アプリケーションの実行
![Page 30: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/30.jpg)
30
1. メニュー [ デバッグ ]-[ デバッグの開始 ] の順にクリックします。
アプリケーションの実行 (1)
1
![Page 31: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/31.jpg)
31
[http://localhost:xxxxx/Blogs] にアクセスすると以下の画面が表示されます。これでアプリケーションの作成は完了です。アイテムの追加や編集などを実施して、問題なく動作していることを確認してましょう。
アプリケーションの実行 (2)
![Page 32: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/32.jpg)
FAQ
![Page 33: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書](https://reader034.vdocuments.site/reader034/viewer/2022050613/586fe0d71a28ab18428b752b/html5/thumbnails/33.jpg)
33
今回の手順書で使用しているスキャフォールディングのテンプレートは、 Visual Studio フォルダーにあります。各ビューの生成物とテンプレートの関係は以下のようになっています。
ビュー テンプレートの変更
C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web\Mvc\Scaffolding\Templates
C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web\Mvc\Scaffolding\Templates\MvcFullDependencyCodeGenerator