ASP.NET MVC5(C#)の入門！はじめてのMVCでも分かりやすく解説

---

---

---

ASP.NET MVCを始める前にWebサイトのデザインを作っていると開発効率が上がります。 ここで使っているのはVisual Studio for Webのバージョンは2015ですが、VS Expres 2010から最新の2017まで同じように対応できると思います。まずはソリューションを作りましょう。 Visual Studio for Webを立ち上げたら「ファイル」から「新しいプロジェクト」をクリックします。

上部のプルダウンメニューは.NET Framework 4.5を選択し、「テンプレート」の「Visual C#」の「Web」の「ASP.NET Web アプリケーション」をクリックして選択します。

下部にある名前は任意の文字列で入力してください。作成するWebサイトのタイトルが決まっているならそれに合わせた文字を入力すると分かりやすいです。ここでは「WebSite」としました。

0から作るので「Empty」をクリックして選択します。
その下にある「MVC」にチェックを入れてOKボタンを押します。


さあ開発を始めましょう！

ASP.NET MVC - ControllerとViewの説明

まずはトップページを作成します。メニューの表示からソリューションエクスプローラーを開いてください。

ソリューションエクスプローラーの中にある「Controllers」を右クリックして「追加」から「コントローラー」をクリックします。

上図のようにMVC 5 Controller - Emptyをクリックして追加ボタンを押します。

DefaultControllerでも良いのですが、TopControllerとしました。

コントローラーとはユーザーがサイトにアクセスした時に最初に呼ばれるファイルのことです。ビューはサイトのデザインを担います。コントローラーでどのビューを呼ぶのか決めます。

お次はViewを作りましょう。ソリューションエクスプローラーで「Views」のフォルダを右クリックして「追加」から「新しいフォルダ」を選択します。 フォルダ名は「Shared」です。

このSharedフォルダの中にWebサイトのパーツ(タイトルやサイドメニュー、フッターなどデザイン)を入れます。

今度はビューを作ってみましょう。 Sharedのフォルダを右クリックして「追加」から「ビュー」を選択します。

タイトルパーツを作成します。View_nameに「_Title」と入力します。アンダーバーを除外しても構いませんし、任意の文字列でも構いませんが、 分かりやすいようにサイドメニューやタイトルなどのパーツは先頭にアンダーバー「_」を付けることにします。

Use a layout pageのチェックを外してAddボタンを押します。

デフォルトでいろいろコードが書かれていますが、全部削除しちゃってください。

そして予め用意している自身で作成していたWebサイトのタイトルのHTMLを記述します。

そんな要領でトップメニュー、サイドメニュー、フッターのビューを作成しましょう！それぞれにHTMLをコピペしてください。これらのビューは今後、呼び出して使います。

自分はコピーライト、サイドメニュー、タイトル、トップメニューのビュー(パーツ)を作成しました。

これらのビューを呼び出すメインのビューを作成しましょう。

先ほど通り「Views」から「Shared」フォルダを右クリックして、ビューを追加します。 名前はTopページを表示するので「Top」としました。

今、作成したTop.cshtmlにはWebサイトのトップページのベースとなるHTMLを記述します。 所々に@RenderPage("xxx.cshtml")というコードがありますが、これが先ほど作成したパーツを呼び出している部分になります。

せっかくなのでCSSやJavaScriptもインポートしちゃいましょうか。

ソリューションエクスプローラーのご自分で決められたソリューション名、ここでは「WebSite」を右クリックして「追加」の「新しいフォルダー」を選択してください。新しいフォルダーの名前は任意で構いませんが、ここではASP.NET MVCで古くから使われている「Content」としました。



作成したフォルダの中に更に「css」「js」「image」のフォルダを作成しました。

cssフォルダを右クリックして「追加」の「既存の項目」を選択しましょう。

予め用意していたcssファイルをインポートします。必要であればJavascript(jQuery)やサイトに使う画像ファイルも所定のフォルダにインポートしましょう。

さて、コントローラーとビューを紐づけるためにViewsフォルダの中に「Top」フォルダを作成します。

Visual Studio 2015 for Webからは自動的にTopControllerを追加するとViewsに「Top」フォルダが作成されますね。凄い！ 「Top」ビューから右クリックで「追加」の「ビュー」を選択します。

View_nameは「Index」とします。「Index」と名前を打つことでコントローラー側からビューを指定しないでも自動的に「Index」ビューを読み込んでくれます。

Use a layout page:の右端にある参照ボタンを押して、先ほど作成したTop.cshtmlに紐づけます。

表示されたプロジェクトフォルダーから「Views」の「Shared」をクリックし、フォルダーの内容にリストが表示されましたら、「Top.cshtml」をクリックしてOKボタンを押します。前のウィンドウに戻ったらAddボタンで追加をします。

作成されたファイルで< h 2 >Index < / h 2>のコードを削除します。

いったん整理ですが、ここでやりたいことは

Webサイトのトップページにユーザーがアクセスする
↓
Topコントローラーが読み込まれる
↓
Topコントローラーは「View/Top/Index.cshtml」を読み込む
↓
Index.cshtmlはヘッダに記述されている「View/Shared/Top.cshtml」を読み込んでサイトを出力します。

ちょっとややこしいですが、どうしてこのような構造なのか別のページを見ていただければご理解いただけると思います。

Webサイトの最初にどのコントローラーを読みに行くのか設定しなければなりません。 ソリューションエクスプローラーの「App_Start」の「RouteConfig.cs」をクリックして開き、
controller = "Home"
上記のコードを
controller = "Top"
に書き変えます。
これでユーザーがサイトにアクセスしたらサーバ側が初めにTopControllerを読みに行けと命令します。

ソリューションエクスプローラーの上部にあるWebSiteをクリックして、デバッグボタンをクリックしてみましょう。 下記のエラーが出てしまいました。

The "RenderBody" method has not been called for layout page "~/Views/Shared/Top.cshtml".
デバッグをいったん停止します。画面のサイズによっては停止ボタン(■)が表示されない場合があります。この時は、上部にあるメニューからデバッグをクリックしてデバッグの停止を選択すれば停止します。

エラーはなにやらRenderBody関数がないと怒っているようです。後で不要になりますが、下図のようにTop.cshtmlのファイルにどこでもよいのでRenderBody()を記入します。

ここでは最下部にコードを追加しました。 再び、ソリューションエクスプローラーの一番上にあるWebSiteをクリックしてからデバッグボタンを押してみましょう。

ちゃんとサイトが表示されましたね！