インフラジスティックス・ジャパン株式会社のBlog

インフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。

ASP.NET MVC およびエンティティ フレームワークで AngularJS を使用する方法

原文: Dhananjay Kumar - How to use AngularJS in ASP.NET MVC and Entity Framework

最近、AngularJS と ASP.NET MVC がとても人気のようです。このブログではそれぞれの長所を生かしながら ASP.NET MVC で AngularJS を使用する方法をご説明します。また、最初のアプローチとしてエンティティ フレームワーク データベースでデータへアクセスする方法をご説明します。更に AngularJS でデータへアクセスし、コントローラーでビューへ渡す方法もご紹介します。このブログは以下のテーマに基づいて進めます:

  • ASP.NET MVC に AngularJS ライブラリを追加
  • AngularJS の参照、バンドルおよび縮小
  • エンティティ フレームワーク データベースでデータのフェッチ
  • ASP.NET コントローラーから JSON データを返す
  • AngularJS サービスで JSON データを使用
  • AngularJS コントローラーでビューにデータを渡すために AngularJS サービスを使用
  • AngularJS View でデータの描画

はじめに、ASP.NET MVC アプリケーションを作成し、MVC プロジェクトを右クリックをします。コンテキスト メニューから [Nuget パッケージの管理] を選択します。AngularJS を検索してプロジェクトにインストールします。

AngularJS ライブラリが正しく追加されると、ファイルは [Scripts] フォルダーに保存されます。

AngularJS ライブラリの参照

プロジェクトに AngularJS ライブラリを追加する方法は 2 つあります。MVC 最小化およびバンドル、または個別ビューの Script セクションに AngularJS を追加する方法です。バンドルを使う場合、AngularJS はプロジェクトに使用できます。特定のビューにも AngularJS の使用が可能です。

Home コントローラーの特定のビュー (Index.cshtml) で AngularJS を使用すると仮定しましょう。まず以下のようにスクリプト セクション内で AngularJS ライブラリへ参照する必要があります。

@section scripts{
    <script src=""~/Scripts/angular.js"">script>
}

次に以下のように ng-app ディレクティブまたはその他の必要なディレクティブを HTML 要素に適用します。

<div ng-app="""" class=""row"">
   <input type=""text"" ng-model=""name"" />
   {{name}}
</div>

アプリケーションを起動した際に、AngularJS が [Index] ビューで起動しているのが確認できます。この方法では AngularJS ライブラリが Index ビューでのみ参照されているため、AngularJS を他のビューで使用することができません。

MVC アプリケーションで AngularJS の使用が必要な場合があります。その場合、MVC のバンドルおよび最小化またレイアウト レベルで AngularJS ライブラリを使用する方が適切です。これには [App_Start] フォルダーの BundleConfig.cs を開き、以下のように AngularJS ライブラリのためのバンドルを追加します。

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle(""~/bundles/angular"")
        .Include(""~/Scripts/angular.js""));
}

BundleConfig ファイルにバンドルを追加した後、以下のように _Layout.cshtml に AngularJS バンドルを追加します。

<head>
    <meta charset=""utf-8"" />
    <meta name=""viewport"" content=""width=device-width, initial-scale=1.0"">
    <title>@ViewBag.Title - My ASP.NET Applicationtitle>
    @Styles.Render(""~/Content/css"")
    @Scripts.Render(""~/bundles/modernizr"")
    @Scripts.Render(""~/bundles/angular"")
    @Scripts.Render(""~/bundles/jquery"")
    @Scripts.Render(""~/bundles/bootstrap"")
    @RenderSection(""scripts"", required: false)
</head>

AngularJS バンドルを作成し、それを _Layout.cshtml に参照することにより、AngularJS はアプリケーション全体で使用できます。

AngularJS でデータベースからのデータ

これまでに特定のビュー レベルまたはアプリケーション全体レベルで AngularJS を設定する方法を紹介しました。次は MVC アプリケーションを作成します:

  1. EF データベース ファースト アプローチを使用しデータベースからデータをフェッチします。
  2. MVC コントローラーから JSON を返します。
  3. $http を使用して、データをフェッチする AngularJS サービスを作成します。
  4. AngularJS コントローラーを作成します。
  5. テーブルのデータを表示するために MVC ビューに AngularJS を作成します

EF データベース ファースト アプローチを使用しデータベースへ接続する

EF データベース ファースト アプローチでデータベースに接続するには MVC アプリケションを右クリックし新しい項目を選択します。以下の画像のようにデータ タブで [ADO.NET Entity Model] オプションを選択します。

次の画面で [EF Designer from database] を選択します。

次の画面で [New Connection option] をクリックします。新しいデータベース接続を作成します:

  1. データベースのサーバー名を提供します。
  2. ドロップダウンからデータベースを選択します。この例では [School] データベースを使用し、ドロップダウンから選択します。

次の画面で接続文字列は既定値のままで、[Next] をクリックします。

次の画面でモデルの一部として、保存テーブルまたは他のエンティティを選択します。シンプルにするためにモデルでは [Person] テーブル タブのみ使用します。

ここまででデータベース接続を作成し、プロジェクトにモデルを追加しました。edmx ファイルはプロジェクトの一部として追加されました。

MVC コントローラーから JSON を返します。

Person データを JSON として返すには、コントローラーで JsonResult 返却型のアクションを作成します。JSON データを返す Web API は簡単に作成できます。ただし、このブログの目的は AngularJS の使い方の紹介なので、JSON データを返す一番簡単な方法で行います。

public JsonResult GetPesrons()
{
    SchoolEntities e = new SchoolEntities();
    var result = e.People.ToList();
    return Json(result, JsonRequestBehavior.AllowGet);
}

$http を使用して、データをフェッチする AngularJS サービスを作成します。

以下は AngularJS の主要な用語とその概要です:

コントローラー

コントローラーは、データおよびビジネス ロジックを持つ JavaScript のコンストラクター関数です。$scope オブジェクトでコントローラーとビューの間で通信が行われます。ビューでコントローラーが使用されているとき、インスタンスが作成されます。10 回使用した場合、10 個のコンストラクターが作成されます。

サービス

サービスはアプリケーション ライフサイクル毎に 1 回、インスタンスを作成する JavaScript 関数です。コントローラー間で共有されるものはすべてサービスの一部である必要があります。サービスを作成するには 5 つの方法があります。最も人気があるのはサービスメソッドやファクトリ メソッドです。AngularJS はビルトインのサービスも提供します。Angular アプリケーションから HTTP に基づくサービスを呼ぶには $http が使用できますが、その前にサービスを挿入する必要があります。

モジュール

モジュールは JavaScript 関数で、サービスまたはコントローラーなど関数を含みます。Angular アプリケーション毎に少なくともモジュールが 1 つ必要です。

注: 以上が AngularJS コンセプトの簡単な概要です。詳細についてはウェブでご確認ください。

ではモジュールを作成しましょう。はじめに、プロジェクトに右クリックをし、JavaScript ファイルを追加します。ファイル名は自由に付けていただいて構いません。ここでは StudentClient.js にします。

StudentClient.js にモジュールとコントローラーを作成しました。後で MVC アクションからデータをフェッチするようにコントローラーを変更します。

var StudentApp = angular.module('StudentApp', []);
StudentApp.controller('StudentController', function ($scope) {
    $scope.message = ""Infrgistics"";
});

ビューでモジュールとコントローラーを使用するには、はじめに StudentClient.js の参照を追加し、StudentApp モジュールに ng-app ディレクティブの値を設定する必要があります。以下はその方法を示します:

@section scripts{
    <script src=""~/StudentClient.js"">script>
}

<div ng-app=""StudentApp"" class=""row"">
    <div ng-controller=""StudentController"">
        {{message}}
    </div>
</div>

この時点でアプリケーションを実行した場合、ビューに Infragistics が描画されます。サービスの作成から始めましょう。ファクトリ メソッドでカスタム サービスを作成します。サービスで、$http ビルトインサービスはコントローラーのアクション メソッドを呼びます。以下はサービスを同じ StudentService.js ファイルに配置します。

StudentApp.factory('StudentService', ['$http', function ($http) {
    var StudentService = {};
    StudentService.getStudents = function () {
        return $http.get('/Home/GetPersons');
    };
    return StudentService;
}]);

サービスを作成し、次にコントローラーを作成します。コントローラーの中でカスタムサービスを使用し、返されたデータを $scope に指定します。以下のコードでコントローラーを作成します:

StudentApp.controller('StudentController', function ($scope, StudentService) {
    getStudents();
    function getStudents() {
        StudentService.getStudents()
        .success(function (studs) {
            $scope.students = studs
            console.log($scope.students);
        })
        .error(function (error) {
            $scope.status = 'Unable to load customer data: ' + error.message;
            console.log($scope.status);
        });
    }
});

これでコントローラー、サービスとモジュールの作成が完了しました。すべてを統合するとコード (StudentClient.js) は以下のようになります:

var StudentApp = angular.module('StudentApp', []);
StudentApp.controller('StudentController', function ($scope, StudentService) {
    getStudents();
    function getStudents() {
        StudentService.getStudents()
        .success(function (studs) {
            $scope.students = studs;
            console.log($scope.students);
        })
        .error(function (error) {
            $scope.status = 'Unable to load customer data: ' + error.message;
            console.log($scope.status);
        });
    }
});

StudentApp.factory('StudentService', ['$http', function ($http) {
    var StudentService = {};
    StudentService.getStudents = function () {
        return $http.get('/Home/GetPersons');
    };
    return StudentService;
}]);

以下のようにビューにコントローラーを使用することが可能ですが、Index.cshtml に AngularJS ビューを作成することに留意しておいてください。ビューは以下のように作成します:

@section scripts{
    <script src=""~/StudentClient.js"">script>
}

<div ng-app=""StudentApp"" class=""container"">
    <br/>
    <br/>
    <input type=""text"" placeholder=""Search Student"" ng-model=""searchStudent"" />
    <br />
    <div ng-controller=""StudentController"">
        <table class=""table"">
            <tr ng-repeat=""r in students | filter : searchStudent"">
                <td>{{r.PersonID}}td>
                <td>{{r.FirstName}}td>
                <td>{{r.LastName}}td>
            </tr>
        </table>
    </div>
</div>

ビューに ng-app、ng-controller、ng-repeat および ng-model ディレクティブ を使用し、またテキスト ボックスでの入力をフィルターするために “filter” も使用します。基本的に ASP.NET MVC アプリケーションで AngularJS を使用する際に必要となる手順は以上です。

 

まとめ

このブログで ASP.NET MVC で AngularJS を使用する方法をご紹介しました。また、AngularJS の重要なコンポーネント、EF データベース ファースト アプローチおよび MVC の基本的な定義についても簡単にご説明しました。今後のブログでこのトピックに関するの詳細な情報をご提供する予定です。このブログが ASP.NET MVC で AngularJS を使用する際にお役に立てれば幸いです。最後までお読みいただきありがとうございました!