空のプロジェクト から 始める ASP.NET MVC 5

ASP.NET MVC 5 の 入門ともいえる、もっとも簡単な チュートリアル を作ってみました。 空のプロジェクト からだと単純にはいかなかったので、そのメモも兼ねています。

よくみるサンプルコードやチュートリアル、入門などでは ViewBag や ViewDagta を使ってますが、実際はモデルを渡して利用した方が都合が良いと思うので、ここではちょっと実践よりにチュートリアルを構成してみました。

サンプルコード

サンプルコード の ダウンロード

目次

• 目標
• 前提条件
• チュートリアル
  • ソリューション、プロジェクトの準備
  • モデルの作成
  • コントロールの作成
  • ビューの作成
  • 実行、確認

目標

よくある "Hello World !" を表示する Webアプリ を作ってみます。 出来上がったら、以下のような画面が表示される予定です。

前提条件

念のため、前提となる環境を以下に記載します。

• Windows 8.1
• Visual Studio 2013

チュートリアル

以下に "Hello World !" を表示する Webアプリ を作成する、具体的な チュートリアル 、手順を記載します。

ソリューション、プロジェクトの準備

1. [ファイル]-[新規作成]-[プロジェクト] を選択

   

2. 「新しいプロジェクト」ウィンドウにて、「ASP.NET WEb アプリケーション」を選択し、 名前、場所、ソリューション名を設定して、「OK」ボタンを押下

   

3. 「新規 ASP.NET プロジェクト」ウィンドウにて、テンプレート「Empty」、コア参照「MVC」を選択し、「OK」ボタンを押下

   

4. 続いて、[ツール]-[NuGet パッケージ マネージャー]-[ソリューションの NuGet パッケージの管理] を選択します

   

5. 「NuGet パッケージの管理」ウィンドウにて、"Microsoft ASP.NET MVC" を検索し、選択、「インストール」ボタンを押下

   

以上で ASP.NET MVC 5 で開発する基本的な環境準備が整いました。 次からは実際にコードとして、モデル、コントロール、ビューを記述していきます。

モデルの作成

1. ソリューション エクスプローラー にて、 "Models" ディレクトリを選択

   

2. "Models"ディレクトリ上で右クリック、[追加]-[新しい項目] を選択

   

3. 「新しい項目の追加」にて、「クラス」を選択し、名前に「Greeting」を記載して、「追加」ボタンを押下

   

4. 出来上がった Greeting.cs を以下のように記載します

   namespace WebApplication.Models
   {
       public class Greeting
       {
           public string Message { get; set; }
       }
   }
   

コントロールの作成

1. ソリューション エクスプローラー にて、 "Controllers" ディレクトリ を選択

   

2. "Controllers"　ディレクトリ上で右クリック、 [追加]-[コントローラー] を選択

   

3. 「スキャフォールディングの追加」にて、「MVC 5 コントローラー - 空」を選択し、「追加」ボタンを押下

   

4. 「コントローラーの追加」にて、コントローラー名 "HomeController" を入力し、「追加」ボタンを押下

   

5. 出来上がった HomeController.cs に、先ほど作成した Greeting クラスを生成、初期化して、 View メソッド へ渡す処理を追加

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);
        }
    }
}

ビューの作成

1. 上記、"コントローラーの作成" で作った HomeController.cs の Index メソッド が記載されている任意の位置で右クリック、 [ビューの追加] を選択

   

2. 「ビューの追加」にて、ビュー名 "Index" を入力して、「追加」ボタンを押下

   

3. 出来上がった Index.cshtml に、モデルクラスの定義、メッセージ表示処理を追加

   @model WebApplication.Models.Greeting
   @{
       ViewBag.Title = "Index";
   }
   
   <h2>Index</h2>
   
   @* View()メソッド に渡されたオブジェクトの Message プロパティ を表示する *@
   @Model.Message
   

以上でチュートリアルは終わりになります。

実行、確認

1. ツールバー の 「デバッグ開始」ボタン を押下

   

2. Internet Explorer が立ち上がり、動作していることを確認

   

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！

• Facebook ページ
• twitter