読者です 読者をやめる 読者になる 読者になる

アーキテクチャをスマートに。

株式会社ネオジニア代表。ITアーキテクトとしてのお仕事や考えていることなどをたまに綴っています。(記事の内容は個人の見解に基づくものであり、所属組織を代表するものではありません)

ASP.NET MVC 4 ことはじめ(1)Hello World まで

.NET プログラミング

ネットで情報収集をしていて、ASP.NET MVC 4 の情報があまりないな〜と思ったので、学習の記録を残すことにしました。
ASP.NET MVC基本的な考え方を、Visual Studio 2012 で ASP.NET MVC 4 を使いながら習得できるようなチュートリアル的な内容を目指します。
基本的な考え方さえわかれば、あとはググッていけば何とかなるレベルだと思うし、ASP.NET MVC 3 の情報は多いので、基本的にはそれらの情報をベースに学習していけばよいと思います。*1

対象とする開発環境

前提知識

まずは Hello World

Visual Studio 2012 を起動し、新規プロジェクトを作成します。テンプレート「ASP.NET MVC 4 Web アプリケーション」を選択します。
名前:HelloWorld1
場所:どこでもいいです

プロジェクトテンプレートは「基本」を選択します。

プロジェクトが作成されました。
で、この状態でいきなり F5 を押して実行してみると、、、
ビルドが正常終了し、IEが起動して自動的にトップURLにアクセスしてくれますが、なんとエラーが表示されます。

原因は、デフォルトのページコントローラがないためです。
ではIEを閉じて、デフォルトのページコントローラを作りましょう。
ソリューションエクスプローラにて、「Controllers」フォルダ上で右クリックし、[追加]→[コントローラ] を選択します。

コントローラ名は、「HomeController」にします。
この名前が重要です。ASP.NET MVC では"CoC"(設定より規約)の精神なので、ネーミングによって呼び出されるクラスが決定されます。(この辺の仕組み的なお話にも、もう少し後で触れます)
テンプレートは「空の MVC コントローラー」でいきましょう。

ひな形のソースコードが自動生成され、編集可能になります。ソースコードはとりあえずこのままでよいので、続いてビューの作成をします。

ビューについても、ネーミングルールによって呼び出されるクラスが決まってきます。HomeController に対するデフォルトのビューは、Views/Home/Index.cshtml となります。

というわけで、まずは「Views」フォルダの下に「Home」フォルダを作りましょう。
ソリューションエクスプローラにて、「Views」フォルダ上で右クリックし、[追加]→[新しいフォルダー] を選択します。

フォルダ名は「Home」にします。
続いて、「Home」フォルダ上で右クリックし、[追加]→[ビュー] を選択します。

ビュー名は「Index」にします。

これで Views/Home/Index.cshtml が作成されました。ここまでくれば、実行してもエラーになりません。F5 を押して実行してみて下さい。

ビューにデータを渡す

コントローラからビューにデータを渡すには、ViewData を使うのが最も簡単です。
ViewData は親クラスで定義されているメンバ変数で、Dictionary のようにキーと値でデータを受け渡しできます。

こんな感じです。

Controllers/HomeController.cs

namespace HelloWorld1.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            ViewData["msg"] = "Hello World !";
            return View();
        }
    }
}

Views/Home/Index.cshtml

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @ViewData["msg"]
</p>

これで実行すれば、ブラウザに「Hello World !」と表示されます。

Razorビューエンジン

ビューのソースコードでは、Razor というビューエンジンを使うようになっています。これまでの <% 〜 %> を使ったコード埋め込みにとって変わる、"@" を使った新しい記法です。

Razor記法については、ネット上にすでに情報があるので詳しくはググッて下さい。*2

ちなみにビューエンジンは、Razor 以外にもいくつか使用可能なものがありますので、好みのものを選んでインストールすればRazorの代わりに使うことができます。(個人的には、Sparkが良さそうな気がしています。)参考:ASP.NET MVCの4つのビューエンジン