コーディング不要!entity framework 6.1.3 + asp.net mvc 5 サンプル...

33
ココココココココEntity Framework 6.1.3 + ASP.NET MVC 5 ココココ ココココココココココ コココ 日日日日日日日日日日日日日 日日日日日日日日 日日 日日 [email protected] om 日日日日日 : 2016 日 6 日 15 日

Upload: masaki-takeda

Post on 16-Apr-2017

2.394 views

Category:

Software


5 download

TRANSCRIPT

Page 1: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書

コーディング不要!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 サンプル アプリケーション構築 手順書

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 サンプル アプリケーション構築 手順書

3

目次

データベースの準備 4 ASP.NET プロジェクトの新規作成 10 モデルのリバース エンジニアリング 15 スキャフォールディングによるコントローラーとビューの生成 23 アプリケーションの実行 29

Page 4: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書

データベースの準備

Page 5: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書

5

1. Visual Studio 2015 を起動し、メニュー [ 表示 ]-[ サーバーエクスプローラー ] の順にクリックします。

データベースの準備 (1)

1

Page 6: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書

6

1. サーバーエクスプローラーが表示されます。 [ データ接続 ] を右クリックします。2. [ 接続の追加 ] をクリックします。

データベースの準備 (2)

1

2

Page 7: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書

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 サンプル アプリケーション構築 手順書

8

1. サーバーエクスプローラーにデータベースのサーバー名が表示されますので、右クリックします。2. [ 新しいクエリ ] をクリックします。

データベースの準備 (4)

1

2

Page 9: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書

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 サンプル アプリケーション構築 手順書

ASP.NET プロジェクトの新規作成

Page 11: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書

11

1. メニュー [ ファイル ]-[ 新規作成 ]-[ プロジェクト ] の順にクリックします。

ASP.NET プロジェクトの新規作成 (1)

1

Page 12: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書

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 サンプル アプリケーション構築 手順書

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 サンプル アプリケーション構築 手順書

14

[ ソリューション エクスプローラー ] に、 ASP.NET プロジェクトが作成されていることを確認します。

ASP.NET プロジェクトの新規作成 (4)

Page 15: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書

モデルのリバース エンジニアリング

Page 16: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書

16

1. [ ソリューション エクスプローラー ] の [ プロジェクト ] を右クリックします。2. [ 追加 ] をクリックします。3. [ 新しい項目 ] をクリックします。

モデルのリバース エンジニアリング (1)

1

2

3

Page 17: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書

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 サンプル アプリケーション構築 手順書

18

1. Entity Data Model ウイザードが表示されます。 [ データベースから ED Designer] を選択します。2. [ 次へ ] をクリックします。

モデルのリバース エンジニアリング (3)

1

2

Page 19: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書

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 サンプル アプリケーション構築 手順書

20

1. 使用する Entity Framework のバージョンを指定します。 [Entity Framework 6.x] を選択します。2. [ 次へ ] をクリックします。

モデルのリバース エンジニアリング (5)

1

2

Page 21: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書

21

1. [ モデルに含めるデータベース オブジェクト ] の [ テーブル ] にチェックをいれます。2. [ 生成されたオブジェクトの名前を複数化まとは単数化する ] にチェックをいれます。3. [ モデル名前空間 ] が [DatabaseFirst.BloggingModel] になっていることを確認します。4. [ 完了 ] をクリックします。 その後セキュリティ警告が表示されますが、 [OK] をクリックします。

モデルのリバース エンジニアリング (6)

1

4

3

2

Page 22: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書

22

リバース エンジニアリングのプロセスが完了すると、新しいモデルがプロジェクトに追加され、自動的にそのモデルが開いて Entity Framework デザイナーに表示されます。

モデルのリバース エンジニアリング (7)

Page 23: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書

スキャフォールディングによる コントローラーとビューの生成

Page 24: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書

24

スキャフォールディングの前にプロジェクトのビルドを行う必要があります。1. [ ソリューション エクスプローラー ] の [ プロジェクト ] を右クリックします。2. [ ビルド ] をクリックします。

コントローラーとビューの生成 (1)

12

Page 25: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書

25

スキャフォールディングでコントローラーとビューを自動生成します。1. [ ソリューション エクスプローラー ] の [Controllers] フォルダーを右クリックします。2. [ 追加 ] をクリックします。3. [ 新規スキャフォールディングアイテム ] をクリックします。

コントローラーとビューの生成 (2)

1

2

3

Page 26: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書

26

1. [Entity Framework を使用した、ビューがある MVC 5 コントローラー ] を選択します。2. [OK] をクリックします。

コントローラーとビューの生成 (3)

1

2

Page 27: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書

27

1. [ モデルクラス ] に [Blog(…)] を選択します。2. [ データコンテキスト クラス ] に [BloggingContext (…)] を選択します。3. [ 追加 ] をクリックします。

コントローラーとビューの生成 (4)

1

3

2

Page 28: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書

28

コントローラーとビューが自動生成されたことを確認します。

コントローラーとビューの生成 (5)

Page 29: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書

アプリケーションの実行

Page 30: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書

30

1. メニュー [ デバッグ ]-[ デバッグの開始 ] の順にクリックします。

アプリケーションの実行 (1)

1

Page 31: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書

31

[http://localhost:xxxxx/Blogs] にアクセスすると以下の画面が表示されます。これでアプリケーションの作成は完了です。アイテムの追加や編集などを実施して、問題なく動作していることを確認してましょう。

アプリケーションの実行 (2)

Page 32: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書

FAQ

Page 33: コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書

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