ASP.NET MVCおよび Entity Framework で AngularJS を使用する方法

最近、誰もがAngularJSとASP.NET MVCについて話しているようです。したがって、この投稿では、ASP.NET MVCアプリケーションでAngularJSを使用する方法を示すことにより、両方の長所を組み合わせ、AngularJSの長所をASP.NET MVCで使用する方法を学びます。

Dhananjay Kumar Last Updated Feb 25, 2025 9min read

最近、誰もがAngularJSとASP.NET MVCについて話しているようです。したがって、この投稿では、ASP.NET MVCアプリケーションでAngularJSを使用する方法を示すことにより、両方の長所を組み合わせ、AngularJSの長所をASP.NET MVCで使用する方法を学びます。

ASP.NET MVCで AngularJS の使用について学習する前に、Web アプリケーションの作成と実行を高速化するのに役立つ Infragistics の jQuery ライブラリ(Ignite UI for JavaScript) を確認してください。Ignite UI for JavaScript ライブラリを使用すると、HTML5、jQuery、Angular、React、またはASP.NET MVCの複雑な LOB 要件をすばやく解決できます。今すぐIgnite UIの無料トライアルをダウンロードしてください。

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

AnngularJSライブラリを正常に追加すると、Scriptsフォルダ内にそれらのファイルを見つけることができます。

参考:AngularJSライブラリ

プロジェクトに AngularJS ライブラリ参照を追加するには、MVC の縮小とバンドル、または個々のビューのスクリプトセクションに AngularJS を追加するという 2 つのオプションがあります。バンドルを使用すると、プロジェクト全体で 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がインデックスビューで稼働していることがわかります。この方法では、AngularJS ライブラリはインデックスビューでのみ参照されるため、他のビューで 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 ファイルに追加した後、次に、以下に示すように AngularJS バンドルを _Layout.cshtml に追加する必要があります。

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @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アプリケーションを作成しましょう。

EF データベースの最初のアプローチを使用してデータベースからデータをフェッチする
MVCコントローラーからJSONを返す
$httpを使用してデータをフェッチするためのAngularJSサービスを作成します
Create an AngularJS controller
MVC ビューに AngularJS ビューを作成して、テーブルにデータを表示します

ef Database First アプローチを使用したデータベースへの接続

EF データベース優先のアプローチでデータベースに接続するには、MVC アプリケーションを右クリックし、新しい項目を選択します。[データ]タブから、次の画像に示すように、[エンティティモデル]ADO.NET オプションを選択する必要があります。

次の画面で、[データベースからの EF デザイナー] オプションを選択します。

次の画面で、[新しい接続]オプションをクリックします。データベースへの新しい接続を作成するには、次のようにします。

Provide the database server name
ドロップダウンからデータベースを選択します。ここでは「School」データベースを使用しているため、ドロップダウンから選択しました。

次の画面で、接続文字列のデフォルト名をそのままにして、[次へ] をクリックします。

次の画面で、モデルの一部として保持するテーブルとその他のエンティティを選択します。シンプルにするために、モデル内の「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用語についてすでにある程度の知識があることを前提としていますが、ここでは主要な概念の簡単なレビュー/紹介を示します。

Controller

コントローラーは、データとビジネスロジックを含む JavaScript コンストラクタ関数です。コントローラーとビューは、$scope オブジェクトを使用して相互に通信します。ビューでコントローラーが使用されるたびに、インスタンスが作成されます。したがって、これを 10 回使用すると、コンストラクタの 10 個のインスタンスが作成されます。

サービス

サービスは、インスタンスがアプリケーションのライフサイクルごとに 1 回作成される JavaScript 関数です。コントローラー間で共有されるものはすべて、サービスの一部である必要があります。サービスは、5 つの異なる方法で作成できます。最も一般的な方法は、サービスメソッドまたはファクトリメソッドを使用することです。AngularJSは多くの組み込みサービスも提供します:たとえば、$httpサービスを使用してAngularアプリからHTTPベースのサービスを呼び出すことができますが、サービスを使用する前に挿入する必要があります。

Modules

モジュールは、サービスやコントローラーなどの他の関数を含む JavaScript 関数です。アプリごとに少なくとも 1 つのモジュールAngularする必要があります。

注: これらは、これらの AngularJS の概念の最も単純な定義です。より詳細な情報はウェブで見つけることができます。

それでは、モジュールの作成を始めましょう。まず、プロジェクトを右クリックして JavaScript ファイルを追加します。好きな名前で呼ぶことができますが、この例では StudentClient.js と呼ぶことにします。

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

var StudentApp = angular.module("StudentApp", []);

StudentApp.controller("StudentController", function ($scope) {
    $scope.message = "Infrgistics";
});

ビューでモジュールとコントローラーを使用するには、最初にStudentClient.jsへの参照を追加してから、ng-app ディレクティブの値をモジュール名 StudentApp に設定する必要があります。その方法は次のとおりです。

@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" を使用しています。基本的に、これらはアプリケーションでAngularJSを操作するために必要な手順ASP.NET MVC。

結論

この投稿では、AngularJSとASP.NET MVCを一緒に使用するためのいくつかの単純ですが重要な手順に焦点を当てました。また、いくつかの主要な AngularJS コンポーネントの基本的な定義、EF データベース優先のアプローチ、MVC についても触れました。今後の投稿では、これらのトピックについて詳しく説明しますが、この投稿がASP.NET MVCでAngularJSを使い始めるのに役立つことを願っています。

また、HTML5、Angular、React、およびASP.NET MVCと一緒に使用してリッチなインターネットアプリケーションを作成できるIgnite UI for JavaScriptをチェックすることを忘れないでください。すべてのJavaScriptコントロールの試用版を無料でダウンロードできます。

操作方法