ASP.NET MVC 3 入門 (C#)

  • [アーティクル]

作成者 : Rick Anderson

Note

このチュートリアルの更新版は、MVC 5 とVisual Studio 2013 ASP.NET 使用するこちらにあります。 より安全で、従う方がはるかに簡単で、より多くの機能を示します。

このチュートリアルでは、Microsoft Visual Studio の無料バージョンである Microsoft Visual Web Developer 2010 Express Service Pack 1 を使用して、ASP.NET MVC Web アプリケーションを構築する基本について説明します。 開始する前に、以下に示す前提条件がインストールされていることを確認してください。 これらのすべてをインストールするには、 Web プラットフォーム インストーラーのリンクをクリックします。 または、次のリンクを使用して、前提条件を個別にインストールすることもできます。

Visual Web Developer 2010 ではなく Visual Studio 2010 を使用している場合は、Visual Studio 2010 の前提条件のリンクをクリックして前提条件をインストールします。

このトピックでは、C# ソース コードを含む Visual Web Developer プロジェクトを使用できます。 C# バージョンをダウンロードします。 Visual Basic を使用する場合は、このチュートリアルの Visual Basic バージョン に切り替えます。

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

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

MoviesWithVariousSm

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

データベースからのムービーの編集と一覧表示をサポートするムービー一覧アプリケーションのスクリーンショット。

学習内容

ここでは次の内容について学習します。

  • 新しい ASP.NET MVC プロジェクトを作成する方法。
  • MVC コントローラーとビュー ASP.NET 作成する方法。
  • Entity Framework Code First パラダイムを使用して新しいデータベースを作成する方法。
  • データを取得して表示する方法。
  • データを編集し、データ検証を有効にする方法。

作業の開始

まず、Visual Web Developer 2010 Express ("Visual Web Developer" for short) を実行し、[スタート] ページから [新しいプロジェクト] を選択します。

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

作業を開始するための Visual Web Developer 2010 Express のスクリーンショット。

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

プログラミング言語として Visual Basic または Visual C# を使用してアプリケーションを作成できます。 左側の [Visual C#] を選択し、[ MVC 3 Web アプリケーション ASP.NET 選択します。 プロジェクトに "MvcMovie" という名前を付け、[OK] をクリック します。 (Visual Basic を使用する場合は、このチュートリアルの Visual Basic バージョン に切り替えます)。

Visual Basic または Visual C Sharp をプログラミング言語として使用して最初のアプリケーションを作成する新しいプロジェクトのスクリーンショット。

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

新しい A S P のスクリーンショット。[N E T M V C 3 プロジェクト] ダイアログ ボックスで [インターネット アプリケーション] を選択します。

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

A S P の既定のテンプレートを使用した Visual Web Developer のスクリーンショット。作成した N E T M V C プロジェクト。

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

[デバッグ] メニューのスクリーンショット。[デバッグの開始] を選択します。

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

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

ブラウザーを起動し、アプリケーションのホーム ページを開く Visual Web Developer のスクリーンショット。

すぐに使用できるこの既定のテンプレートには、アクセスする 2 つのページと基本的なログイン ページが用意されています。 次の手順では、このアプリケーションの動作を変更し、プロセスで MVC ASP.NET について少し学習します。 ブラウザーを閉じて、コードを変更してみましょう。

次へ