ゲーム開発日誌タイトル画像
IT技術部終了のお知らせ
Windows Server 構築

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



Twitterでシェア
Facebookでシェア
Google+でシェア
はてなブックマークに追加
Pocketで後で読む
投稿日時:2018/04/08 19:29:32
更新日時:

ASP.NET MVCを始める前にWebサイトのデザインを作っていると開発効率が上がります。
ASP.NET MVCを単純に理解したい方なら大丈夫ですが、こちらの記事を参考に実践したい方はまずはサイトデザインを作成してからこちらの記事を読んでくださいね。
ここで使っているのはVisual Studio for Webのバージョンは2015ですが、VS Expres 2010から最新の2017まで同じように対応できると思います。まずはソリューションを作りましょう。
ASP.NET MVC 入門
Visual Studio for Webを立ち上げたら「ファイル」から「新しいプロジェクト」をクリックします。

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

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

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


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

ASP.NET MVC - ControllerとViewの説明

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

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

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

ASP.NET MVC 入門
DefaultControllerでも良いのですが、TopControllerとしました。

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

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

ASP.NET MVC 入門
このSharedフォルダの中にWebサイトのパーツ(タイトルやサイドメニュー、フッターなどデザイン)を入れます。
質問なんですが、作成したビューのファイル名「Shared」は自分の好きな文字、例えば「Design」とかにしてもよいのですか?
もちろん問題ないです。ただ、Microsoftの公式が「Shared」というファイル名にしているので、みんなそのタイトルにしているようです。またそのしきたりでファイル名やクラス名の頭文字は大文字にすることが一般的です。
ま、こういうのは自分が分かりやすいように作ればいいのよ。あくまで個人開発の場合は。。


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

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

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

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

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

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

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

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

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

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

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

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

この「Content」フォルダの中にWebサイトのデザインとして使う画像ファイルなどのリソースを置きます。


ASP.NET MVC 入門
作成したフォルダの中に更に「css」「js」「image」のフォルダを作成しました。

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

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

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

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

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

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

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

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

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

Webサイトのトップページにユーザーがアクセスする

Topコントローラーが読み込まれる

Topコントローラーは「View/Top/Index.cshtml」を読み込む

Index.cshtmlはヘッダに記述されている「View/Shared/Top.cshtml」を読み込んでサイトを出力します。

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

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

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

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

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

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

ASP.NET MVC 入門
ちゃんとサイトが表示されましたね!

お疲れ様でした。次のチャプターではデータベースのデータを取得したり、C#でプログラムを書いて動的なWebサイトを作成していくようですよ。
コメント一覧
お名前:

コメント:
left404845right
 表示されている6桁の数字を入力してください。
 (※スパムコメント対策です。)
00042515