次の方法で共有


Entity Framework 6 での Web API 2 の使用

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

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

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

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

作成されたアプリケーション ウィンドウの [Book Service] のスクリーンショット。[書籍]、[詳細]、[書籍の追加] ウィンドウが表示されています。

このアプリでは、シングルページ アプリケーション (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] を選択します。

左側のウィンドウに [Web] オプションが表示され、中央のウィンドウで [S P dot Net Web Application] が強調表示されている [新しいプロジェクト] ダイアログのスクリーンショット。

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

Web API テンプレートが青色で強調表示されている [New A S P dot Net Project]\(新しい A S P ドット ネット プロジェクト\) ダイアログのスクリーンショット。

[ OK] を 選択してプロジェクトを作成します。

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

プロジェクトを作成したら、いつでも Azure App Service Web Apps にデプロイできます。

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

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

    左側のウィンドウで [App Service] オプションが選択され、中央のウィンドウで [新規作成] オプションが選択されている [発行先の選択] ダイアログのスクリーンショット。

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

    [App Service の作成] ダイアログのスクリーンショット。アプリ名、サブスクリプション、リソース グループ、ホスティング プラン、分析情報の各フィールドに値が入力されています。

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

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

    [S Q L Server の構成] ダイアログのスクリーンショット。サーバー名、場所、管理者名、管理者パスワードの各フィールドに値が入力されています。

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

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

    新しく作成されたプロファイル、プロファイルの詳細、および管理オプションを示す [発行] ウィンドウのスクリーンショット。

    アプリをデプロイするために作成したプロファイルを使用できるようになりました。