Visual Studio 2015 でWebアプリケーションでＭＶＣを初めてみる

Visual Studio 2015 でWebアプリケーションでＭＶＣを初めてみることにしました。

初心者なのでＨｅｌｌｏ，Worldからスタートしたいと思いますが、まずはどうやってプロジェクトを作るのかなっていうところからです。

 

Hello,Worldができるまでの道のり・・・。

 

（１）Visual Studioで「ファイル」→「新規」→「プロジェクト」をクリック。

（２）「新しいプロジェクト」で「テンプレート」の中から「ASP.NET WEBアプリケーション」を選択し、OK

mvc1

 

（３）テンプレートを「Empty」、「フォルダーおよびコア参照を追加する」で「MVC」にチェックしてOK

mvc2

 

（４）空っぽのMVCの枠が出来がある。

 

 

（５）コントローラーの作成

・「Controllers」右クリック→「追加」→「コントローラー」をクリック

mvc5

 

・「MVC５コントローラー 空」を選択し、OK。名前は「DefaultController」

mvc6

 

DefaultController.csの中身

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace WebApplication1.Controllers
{
    public class DefaultController : Controller
    {
        // GET: Default
        public ActionResult Index()
        {
            return View();
        }
    }
}

 

（６）Viewの作成

・Viewsの「Default」右クリック→「追加」→「ビジュー」をクリックする

mvc7

 

・Viewの名前をコントローラーのActionResultの名前を一致させて、「レイアウトページの使用」はチェックを外します。

mvc8

 

・Index.cshtmlというファイルができあがります。

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div> 
    </div>
</body>
</html>

 

（７）とりあえず動かしてみる

・Viewの中身に適当に記述して表示されるか実行！！

mvc9

 

とりあえずは「ハロー」がでた！！

直書きなので当たり前っちゃあたりまえですね・・・。

 

（８）コントローラーから値を渡してみる。

えーとよくわからないけど「ViewBagとViewData」というものがあるらしい。ControllerとView間でデータの受け渡すためとのこと。まあ、これを使えばいいんだなっということで。

・コントローラーに追記

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace WebApplication1.Controllers
{
    public class DefaultController : Controller
    {
        // GET: Default
        public ActionResult Index()
        {
            ViewData["Message"] = "HELLO,HELLO,";
            return View();
        }
    }
}

 

・Viewに追記

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div> 
        @ViewData["Message"]
    </div>
</body>
</html>

コンパイルしたらうまくいきました。

mvc10

 

で、Modelって

・まずはモデルをつくって。クラスを追加でいいんだと。

mvc3

 

mvc4

 

・Messageという変数を定義して。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebApplication1.Models
{
    public class Class1
    {
        public string Message { get; set; }
    }
}

 

・コントローラーに使うよと値を入れちゃうけんと定義。でViewでmodelを使うよと渡す。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace WebApplication1.Controllers
{
    public class DefaultController : Controller
    {
        // GET: Default
        public ActionResult Index()
        {
            ViewData["Message"] = "HELLO,HELLO,";
            Models.Class1 model = new Models.Class1();
            model.Message = "モデルでのメッセージ";
            return View(model);
        }
    }
}

 

・で、Viewで「@Model」で値を出力するよーって指定。

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div> 
        @ViewData["Message"]
        <br />
        @Model.Message
    </div>
</body>
</html>

 

で結果は、

mvc11

 

やっとモデルでのメッセージが表示された。。あとDBってどーするんだ？