Azure DevOps とのデータ連携ができるMVC アプリケーションの作成

こんにちは！ウェブ担当の加藤です。マーケ関連のデータ分析や整備もやっています。

この記事では、Visual Studio のウィザードを使って簡単なMVC（モデル・ビュー・コントローラ）プロジェクトを作成し、Entity Framework のメソッドを使うAzure DevOps にcreate, read, update, delete (CRUD) コマンドクエリを実行する方法を説明します。

Entity Framework Model の作成

下記の手順に従って接続プロパティを保存し、データモデルのエンティティにテーブルをマップします。

1. Entity Framework 6 をお使いの場合は、あらかじめプロジェクトに Azure DevOps Entity Framework プロバイダーを登録してください。詳しくは、ヘルプドキュメントの「LINQ およびEntity Framework」をご参照ください。
2. Visual Studio で新規MVC プロジェクトを作成［Internet Application］テンプレート、［Razor］ビューエンジンを選択します。この例では、プロジェクト名はMvcAzureDevOpsApp です。
3. デザイナーから.edmx ファイルを追加するには、［プロジェクト］>［新しい項目の追加］をクリックします。ADO.NET Entity Data Model を選択してモデルに名前を付けたら［追加］をクリックします。この例では、モデル名はAzureDevOpsModel です。
4. ［Entity Data Model］ウィザードで、［EF Designer from database］オプションを選択します。［Entity Data Model］ウィザードが表示されます。
5. ［New Connection］をクリックします。ダイアログが表示されたらCData Azure DevOps のデータソースを選択します。

6. 必要な接続文字列プロパティを指定します。

   AzureDevOps 接続プロパティの取得・設定方法

   Azure DevOps アカウントに接続するには、Profile -> Organizations に移動し、アカウントの組織名を取得します。Organization プロパティをこの値に設定します。

   Note: 複数のカタログやスキーマに存在するテーブル名もあります。テーブルをクエリする際は、Catalog およびSchema 接続プロパティ、または完全修飾テーブル名のいずれかでカタログとスキーマを指定する必要があります。

   Azure DevOps への認証

   Azure DevOps は、Basic 認証とAzure AD（OAuth ベース）認証の両方をサポートします。

   Basic

   Basic 認証でAzure DevOps に接続する場合、Organization とPersonalAccessToken の両方を指定します。 パーソナルアクセストークンを生成するには、Azure DevOps 組織アカウントにログインし、Profile -> Personal Access Tokens -> New Token に移動します。生成されたトークンが表示されます。

   Azure AD

   Azure AD は、Microsoft のマルチテナント、クラウドベースのディレクトリおよびID 管理サービスです。 これはユーザーベースの認証で、AuthScheme をAzureAD に設定し、Organization をAzure DevOps Organization の名前に設定する必要があります。 Web アプリケーションを介したAzure AD への認証には、必ずカスタムOAuth アプリケーションの作成が必要です。 詳しい認証方法は、ヘルプドキュメント の「Azure DevOps への認証」セクションを参照してください。

   一般的な接続文字列は次のとおりです。

   AuthScheme=Basic;Organization=MyAzureDevOpsOrganization;ProjectId=MyProjectId;PersonalAccessToken=MyPAT;

7. 接続に名前を付け、資格情報などのセンシティブ情報を接続文字列に含めるかどうかを選択します。簡略化のため、この例ではセンシティブ情報をWeb.config に保存しています。

   
8. 必要なテーブルおよびビューを選択します。ここでは、Builds をインポートしています。また、オブジェクト名を複数形に変換するオプションは、チェックをはずしています。［Finish］をクリックして.edmx ファイルを作成します。
9. プロジェクトをビルドして完成です。

コントローラーの作成およびメソッドとビューの生成

モデルの作成とプロジェクトのビルドが終わったら、以下の手順に従ってコントローラー、ビュー、および関連するCRUD メソッドを作成できます。 Builds テーブルに許可されたすべてのアクションのビューは、［Views］フォルダ内のBuilds サブフォルダに.cshtml ファイルとして格納されます。

［ソリューション エクスプローラー］で［Controllers］フォルダを右クリックし、［追加］>［コントローラー］をクリックします。コントローラーにAzureDevOpsController のような名前を付け、以下のオプションを設定します。

• Template：次のオプションを選択します：'Controller with read/write actions, using Entity Framework'.
• Model class：Builds を選択。
• Data context class：AzureDevOpsEntities を選択。

これで、プロジェクトを実行できます。［Index］ビューにアクセスするには、"AzureDevOps" をURL に追加します。 ［Create New］をクリックして［Create view］を選択すると、自動生成されたフォームを含むビューが作成されます。各レコードの隣にあるEdit およびDelete links をクリックして、対応するEdit またはDelete ビューを表示します。

一からコントローラーを作成

このセクションでは、ほんの数行のコードでCRUD コマンドクエリをインプリメントする方法について説明します。利用可能なウィザードは、各ステップで詳しく説明します。

このチュートリアルを始める前に、エンティティデータモデルを作成しておいてください。Azure DevOps へのコマンドを実行するために、コンテキストクラスのメソッドを使用していきます。［Entity Framework Data Model］ウィザードを使ってモデルを作成する方法については、前のセクションをご参照ください。 — これはモデルファーストアプローチです。 コードファーストアプローチの利用に関する詳細は、ヘルプドキュメントの「LINQ およびEntity Framework」をご参照ください。

1. 次の例のAzureDevOpsController のようにコントローラーを手動で作成するには、［ソリューション エクスプローラー］で［Controllers］フォルダを右クリックし、［追加］>［コントローラー］をクリックします。
2. ［Add Controller］ダイアログが表示されたら、［Template］メニューから'Controller with empty read/write actions' オプションを選択します。［Controller］フォルダ内にAzureDevOpsController.cs が作成されます。

コンテキストの作成

以下のコードを追加し、コンテキストクラスをクラス変数としてインスタンスを生成します。この簡単な例では、コントローラーはコンテキストクラスのメソッドを直接呼び出してCRUD コマンドを実行します。

Azure DevOps のデータエンティティの取得

レコードのリストをビューに表示するには、Index メソッドを以下のように書き換えます。このコードは、コンテキストクラスのToList() メソッドを呼び出して、レコードテーブルを表示するビューを返します。デフォルトでは、Index メソッドは空のビューを返します。

ビューを作成するには、Index メソッド内を右クリックし、［Add View］をクリックします。ウィザードが表示されたら新しいビューIndex.cshtml を作成します。作成されたビューは［Views］フォルダに格納されます。このビューをロードするには、.cshtml ファイルを右クリックして［View In Page Inspector］をクリックします。

［Add View］ダイアログでビューに名前を付け、以下のオプションを設定します：

• Create a strongly typed view：このオプションを選択し、Builds タイプのビューを作成。
• Model class：Builds エンティティ、Builds を選択。
• Scaffold template：［List］を選択。このメニューオプションは、エンティティを表示するHTML テーブルを生成します。

Azure DevOps データ エンティティの作成

レコードを作成するには、フォームにユーザーが送ったBuilds エンティティを受け取るビューを作成しておく必要があります。以下の手順に従って、create アクションをインプリメントします。

1. HttpPost 属性をアノテーションする2つ目のCreate メソッドをオーバーライドします。このメソッドは、ユーザーがsubmits it back したときにデータを処理します。最初のメソッドはフォームを表示するだけなので、この動作をオーバーライドする必要はありません。
2. デフォルトでインプットされたFormCollection を、ユーザーに作成を許可したいAzure DevOps エンティティのタイプに置き換えます。

3. 以下のコードを追加して、Entity Framework 経由で新しいレコードを追加します。次のサンプルコードでは、コンテキストのAdd およびSaveChanges メソッドは、レコードを挿入するために呼び出されます。

   [HttpPost] public ActionResult Create(Builds builds) { try { db.Builds.Add(builds); db.SaveChanges(); return RedirectToAction("Index"); } catch { return View(); } }

Create アクションのために追加する必要があるビューは１つだけです。新しいビューCreate.cshtml は、Index.cshtml と並んでViews のAzure DevOps サブフォルダに追加されます。どちらかのCreate メソッド内を右クリックし、［Add］>［View］をクリックします。［Add View］ダイアログが表示されたら、以下のオプションを設定します。

• Create a strongly typed view：このオプションを選択し、Builds タイプのビューを作成。
• Model class：Builds エンティティを選択。
• Scaffold template：［Create］を選択し、フォーム用にHTML を生成。

Azure DevOps のデータエンティティの編集および保存

Azure DevOps 内のレコードを編集するには、Create メソッド同様に、ビューから入力された値を受け取りデータソースにコマンドを実行する必要があります。さらに、Edit アクションのもう一つのアスペクトも定義が必要です：コントローラーのEdit メソッドで、コンテキストを変更されたエンティティの状態に更新します。これら3つのステップを以下に示します。

1. 最初のEdit メソッドをオーバーライドして、コードを次のように書き換えます。ユーザーがBuilds のEdit link をクリックすると、このメソッドは選択されたBuilds エンティティをビューに送り、フォーム内での修正が可能になります。

   public ActionResult Edit(int id) { return View(db.Builds.Find(id)); }
2. 最初のEdit メソッドを右クリックし、［Add］>［View］をクリックします。Create アクション同様、必要なEdit ビューは1つだけです。ウィザードが表示されたら、以下のオプションを設定します：
   • Create a strongly typed view：このオプションを選択し、Builds タイプのビューを作成。Builds を選択。
   • Model class：Builds エンティティを選択。
   • Scaffold template：［Edit］を選択し、フォーム用にHTML を生成。

3. 以下のサンプルコードで、2つ目のEdit メソッドをオーバーライドします。HttpPost 属性によってアノテーションされると、このメソッドはユーザーがフォームの変更を送信するときにビューからデータを受け取ります。

   送信された値がBuilds レコードの更新に使える値である場合は、Azure DevOps はSaveChanges メソッドが呼び出されたときに更新されます。提供されたデータ型が正しくないなど、送信された値が有効でない場合は、それらはフォームに再表示されます。

   最初のEdit メソッドで作成したビューは、フォームを表示します。Edit ビューは、エラーメッセージを表示するHtml.ValidationMessageFor helper も含みます。

   [HttpPost] public ActionResult Edit(Builds builds) { if (ModelState.IsValid) { db.Entry(builds).State = EntityState.Modified; db.SaveChanges(); return RedirectToAction("Index"); } return View(builds); }

Azure DevOps のデータエンティティの削除

以下のコードは、最初のDelete メソッド用のコードで、削除するBuilds エンティティのビューを返します。

このメソッド内を右クリックし、［Add］>［View］をクリックします。ダイアログが表示されたら、以下の情報を入力します。

• Create a strongly typed view：このオプションを選択し、Builds タイプのビューを作成。
• Model class：Builds エンティティを選択。
• Scaffold template：［Delete］を選択し、フォーム用にHTML を生成。

ビューを作成したら、DeleteConfirmed メソッドに次のコードを使います。ユーザーから削除を確認するポストバックを受け取ったときにエンティティを削除します。