投稿者: Jon Galloway
MVC ミュージック ストアは、web 開発に MVC と Visual Studio ASP.NET 使用する方法を段階的に紹介し、説明するチュートリアル アプリケーションです。
MVC ミュージック ストアは、音楽アルバムをオンラインで販売し、基本的なサイト管理、ユーザー サインイン、ショッピング カート機能を実装する軽量のサンプル ストア実装です。
このチュートリアル シリーズでは、ASP.NET MVC ミュージック ストア サンプル アプリケーションをビルドするために実行されるすべての手順について詳しく説明します。 パート 1 では、概要とファイル>新しいプロジェクトについて説明します。
概要
MVC ミュージック ストアは、web 開発に MVC と Visual Web Developer ASP.NET 使用する方法を段階的に紹介し、説明するチュートリアル アプリケーションです。 私たちはゆっくりと始めるので、初心者レベルのWeb開発経験は大丈夫です。
私たちが構築するアプリケーションは、単純な音楽ストアです。 アプリケーションには、ショッピング、チェックアウト、管理の 3 つの主要な部分があります。
![[ASP.NET Music Store の概要] メニューのスクリーンショット。ジャンルを選択するためのオプションや、トップピックから選択するオプションが表示されています。](mvc-music-store-part-1/_static/image1.jpg)
訪問者はジャンル別にアルバムを閲覧することができます:
![特定のジャンルのアルバムのコレクションを示す [A S P dot Net music store genre albums selections] メニューのスクリーンショット。](mvc-music-store-part-1/_static/image2.jpg)
1 枚のアルバムを表示し、カートに追加できます。
カートを確認し、不要になったアイテムを削除できます。
![[カートの確認] メニューのスクリーンショット。合計価格情報と、カートまたはチェックアウトを編集するためのオプションが表示されています。](mvc-music-store-part-1/_static/image4.jpg)
チェックアウトに進むと、ユーザー アカウントにログインまたは登録するように求められます。
![[ログオン] メニュー バーのスクリーンショット。[自分を記憶] ボタンをクリックするオプションに加えて、ユーザーにユーザー名とパスワードの入力を要求します。](mvc-music-store-part-1/_static/image1.png)
![ユーザー名、メール アドレス、および 6 文字以上のパスワードを要求する [新しいアカウントの作成] メニュー バーのスクリーンショット。[登録] ボタンは画面の下部にあります。.](mvc-music-store-part-1/_static/image2.png)
アカウントを作成した後、出荷情報と支払い情報を入力して注文を完了できます。 物事をシンプルに保つために、我々は素晴らしいプロモーションを実行しています:彼らがプロモーションコード「無料」を入力した場合、すべてが無料です!
注文後、簡単な確認画面が表示されます。
顧客向けのページに加えて、管理者がアルバムを作成、編集、削除できるアルバムの一覧を示す管理者セクションも作成します。
1. ファイル -> 新しいプロジェクト
ソフトウェアのインストール
このチュートリアルでは、まず、無料の Visual Web Developer 2010 Express (無料) を使用して新しい ASP.NET MVC 3 プロジェクトを作成してから、機能する完全なアプリケーションを作成する機能を段階的に追加します。 その過程で、データベース アクセス、フォームの投稿シナリオ、データ検証、一貫性のあるページ レイアウトのためのマスター ページの使用、ページの更新と検証に AJAX を使用する、ユーザー ログインなどを説明します。
手順を追って実行することも、 MVC-Music-Store から完成したアプリケーションをダウンロードすることもできます。
Visual Studio 2010 SP1 または Visual Web Developer 2010 Express SP1 (Visual Studio 2010 の無料バージョン) のいずれかを使用して、アプリケーションをビルドできます。 SQL Server Compact (無料) を使用してデータベースをホストします。 開始する前に、以下に示す前提条件がインストールされていることを確認してください。
- [Visual Studio Web Developer Express SP1 の前提条件]
- [ASP.NET MVC 3 Tools Update] （ASP.NET MVC 3 ツールの更新）
- [SQL Server Compact 4.0] - ランタイムとツールの両方のサポートを含む
ASP.NET MVC 3 プロジェクトを新しく作成する
まず、Visual Web Developer の [ファイル] メニューから [新しいプロジェクト] を選択します。 [新しいプロジェクト] ダイアログが表示されます。
左側の Visual C# -> Web テンプレート グループを選択し、中央の列で [ASP.NET MVC 3 Web アプリケーション] テンプレートを選択します。 プロジェクトに MvcMusicStore という名前を付け、[OK] ボタンを押します。
![[新しいプロジェクト] ダイアログ ウィンドウ メニューのスクリーンショット。さまざまなアプリケーション オプション テンプレートが用意されています。](mvc-music-store-part-1/_static/image8.jpg)
これにより、プロジェクトの MVC 固有の設定を行えるセカンダリ ダイアログが表示されます。 次を選択します。
プロジェクト テンプレート - [空] を選択
エンジンビュー - Razor を選択
HTML5 セマンティック マークアップを使用する（チェック済み）
設定が次のように設定されていることを確認し、[OK] ボタンを押します。
これにより、プロジェクトが作成されます。 右側のソリューション エクスプローラーで、アプリケーションに追加されたフォルダーを見てみましょう。
空の MVC 3 テンプレートは完全には空ではありません。基本的なフォルダー構造が追加されます。
ASP.NET MVC では、フォルダー名に対していくつかの基本的な名前付け規則が使用されます。
| Folder | Purpose |
|---|---|
| /コントローラー | コントローラーは、ブラウザーからの入力に応答し、その操作を決定し、ユーザーに応答を返します。 |
| /ビュー | ビューには UI テンプレートが保持されます |
| /モデル | モデルがデータを保持および操作する |
| /コンテンツ | このフォルダーには、画像、CSS、およびその他の静的コンテンツが保持されます |
| /スクリプト | このフォルダーには JavaScript ファイルが格納されます |
ASP.NET MVC フレームワークは既定で "構成に対する規則" アプローチを使用し、フォルダーの名前付け規則に基づいて既定の前提条件を設定するため、これらのフォルダーは空の ASP.NET MVC アプリケーションにも含まれます。 たとえば、コントローラーは既定で Views フォルダー内のビューを検索します。コードで明示的に指定する必要はありません。 既定の規則に従うと、記述する必要があるコードの量が減り、他の開発者がプロジェクトを理解しやすくなります。 アプリケーションをビルドする場合は、これらの規則について詳しく説明します。