Welcome to MSDN Blogs Sign in | Join | Help

[ASP.NET MVC] Hello, World

昨日は ASP.NET MVC のインストール方法について簡単にご紹介しましたので、今後何回かに渡って ASP.NET MVC のプログラミングについてご紹介していきたいと思います。
# 不定期になるとは思いますが。。
まずはじめは、やはり Hello, World から、ということで。


ではさっそく ASP.NET MVC の Hello, World アプリケーションを作っていきたいと思います。
なお、ASP.NET MVC は現時点での最新 CTP 版である Preview 5 を使用していますが、前 CTP バージョンの Preview 4 でも同じコードで動作します。

Visual Studio で "ASP.NET MVC Web Application" プロジェクトテンプレートを選択し、新規プロジェクトを作成します。
# ここでは言語は C# を使用しますが、もちろん Visual Basic .NET でも OK です。
image
プロジェクト名はとりあえず "HelloMvc" としておきます。

プロジェクトができますと、最初からいろいろとフォルダやファイルが作られています。
image
Controllers、Models、Views フォルダは、それぞれ MVC パターンのController/Model/View に対応するソースコードを格納する場所になります。
プロジェクトの雛型ではあらかじめサンプルとなる実装コードがいくつか作らてた状態になっていますので、今回の実装で不要なフォルダ・ファイルを削除しておきます。

削除するのは、以下のフォルダ・ファイルです。

  • Controllers フォルダ内のファイル
    AccountController.cs と HomeController.cs
  • Views フォルダ内にあるフォルダ
    Accout、Home、および Shared

削除した後は以下のようなプロジェクト構成になっています。
image 

これで Hello, World のプログラミングを始められる状態になりました。

ここからが本番です。
まずは MVC の C に相当する Controller を実装します。

Controllers フォルダを右クリックして、新しい項目画面を表示します。
image
そしてテンプレートで "MVC Controller Class" を選択します。
image
ここでは Controller クラス名を "HelloContorller" とします。(ファイル名は HelloController.cs)
Controller クラスは必ず接尾子(Post-fix)を "Controller" とする必要があります。
ですので、ここでは "Hello" という名前の Controller を作りたいので、Controller クラス名は "HelloController" としました。

生成された HelloController.cs を開くと、以下のようなコードが記述されています。

HelloController.cs

namespace HelloMvc.Controllers {

	public class HelloController : Controller {

		public ActionResult Index() {
			// Add action logic here
			throw new NotImplementedException();
		}

	} // End of class

} // End of namespace

Controller クラスのメソッドは "アクションメソッド" と呼ばれ、アプリケーションがこのアクション メソッドに該当するリクエスト (アクション) を受けたときに呼び出されます。
# 上記コードでは Index メソッドがアクションメソッドに相当します。
ASP.NET MVC のデフォルト設定では、例えばアプリケーションを http://hoge.net/ でホストしているとすると、http://hoge.net/Hello/World というアドレスでアクセスされた場合に、HelloController クラスの World メソッドが呼び出されることになります。

アクションメソッドの中では、対応するビジネスロジックの呼び出しや View (画面) に引き渡す Model (データ) の生成・取得処理を行い、表示する View の決定を行います。
また、アクションメソッドの戻り値は通常 ActionResult 型を返すようにします。
# ちなみに、のちのちご紹介することになると思いますが、ActionResult 型以外の値を返すことも可能ではあります。

さて、ここでは http://ホスト/Hello/World というリクエストを受けて "Hello, ASP.NET MVC !" というメッセージを返す画面を表示させるようにしたいと思いますので、World という名前のアクションメソッドを実装します。

HelloController.cs

namespace HelloMvc.Controllers {

	public class HelloController : Controller {

		public ActionResult World() {
			return View( "World" ); // "World" という名前の View を表示する
		}

	} // End of class

} // End of namespace

World メソッドの中では View() メソッドを呼び出しています。このメソッドは View を表示される際に使用するメソッドであり、引数で表示したい View 名を指定しています。
なお、View() メソッドで View 名の指定を省略した場合はアクションメソッドと同じ名前の View を表示させることになりますので、上記の World メソッドは、

public ActionResult World() {
	return View(); // "World" という名前の View を表示する
}


と、引数を省略することができます。

次にせっかくなので Model を使って View にデータを渡してみたいと思います。
View には "Hello, ASP.NET MVC !" とともに現在の時刻を表示するようにしましょう。

ASP.NET MVC では Model にはさまざまなタイプのオブジェクトを使用することができます。
# LINQ to SQL のエンティティ、ADO.NET Entity Framework のエンティティ、DataSet、あるいは POCO(=Plain Old CLR Object:ノーマルな.NET オブジェクトのことです) などなど ...
また、Controller から View に対して Model を渡す際には、"型付けされた (Typed)"形式と"型付けされていない (Untyped)"形式の 2 つの形式を使用することができるのですが、今回は"型付けされていない"形式を使用したいと思います。
この"型付けされていない"形式を使用して Controller から View に対して Model を渡すには、ViewData というそのまんまな名前の汎用の"入れ物"を使用します。

HomeController.cs

public class HelloController : Controller {

	public ActionResult World() {
		ViewData["Time"] = DateTime.Now;
		return View(); // "World" という名前の View を表示する
	}

} // End of class

ViewData は辞書形式のコレクションですので、キーを指定して値をセットします。


以上で Controller が実装できましたので、次に View を作りたいと思います。

ASP.NET MVC の View は ASP.NET の通常の WebForm と同じ .aspx 拡張子をもったファイルとコードビハインドファイル (.aspx.cs) によって実装していきますが、微妙に通常の WebForm とは異なります。
また、ASP.NET MVC では View のディレクトリ階層がルール化されており、Views フォルダ以下に Controller 名と同じフォルダを作成し、その中に View を配置していく必要があります。

今回の例では Controller 名は "Hello" (HelloController から Controller を除いたもの) になりますので、Views フォルダの中に Hello フォルダを作成します。
image

つづいて、作った Hello フォルダの中に ASP.NET MVC の View を追加します。
Hello フォルダを右クリックして新しい項目の追加画面を表示し、テンプレートは "MVC View Page" を選択します。
image
そして、ファイル名は "World.aspx" にします。

World.aspx には "Hello, ASP.NET MVC !" というメッセージと、Controller で ViewData に入れられた現在時刻値を表示させますので、コメント以下の1行を追加します。

World.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="World.aspx.cs" Inherits="HelloMvc.Views.Hello.World" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
	<!-- ここにWelcomeメッセージと現在時刻を表示 -->
	Hello, ASP.NET MVC !<br />Now: <%= ViewData["Time"] %>
</body>
</html>

<%= %> コードブロックを使用し、その中で ViewData の値を取得しています。


以上で View の実装は終了です。


最後に URL ルーティングのルールを少し調整します。
URL ルーティングの設定がある Global.asax.cs (Global.asax のコードビハインド) を開きます。
image

Global.asax.cs の中では、MvcApplication クラスの RegisterRoutes メソッドの中で URL ルーティングのルールの登録処理を行っています。
ですので、URL のルーティングを調整したい場合にはこの RegisterRoutes メソッドの中を修正していくことになります。

Global.asax.cs

	public class MvcApplication : System.Web.HttpApplication {

		public static void RegisterRoutes( RouteCollection routes ) {
			routes.IgnoreRoute( "{resource}.axd/{*pathInfo}" );

			routes.MapRoute(
					"Default",                                              // Route name
					"{controller}/{action}/{id}",                           // URL with parameters
					new { controller = "Home", action = "Index", id = "" }  // Parameter defaults
			);

		}

		protected void Application_Start() {
			RegisterRoutes( RouteTable.Routes );
		}

	} // End of class

URL ルーティングの詳細につきましては追々ご紹介していきたいと思いますが、ポイントだけ簡単に。
このコードでは、routes.MapRoute() メソッドを使用して URL のルーティングルールを追加しています。
1番目の引数の "Default" は登録する URL ルーティング ルールの名前です。
2番目の引数が URL ルーティング ルールそのもので、このデフォルト設定では http://ホスト/Controller名/アクション名/ID というパターンで Controller ならびにそのアクションメソッドを呼び出す、というルールが設定されています。
# なお、最後の ID はアクションメソッド側で明示的に受け取るようになっていない場合は省略可能です。
そして3番目の引数がデフォルト、つまり http://ホスト/ という、Controller名やアクション名を省略したリクエストが来た場合の設定であり、匿名クラスを使用してURL ルーティング ルールに必要なパラメータの値を設定しています。ここでは Controller 名が "Home" でアクション名が "Index" となっています。

ここでは、URL ルーティング ルール自体はこのまま使用したいと思いますが、デフォルトで呼び出される Controller名とアクション名はそれぞれ "Hello" と "World" に変更しておきたいと思います。

Global.asax.cs

		public static void RegisterRoutes( RouteCollection routes ) {
			routes.IgnoreRoute( "{resource}.axd/{*pathInfo}" );

			routes.MapRoute(
					"Default",                                              // Route name
					"{controller}/{action}/{id}",                           // URL with parameters
					new { controller = "Hello", action = "World", id = "" }  // Parameter defaults
			);

		}

以上ですべての実装が終わりです。

さっそく実行してみましょう。
Visual Studio で [F5] キーを押下し、デバッグ実行を開始します。

なお、デバッグ実行した際には、こんなメッセージ
image
や、こんなメッセージ
image
が表示されることがありますが、それぞれのデバッグを有効にする場合にはメッセージに従ってデバッグが有効になるよう設定してください。

実行した結果がこちらです。ちゃんとメッセージと時間が表示されています。
image

先ほど URL ルーティングのデフォルト設定を変更しましたので、ルートパス http://localhost:54369/ の呼び出して HelloController の World アクションメソッドが実行されています。
当然ですが、URL を http://localhost:54369/Hello/World とタイプして実行しますと、同じくHelloController の World アクションメソッドが実行された結果が表示されます。
image 


以上が ASP.NET MVC の Hello, World アプリケーションでした。

次回以降はもう少し細かいところに踏み入った話ができればと思っています。

Published Friday, September 05, 2008 12:26 AM by mikion
Filed under:

Comment Notification

If you would like to receive an email when updates are made to this post, please register here

Subscribe to this post's comments using RSS

Comments

# [ASP.NET MVC] Hello, World : EasyCoded

Thursday, September 04, 2008 10:39 AM by [ASP.NET MVC] Hello, World : EasyCoded

# discount furniture &raquo; [ASP.NET MVC] Hello, World

Thursday, September 04, 2008 10:39 AM by discount furniture &raquo; [ASP.NET MVC] Hello, World

Leave a Comment

(required) 
required 
(required) 

  
Enter Code Here: Required
 
Page view tracker