ASP.NET MVC 5 の 入門ともいえる、もっとも簡単な チュートリアル を作ってみました。 空のプロジェクト からだと単純にはいかなかったので、そのメモも兼ねています。
よくみるサンプルコードやチュートリアル、入門などでは ViewBag
や ViewDagta
を使ってますが、実際はモデルを渡して利用した方が都合が良いと思うので、ここではちょっと実践よりにチュートリアルを構成してみました。
サンプルコード
目次
目標
よくある "Hello World !" を表示する Webアプリ を作ってみます。 出来上がったら、以下のような画面が表示される予定です。
前提条件
念のため、前提となる環境を以下に記載します。
- Windows 8.1
- Visual Studio 2013
チュートリアル
以下に "Hello World !" を表示する Webアプリ を作成する、具体的な チュートリアル 、手順を記載します。
ソリューション、プロジェクトの準備
- [ファイル]-[新規作成]-[プロジェクト] を選択
- 「新しいプロジェクト」ウィンドウにて、「ASP.NET WEb アプリケーション」を選択し、 名前、場所、ソリューション名を設定して、「OK」ボタンを押下
- 「新規 ASP.NET プロジェクト」ウィンドウにて、テンプレート「Empty」、コア参照「MVC」を選択し、「OK」ボタンを押下
- 続いて、[ツール]-[NuGet パッケージ マネージャー]-[ソリューションの NuGet パッケージの管理] を選択します
- 「NuGet パッケージの管理」ウィンドウにて、"Microsoft ASP.NET MVC" を検索し、選択、「インストール」ボタンを押下
以上で ASP.NET MVC 5 で開発する基本的な環境準備が整いました。 次からは実際にコードとして、モデル、コントロール、ビューを記述していきます。
モデルの作成
- ソリューション エクスプローラー にて、 "Models" ディレクトリを選択
- "Models"ディレクトリ上で右クリック、[追加]-[新しい項目] を選択
- 「新しい項目の追加」にて、「クラス」を選択し、名前に「Greeting」を記載して、「追加」ボタンを押下
- 出来上がった Greeting.cs を以下のように記載します1234567
namespace
WebApplication.Models
{
public
class
Greeting
{
public
string
Message {
get
;
set
; }
}
}
コントロールの作成
- ソリューション エクスプローラー にて、 "Controllers" ディレクトリ を選択
- "Controllers" ディレクトリ上で右クリック、 [追加]-[コントローラー] を選択
- 「スキャフォールディングの追加」にて、「MVC 5 コントローラー - 空」を選択し、「追加」ボタンを押下
- 「コントローラーの追加」にて、コントローラー名 "HomeController" を入力し、「追加」ボタンを押下
- 出来上がった
HomeController.cs
に、先ほど作成したGreeting
クラスを生成、初期化して、View メソッド
へ渡す処理を追加
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | namespace WebApplication.Controllers { using System.Web.Mvc; using WebApplication.Models; public class HomeController : Controller { // GET: Home public ActionResult Index() { var model = new Greeting(); model.Message = "Hello World !" ; return this .View(model); } } } |
ビューの作成
- 上記、"コントローラーの作成" で作った
HomeController.cs
のIndex メソッド
が記載されている任意の位置で右クリック、 [ビューの追加] を選択 - 「ビューの追加」にて、ビュー名 "Index" を入力して、「追加」ボタンを押下
- 出来上がった
Index.cshtml
に、モデルクラスの定義、メッセージ表示処理を追加123456789@model WebApplication.Models.Greeting
@{
ViewBag.Title = "Index";
}
<
h2
>Index</
h2
>
@* View()メソッド に渡されたオブジェクトの Message プロパティ を表示する *@
@Model.Message
以上でチュートリアルは終わりになります。
実行、確認
最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね!」または 「Twitter の フォロー」 お願いします!!