Web API 2 と Entity Framework 6 を使用する

  • [アーティクル]

完成したプロジェクトをダウンロードする

このチュートリアルでは、ASP.NET Web API バックエンドを使用した Web アプリケーション作成の基本について説明します。 このチュートリアルでは、データ レイヤーに Entity Framework 6 を使用し、クライアント側の JavaScript アプリケーションに Knockout.js を使用します。 このチュートリアルでは、アプリを Azure App Service Web Apps にデプロイする方法も説明します。

このチュートリアルで使用するソフトウェアのバージョン

  • Web API 2.1
  • Visual Studio 2017 (ダウンロード Visual Studio 2017 はこちら)
  • Entity Framework 6
  • .NET 4.7
  • Knockout.js 3.1

このチュートリアルでは、ASP.NET Web API 2 with Entity Framework 6 を使用して、バックエンド データベースを操作する Web アプリケーションを作成します。 以下は、作成するアプリケーションのスクリーンショットです。

Screenshot of the created application window, Book Service, showing the Books, Detail, and Add Book panes.

このアプリでは、シングルページ アプリケーション (SPA) 設計が使用されます。 "シングルページ アプリケーション" は、新しいページを読み込む代わりに、1 つの HTML ページを読み込んでから動的にページを更新する Web アプリケーションの一般的な用語です。 最初のページ読み込み後、アプリは AJAX 要求を通じてサーバーと通信します。 AJAX 要求は、アプリが UI の更新に使用する JSON データを返します。

AJAX は新しい機能ではありませんが、現在、大規模で洗練された SPA アプリケーションの構築と維持を容易にする JavaScript フレームワークがあります。 このチュートリアルではKnockout.js を使用しますが、任意の JavaScript クライアント フレームワークを使用できます。

このアプリの主な構成要素を次に示します。

  • ASP.NET MVC は HTML ページを作成します。
  • ASP.NET Web API は AJAX 要求を処理し、JSON データを返します。
  • Knockout.js データは、HTML 要素を JSON データにバインドします。
  • Entity Framework はデータベースと通信します。

Azure で実行中のこのアプリを確認する

完成したサイトでライブ Web アプリとして実行されていることを確認しますか? 次のボタンを選択すると、完全なバージョンのアプリを Azure アカウントにデプロイできます。

このソリューションを Azure にデプロイするには、Azure アカウントが必要です。 アカウントをまだ持っていない場合は、次のオプションがあります。

プロジェクトを作成する

Visual Studio を開きます。 [ファイル] メニューの [新規作成] を選択し、[プロジェクト] を選択します。 (または、[スタート] ページで [新しいプロジェクト] を選択します。)

[新しいプロジェクト] ダイアログで、左側のウィンドウで [Web] を選択し、中央のウィンドウで ASP.NET Web アプリケーション (.NET Framework) を選択します。 プロジェクトに「BookService」という名前を付け、[OK] を選択します。

Screenshot of the New Project dialog with the Web option in the left pane and A S P dot Net Web Application in the middle pane highlighted.

[新しい ASP.NET プロジェクト] ダイアログで、[Web API] テンプレートを選択します。

Screenshot of the New A S P dot Net Project dialog showing the Web API template highlighted in blue.

[OK] を選択すると、プロジェクトが作成されます。

Azure の設定を構成する (省略可能)

プロジェクトの作成後は、いつでも Azure App Service Web Apps へのデプロイを選択できます。

  1. ソリューション エクスプローラーで、プロジェクトを右クリックして [発行] を選択します。

  2. 表示されるウィンドウで、[開始] を選択します。 [発行先を選択] ダイアログ ボックスが表示されます。

    Screenshot of the Pick a publish target dialog with the App Service option in the left pane and the Create New option in the middle pane selected.

  3. [プロファイルの作成] を選択します。 [App Service の作成] ダイアログ ボックスが表示されます。

    Screenshot of the Create App Service dialog with values entered into the app name, subscription, resource group, hosting plan, and insights fields.

    既定値を受け入れるか、アプリケーション名、リソース グループ、ホスティング プラン、Azure サブスクリプション、地理的リージョンに異なる値を入力します。

  4. [SQL データベースの作成] を選択します。 [SQL Server の構成] ダイアログ ボックスが表示されます。

    Screenshot of the Configure S Q L Server dialog with values entered into the server name, location, admin name, and admin password fields.

    既定値を受け入れるか、別の値を入力します。 新しいデータベースの [管理者ユーザー名] と [管理者パスワード] を入力します。 操作が終わったら、[OK] を選択します。 [App Service の作成] ページが再び表示されます。

  5. [作成] を選択してプロファイルを作成します。 右下隅に、デプロイが進行中であることを示すメッセージが表示されます。 しばらくすると、[発行] ウィンドウが再び表示されます。

    Screenshot of the Publish window showing the newly-created profile, profile details, and management options.

    アプリをデプロイするために作成したプロファイルが利用可能になりました。

次へ