ASP.NET MVCことはじめ

MVCはじめてみよう！と思ったけど、無駄に苦戦したのでメモっておきます。

#準備

###プロジェクトの追加
まずはプロジェクトの新規作成を、今回は「MVCDemo」でいきます。

![001.png](https://qiita-image-store.s3.amazonaws.com/0/70056/a12df327-e96b-3351-f684-30f5d2160a48.png)

###テンプレートの選択
テンプレートはEmptyを選択、MVCにチェックしてOKをクリックする。
![002.png](https://qiita-image-store.s3.amazonaws.com/0/70056/c4ad5a1f-9804-3468-9565-c23d165947b8.png)

###ファイル構成
プロジェクトを追加した直後は以下のような構成になっています。
今回、関係するのはRouteConfig.cs、Controllersフォルダ、Viewsフォルダです。
（Modelフォルダは追々）、
![003.png](https://qiita-image-store.s3.amazonaws.com/0/70056/bcd975cd-0720-6f0c-047c-cca531555ab7.png)

#ビューを表示する

###ルーティングの修正
RouteConfig.csを開いてみると以下のような内容のはずです。

```csharp:RouteConfig.cs
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home",
                                action = "Index",
                                id = UrlParameter.Optional }
            );
        }
    }
```
このままでもいいのですが意味もなく書き換えてみます。
controllerをHomeからFoo、actionをIndexからBarへ変更しました。

```csharp:RouteConfig.cs
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Foo",
                                action = "Bar",
                                id = UrlParameter.Optional }
            );
        }
    }
```

###コントローラーの追加
次にControllersフォルダを右クリックし、「追加」から「コントローラ」を選択すると、以下の画面が表示されるので「MVC5コントローラー ― 空」を選択し「追加」をクリックします。
なお、追加した時点でViewsフォルダにFooフォルダが追加されます。

![004.png](https://qiita-image-store.s3.amazonaws.com/0/70056/f62a72ff-406d-04ba-bc02-0e54d1c77099.png)

ファイル名を聞かれるので「FooController」に変更し「追加」をクリックします。

![005.png](https://qiita-image-store.s3.amazonaws.com/0/70056/294e389e-d5cd-389c-1863-fccc0ba60899.png)

###コントローラーの編集
追加されたFooController.csは以下のようになっていると思いますのでIndexメソッドをBarメソッドに名称変更します。

```csharp:FooController.cs（修正前）
    public class FooController : Controller
    {
        //
        // GET: /Foo/
        public ActionResult Index()
        {
            return View();
        }
    }
```

```csharp:FooController.cs（修正後）
    public class FooController : Controller
    {
        //
        // GET: /Foo/
        public ActionResult Bar()
        {
            return View();
        }
    }
```

###ビューの追加
ViewsフォルダのFooフォルダを右クリックし、「追加」から「ビュー」をクリックすると以下の画面が表示されます。
ビュー名を「Bar」に変更し、追加します。

![006.png](https://qiita-image-store.s3.amazonaws.com/0/70056/ddfd60b2-b88c-81d9-a850-5448702d8530.png)

###ビューの修正
お尻に文言を追加します。

```csharp:Bar.cshtml（修正前）
@{
    ViewBag.Title = "Bar";
}

<h2>Bar</h2>
```

```csharp:Bar.cshtml（修正後）
@{
    ViewBag.Title = "Bar";
}

<h2>Bar</h2>

Hello MVC!!
```

###実行
Hello MVCが表示されます。

![007.png](https://qiita-image-store.s3.amazonaws.com/0/70056/4af2d141-1456-2802-a3a3-9b1e9f49c432.png)

###URL
上記の表示は「/（ルート）」、「/Foo/Bar」いずれのURLでも表示できます。