ASP.NET MVC 4 入門

  • [アーティクル]

作成者 : Rick Anderson

このチュートリアルの更新バージョンは、Visual Studio 2013を使用してこちらで入手できます。 新しいチュートリアルでは、MVC 5 ASP.NET 使用します。このチュートリアルでは、このチュートリアルに対して多くの機能強化が提供されます。

このチュートリアルでは、Microsoft Visual Studio Express 2012 または Visual Web Developer 2010 Express Service Pack 1 を使用して、ASP.NET MVC 4 Web アプリケーションを構築する基本について説明します。 Visual Studio 2012 をお勧めします。チュートリアルを完了するために何もインストールする必要はありません。 Visual Studio 2010 を使用している場合は、以下のコンポーネントをインストールする必要があります。 これらのすべてをインストールするには、次のリンクをクリックします。

Visual Web Developer 2010 ではなく Visual Studio 2010 を使用している場合は、ASP.NET MVC 4 用の WPI インストーラーと、Visual Studio 2010 の前提条件をインストールします

このトピックでは、C# ソース コードを含む Visual Web Developer プロジェクトを使用できます。 C# バージョンをダウンロードします。

チュートリアルでは、Visual Studio でアプリケーションを実行します。 また、ホスティング プロバイダーに展開することで、インターネット経由でアプリケーションを使用できるようにすることもできます。 Microsoft は、無料の Windows Azure 試用版アカウントで最大 10 個の Web サイトに対して無料の Web ホスティングを提供しています。 Visual Studio Web プロジェクトを Windows Azure Web サイトにデプロイする方法については、「ASP.NET Web サイトと Visual Studio を使用したSQL Databaseの作成とデプロイ」を参照してください。 このチュートリアルでは、Entity Framework Code First Migrationsを使用して、SQL Server データベースを Windows Azure SQL Database (以前のSQL Azure) に展開する方法についても説明します。

このチュートリアルは、Rick Anderson ( @RickAndMSFT ) によって記述されました。

作成するアプリケーション:

注意

このチュートリアルがVisual Studio 2013を使用してここで入手できる場合は、更新されたバージョン。 新しいチュートリアルでは、MVC 5 ASP.NET 使用します。このチュートリアルでは、このチュートリアルに対して多くの機能強化が提供されます。

データベースからのムービーの作成、編集、検索、一覧表示をサポートする単純なムービー一覧アプリケーションを実装します。 ビルドするアプリケーションの 2 つのスクリーンショットを次に示します。 これには、データベースのムービーの一覧を表示するページが含まれます。

M V C Movie アプリの [検索インデックス] ページを示すスクリーンショット。[タイトル] 検索バーにゴーストが入力されます。

また、このアプリケーションでは、ムービーの追加、編集、削除のほか、個々のムービーに関する詳細を表示することもできます。 すべてのデータ入力シナリオには、データベースに格納されているデータが正しいことを確認するための検証が含まれます。

M V C Movie アプリの [編集] ページを示すスクリーンショット。[リリース日] と [価格] の 2 つのテキスト フィールドが強調表示され、ユーザーに正しい値を入力するように求められます。

作業の開始

まず、Visual Studio Express 2012 または Visual Web Developer 2010 Express を実行します。 このシリーズのスクリーン ショットのほとんどは 2012 Visual Studio Expressを使用しますが、このチュートリアルは Visual Studio 2010/SP1、Visual Studio 2012、Visual Studio Express 2012、または Visual Web Developer 2010 Express で完了できます。 [スタート] ページから [新しいプロジェクト] を選択します。

Visual Studio は IDE または統合開発環境です。 Microsoft Word を使用してドキュメントを作成するのと同様に、IDE を使用してアプリケーションを作成します。 Visual Studio の上部には、使用可能なさまざまなオプションを示すツール バーがあります。 IDE でタスクを実行する別の方法を提供するメニューもあります。 (たとえば、[スタート] ページから [新しいプロジェクト] を選択する代わりに、メニューを使用して [ファイル>] を選択できます。新しいプロジェクト。)

[スタート] ページのVisual Studio Expressを示すスクリーンショット。[新しいプロジェクト] オプションが強調表示されています。

最初のアプリケーションの作成

プログラミング言語として Visual Basic または Visual C# を使用してアプリケーションを作成できます。 左側の [Visual C#] を選択し、[ MVC 4 Web アプリケーション ASP.NET 選択します。 プロジェクトに "MvcMovie" という名前を付け、[OK] をクリック します。

[新しいプロジェクト] ウィンドウを示すスクリーンショット。S P ドット NET M V C 4 Web アプリケーションが選択されています。

[ 新しい ASP.NET MVC 4 プロジェクト ] ダイアログ ボックスで、[ インターネット アプリケーション] を選択します。 Razor は既定のビュー エンジンのままにします。

[New A S P dot NET M V C 4 Project]\(新しい A S P ドット NET M V C 4 プロジェクト\) ウィンドウを示すスクリーンショット。[インターネット アプリケーション] テンプレートが選択されています。

[OK] をクリックします。 Visual Studio では、先ほど作成した ASP.NET MVC プロジェクトに既定のテンプレートが使用されているため、何も行わずに、現在は動作するアプリケーションがあります。 これは単純な "Hello World!" プロジェクトであり、アプリケーションを開始するのに適した場所です。

A S P ドット NET M V C Project Home Controller c s と ソリューション エクスプローラー タブが開かれていることを示すスクリーンショット。

[デバッグ] メニューの [デバッグの開始] をクリックします。

A S P ドット NET M V C プロジェクトの [デバッグ] ドロップダウン メニューを示すスクリーンショット。[デバッグの開始] オプションが選択されています。

デバッグを開始するためのキーボード ショートカットが F5 であることに注意してください。

F5 キーを使用すると、Visual Studio でIIS Expressが開始され、Web アプリケーションが実行されます。 その後、Visual Studio によってブラウザーが起動され、アプリケーションのホーム ページが開きます。 ブラウザーのアドレス バーには と表示 localhost され、 のようなもの example.comではないことに注意してください。 これは、常に独自のローカル コンピューターを指しているため localhost です。この場合は、ビルドしたアプリケーションを実行しています。 Visual Studio で Web プロジェクトを実行すると、Web サーバーにランダムなポートが使用されます。 次の図では、ポート番号は 41788 です。 アプリケーションを実行すると、別のポート番号が表示される可能性があります。

M V C ムービーのホーム ページを示すスクリーンショット。

すぐに使用できるこの既定のテンプレートでは、[ホーム]、[連絡先]、[バージョン情報] の各ページが表示されます。 また、登録とログインのサポート、Facebookと Twitter へのリンクも提供されます。 次の手順では、このアプリケーションの動作を変更し、ASP.NET MVC について少し学習します。 ブラウザーを閉じて、コードを変更してみましょう。

次へ