第 2 部: Controllers

作成者: Jon Galloway

MVC ミュージック ストアは、web 開発に MVC と Visual Studio ASP.NET 使用する手順を紹介し、説明するチュートリアル アプリケーションです。

MVC ミュージック ストアは、音楽アルバムをオンラインで販売し、基本的なサイト管理、ユーザー サインイン、ショッピング カート機能を実装する軽量のサンプル ストア実装です。

このチュートリアル シリーズでは、ASP.NET MVC Music Store サンプル アプリケーションをビルドするために実行されるすべての手順について詳しく説明します。 パート 2 では、コントローラーについて説明します。

従来の Web フレームワークでは、通常、受信 URL はディスク上のファイルにマップされます。 たとえば、"/Products.aspx" や "/Products.php" などの URL の要求は、"Products.aspx" または "Products.php" ファイルによって処理される場合があります。

Web ベースの MVC フレームワークは、URL をサーバー コードに少し異なる方法でマップします。 受信 URL をファイルにマッピングする代わりに、URL をクラスのメソッドにマップします。 これらのクラスは "コントローラー" と呼ばれ、受信 HTTP 要求の処理、ユーザー入力の処理、データの取得と保存、クライアントに送り返す応答の決定 (HTML の表示、ファイルのダウンロード、別の URL へのリダイレクトなど) を担当します。

HomeController の追加

サイトのホーム ページに URL を処理する Controller クラスを追加して、MVC ミュージック ストア アプリケーションを開始します。 ASP.NET MVC の既定の名前付け規則に従い、HomeController と呼びます。

ソリューション エクスプローラー内の "Controllers" フォルダーを右クリックし、[追加] を選択し、[コントローラー...] を選択します。コマンド：

これにより、[コントローラーの追加] ダイアログが表示されます。 コントローラーに "HomeController" という名前を付け、[追加] ボタンを押します。

これにより、次のコードを含む新しいファイル HomeController.cs が作成されます。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace MvcMusicStore.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        public ActionResult Index()
        {
            return View();
        }
    }
}

できるだけ簡単に開始するには、Index メソッドを文字列を返す単純なメソッドに置き換えてみましょう。 次の 2 つの変更を行います。

• ActionResult の代わりに文字列を返すように メソッドを変更します
• return ステートメントを変更して "Hello from Home" を返す

メソッドは次のようになります。

public string Index()
{
    return "Hello from Home";
}

アプリケーションの実行

次に、サイトを実行しましょう。 Web サーバーを起動し、次のいずれかを使用してサイトを試すことができます。

• [デバッグ] ⇨ [デバッグの開始] メニュー項目を選択します
• ツールバーの [緑] 矢印ボタンをクリックします
• キーボード ショートカット F5 を使用します。

上記の手順のいずれかを使用すると、プロジェクトがコンパイルされ、Visual Web Developer に組み込まれている ASP.NET 開発サーバーが起動します。 画面の下部に、ASP.NET 開発サーバーが起動したことを示す通知が表示され、実行されているポート番号が表示されます。

その後、Visual Web Developer によって、Web サーバーを指す URL を持つブラウザー ウィンドウが自動的に開きます。 これにより、Web アプリケーションをすばやく試すことができます。

さて、それは非常に迅速でした - 私たちは新しいウェブサイトを作成し、3行の関数を追加し、ブラウザにテキストを持っています。 ロケット科学ではありませんが、それは始まりです。

注: Visual Web Developer には、ランダムに空いている "ポート" 番号で Web サイトを実行する ASP.NET 開発サーバーが含まれています。 上のスクリーンショットでは、サイトは で http://localhost:26641/実行されているため、ポート 26641 を使用しています。 ポート番号は異なります。 このチュートリアルで /Store/Browse のような URL について説明すると、ポート番号の後に移動します。 ポート番号が 26641 であると仮定すると、/Store/Browse を参照すると、 を参照することになります http://localhost:26641/Store/Browse。

StoreController の追加

サイトのホーム ページを実装する単純な HomeController を追加しました。 次に、音楽ストアの閲覧機能を実装するために使用する別のコントローラーを追加しましょう。 ストア コントローラーでは、次の 3 つのシナリオがサポートされます。

• 音楽ストアの音楽ジャンルの一覧ページ
• 特定のジャンルのすべてのミュージック アルバムを一覧表示する参照ページ
• 特定のミュージック アルバムに関する情報を表示する詳細ページ

まず、新しい StoreController クラスを追加します。 まだ実行していない場合は、ブラウザーを閉じるか、[デバッグ] ⇨ [デバッグの停止] メニュー項目を選択して、アプリケーションの実行を停止します。

次に、新しい StoreController を追加します。 HomeController と同様に、これを行うには、ソリューション エクスプローラー内の "Controllers" フォルダーを右クリックし、Add-Controller> メニュー項目を選択します

新しい StoreController には、"Index" メソッドが既に用意されています。 この "Index" メソッドを使用して、ミュージック ストア内のすべてのジャンルを一覧表示する登録情報ページを実装します。 また、StoreController で処理する他の 2 つのシナリオ (Browse と Details) を実装するための 2 つのメソッドも追加します。

コントローラー内のこれらのメソッド (インデックス、参照、詳細) は "コントローラー アクション" と呼ばれ、HomeController.Index()action メソッドで既に確認したように、そのジョブは URL 要求に応答し、(通常は) URL を呼び出したブラウザーまたはユーザーに返すコンテンツを決定することです。

StoreController の実装を開始するには、文字列 "Hello from Store.Index()" を返すようにIndex() メソッドを変更し、Browse() と Details() に同様のメソッドを追加します。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace MvcMusicStore.Controllers
{
    public class StoreController : Controller
    {
        //
        // GET: /Store/
        public string Index()
        {
            return "Hello from Store.Index()";
        }
        //
        // GET: /Store/Browse
        public string Browse()
        {
            return "Hello from Store.Browse()";
        }
        //
        // GET: /Store/Details
        public string Details()
        {
            return "Hello from Store.Details()";
        }
    }
}

プロジェクトをもう一度実行し、次の URL を参照します。

• /ストア
• /Store/Browse
• /Store/Details

これらの URL にアクセスすると、コントローラー内のアクション メソッドが呼び出され、文字列応答が返されます。

これは素晴らしいことですが、これらは単なる定数文字列です。 URL から情報を取得してページ出力に表示できるように、動的にしましょう。

まず、Browse アクション メソッドを変更して、URL から querystring 値を取得します。 これを行うには、アクション メソッドに "genre" パラメーターを追加します。 これを行うと ASP.NET MVC は、呼び出されたときに、"genre" という名前のクエリ文字列またはフォームポスト パラメーターをアクション メソッドに自動的に渡します。

//
// GET: /Store/Browse?genre=Disco
public string Browse(string genre)
 {
    string message = HttpUtility.HtmlEncode("Store.Browse, Genre = "
+ genre);
 
    return message;
 }

注: HttpUtility.HtmlEncode ユーティリティ メソッドを使用して、ユーザー入力をサニタイズしています。 これにより、ユーザーが /Store/Browse などのリンクを使用してビューに Javascript を挿入できなくなります。Genre=<script>window.location=''<http://hackersite.com/script>。

次に、/Store/Browse に移動してみましょう。Genre=Disco

次に、[詳細] アクションを変更して、ID という名前の入力パラメーターを読み取って表示してみましょう。 前のメソッドとは異なり、ID 値を querystring パラメーターとして埋め込むことはありません。 代わりに、URL 自体に直接埋め込みます。 例: /Store/Details/5。

ASP.NET MVC を使用すると、何も構成しなくても簡単にこれを行うことができます。 MVC の既定のルーティング規則 ASP.NET、アクション メソッド名の後の URL のセグメントを "ID" という名前のパラメーターとして扱うことです。 アクション メソッドに ID という名前のパラメーターがある場合、ASP.NET MVC は URL セグメントをパラメーターとして自動的に渡します。

//
// GET: /Store/Details/5
public string Details(int id)
 {
    string message = "Store.Details, ID = " + id;
 
    return message;
 }

アプリケーションを実行し、/Store/Details/5 に移動します。

これまでに行ったことをまとめてみましょう。

• Visual Web Developer で新しい ASP.NET MVC プロジェクトを作成しました
• ASP.NET MVC アプリケーションの基本的なフォルダー構造について説明しました
• ASP.NET Development Server を使用して Web サイトを実行する方法を学習しました
• 2 つのコントローラー クラス (HomeController と StoreController) を作成しました
• URL 要求に応答し、ブラウザーにテキストを返すアクション メソッドをコントローラーに追加しました

前へ次へ