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.

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

3,892 views

Published on

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

Published in: Software
  • Be the first to comment

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

  1. 1. コーディング不要! Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書 日本マイクロソフト株式会社 開発ツール推進部 武田 正樹 Masaki.Takeda@microsoft.com 最終更新日: 2016 年 6 月 15 日
  2. 2. 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
  3. 3. 3 目次  データベースの準備 4  ASP.NET プロジェクトの新規作成 10  モデルのリバース エンジニアリング 15  スキャフォールディングによるコントローラーとビューの生成 23  アプリケーションの実行 29
  4. 4. データベースの準備
  5. 5. 5 1. Visual Studio 2015 を起動し、メニュー[表示]-[サーバーエクスプローラー] の順にクリックします。 データベースの準備 (1) 1
  6. 6. 6 1. サーバーエクスプローラーが表示されます。[データ接続] を右クリックします。 2. [接続の追加] をクリックします。 データベースの準備 (2) 1 2
  7. 7. 7 データベースの準備 (3) 1. 接続の追加ウイザードが表示されます。[サーバー名] に今回使用するデータベース名を入力します。 2. データベースのログオン情報を入力します。今回は SQL Server 認証を使用しています。 3. [データベース名の選択または入力]を選択し、[DatabaseFirst.Blogging] と入力します。 4. [OK] をクリックします。 1 2 3 4
  8. 8. 8 1. サーバーエクスプローラーにデータベースのサーバー名が表示されますので、右クリックします。 2. [新しいクエリ] をクリックします。 データベースの準備 (4) 1 2
  9. 9. 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
  10. 10. ASP.NET プロジェクトの 新規作成
  11. 11. 11 1. メニュー[ファイル]-[新規作成]-[プロジェクト] の順にクリックします。 ASP.NET プロジェクトの新規作成 (1) 1
  12. 12. 12 1. [Visual C#]-[Web] をクリックします。 2. [ASP.NET Web アプリケーション] を選択します。 3. [Application Insight をプロジェクトに追加] のチェックが外れていることを確認します。 4. [ソース管理に追加] のチェックが外れていることを確認します。 5. [OK] をクリックします。 ASP.NET プロジェクトの新規作成 (2) 1 2 3 4 5
  13. 13. 13 1. [ASP.NET 4.6 テンプレート] の [Empty] を選択します。 2. [フォルダーおよびコア参照を追加する] の [MVC] にチェックをいれます。 3. [クラウドにホストする] のチェックが外れていることを確認します。 4. [OK] をクリックします。 ASP.NET プロジェクトの新規作成 (3) 1 2 3 4
  14. 14. 14 [ソリューション エクスプローラー] に、ASP.NET プロジェクトが作成されていることを確認します。 ASP.NET プロジェクトの新規作成 (4)
  15. 15. モデルの リバース エンジニアリング
  16. 16. 16 1. [ソリューション エクスプローラー] の [プロジェクト] を右クリックします。 2. [追加] をクリックします。 3. [新しい項目] をクリックします。 モデルのリバース エンジニアリング (1) 1 2 3
  17. 17. 17 1. [Visual C#]-[データ] をクリックします。 2. [ADO.NET Entity Data Model] を選択します。 3. [名前] を [BloggingModel] と入力します。 4. [OK] をクリックします。 モデルのリバース エンジニアリング (2) 1 2 3 4
  18. 18. 18 1. Entity Data Model ウイザードが表示されます。[データベースから ED Designer] を選択します。 2. [次へ] をクリックします。 モデルのリバース エンジニアリング (3) 1 2
  19. 19. 19 1. データ接続が […DatabaseFirst.Blogging.dbo] となっていることを確認します。 2. 今回は、[はい、データベース接続文字列に含めます。] を選択します。 3. [接続設定に名前を付けて Web.Config に保存] にチェックがはいっていることを確認します。 4. [BloggingContext] と入力します。 5. [次へ] をクリックします。 モデルのリバース エンジニアリング (4) 1 5 2 3 4
  20. 20. 20 1. 使用する Entity Framework のバージョンを指定します。 [Entity Framework 6.x] を選択します。 2. [次へ] をクリックします。 モデルのリバース エンジニアリング (5) 1 2
  21. 21. 21 1. [モデルに含めるデータベース オブジェクト] の [テーブル] にチェックをいれます。 2. [生成されたオブジェクトの名前を複数化まとは単数化する]にチェックをいれます。 3. [モデル名前空間] が [DatabaseFirst.BloggingModel] になっていることを確認します。 4. [完了] をクリックします。 その後セキュリティ警告が表示されますが、[OK] をクリックします。 モデルのリバース エンジニアリング (6) 1 4 3 2
  22. 22. 22 リバース エンジニアリングのプロセスが完了すると、新しいモデルがプロジェクトに追加され、 自動的にそのモデルが開いて Entity Framework デザイナーに表示されます。 モデルのリバース エンジニアリング (7)
  23. 23. スキャフォールディングによる コントローラーとビューの生成
  24. 24. 24 スキャフォールディングの前にプロジェクトのビルドを行う必要があります。 1. [ソリューション エクスプローラー] の [プロジェクト] を右クリックします。 2. [ビルド] をクリックします。 コントローラーとビューの生成 (1) 1 2
  25. 25. 25 スキャフォールディングでコントローラーとビューを自動生成します。 1. [ソリューション エクスプローラー] の [Controllers] フォルダーを右クリックします。 2. [追加] をクリックします。 3. [新規スキャフォールディングアイテム] をクリックします。 コントローラーとビューの生成 (2) 1 2 3
  26. 26. 26 1. [Entity Framework を使用した、ビューがある MVC 5 コントローラー] を選択します。 2. [OK] をクリックします。 コントローラーとビューの生成 (3) 1 2
  27. 27. 27 1. [モデルクラス] に [Blog(…)] を選択します。 2. [データコンテキスト クラス] に [BloggingContext (…)] を選択します。 3. [追加] をクリックします。 コントローラーとビューの生成 (4) 1 3 2
  28. 28. 28 コントローラーとビューが自動生成されたことを確認します。 コントローラーとビューの生成 (5)
  29. 29. アプリケーションの実行
  30. 30. 30 1. メニュー[デバッグ]-[デバッグの開始] の順にクリックします。 アプリケーションの実行 (1) 1
  31. 31. 31 [http://localhost:xxxxx/Blogs] にアクセスすると以下の画面が表示されます。これでアプリケーショ ンの作成は完了です。 アイテムの追加や編集などを実施して、問題なく動作していることを確認してましょう。 アプリケーションの実行 (2)
  32. 32. FAQ
  33. 33. 33 今回の手順書で使用しているスキャフォールディングのテンプレートは、Visual Studio フォルダーにあります。 各ビューの生成物とテンプレートの関係は以下のようになっています。 ビュー テンプレートの変更 C:Program Files (x86)Microsoft Visual Studio 14.0Common7IDEExtensionsMicrosoftWebMvcScaffoldi ngTemplates C:¥Program Files (x86)¥Microsoft Visual Studio 14.0¥Common7¥IDE¥Extensions¥Microsoft¥Web¥Mvc¥Scaffol ding¥Templates¥MvcFullDependencyCodeGenerator

×