【ASP.NET Core MVC】ASP.NET Core MVCであみだくじを作ってみる 2 (ビュー,コントローラーの追加)

# 概要
前回：[ASP.NET Core MVCであみだくじを作ってみる 1 (開発環境の準備)](https://qiita.com/plusM/items/af82c650138d71be9d15)
今回は、ビューを追加してHome画面から呼び出せるようにします。

# コントローラーを追加する
ソリューションエクスプローラーの「Controllers」を選択します。
右クリックでメニューを表示し、追加⇒コントローラーを選択します。
「MVCコントローラー-空」を選択します。
![コントローラー①.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520699/3acea06c-4322-3bc0-dc63-5f3cbb192a7e.png)
名前を設定します。コントローラーは「xxxController」という名称で作ります。
今回は「KujiController」とします。
![コントローラー②.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520699/678dbc3f-dc6a-82b2-dcd7-62a1cdd414de.png)
作成直後のコードは以下のようになっています。

```cs:KujiController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace Amidakuji.Controllers
{
    public class KujiController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}
```
自動でIndexアクションが作成されています。
ビューを表示するアクションです。

# ビューを追加する
ビューの置き場所は「Views\コントローラー名」フォルダの直下です。
ビューのファイル名は「アクション名.cshtml」で作ります。

ソリューションエクスプローラーの「Views」を選択します。
右クリックでメニューを表示し、追加⇒新しいフォルダを選択します。
「Kuji」フォルダを作成します。

「Views\Kuji」を選択し、右クリックでメニュー表示、追加⇒新しい項目を選択します。
「Razor ビュー」を選択します。Indexアクションのビューを作るので、ファイル名は「Index.cshtml」のままです。
![ビュー.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520699/c44d5d6b-503e-e388-60b4-668193104480.png)
呼び出した時に分かりやすいように、タイトルと背景色を変えます。
コードを以下のようにします。

```html:Index.cshtml
@{
    ViewData["Title"] = "あみだくじ";
}

<style>
    .kuji-container {
        height: 100px;
        background-color: #CBFFD3;
    }
</style>

<div class="kuji-container"></div>
```

# Homeから追加したビューを呼び出す
「Views\Shared\\_Layout.cshtml」を開きます。
ビューのヘッダや外枠など、共通テンプレートを定義しています。
(このファイルは、プロジェクト生成時に自動で作成されています。)
ヘッダのナビに「あみだくじ」メニューを追加してみます。

```html:_Layout.cshtml
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Amidakuji</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                        <!-- あみだくじメニューを追加 -->
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Kuji" asp-action="Index">あみだくじ</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
```
\<!-- あみだくじメニューを追加 -->の下の\<li>項目を追加しました。

# 実行してみる
デバッグ実行します。
![メニュー追加.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520699/3acaa831-4301-f24f-11d1-f0325eed4a35.png)
「あみだくじ」メニューが追加されました。押下してみます。
![Kujiビュー.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520699/c721780c-aa5c-b923-eae3-2dddae6bd206.png)
無事、切り替わりました。
URLも「https : //localhost:44344/」の後に「Kuji」が付いています。
これは、KujiControllerのIndexアクションのURLです。

# まとめ
今回は、ビューを追加してHome画面から呼び出せるところまでを行いました。
次回は、モデルを追加してビューと紐付けます。
次回分はこちら⇒[ASP.NET Core MVCであみだくじを作ってみる 3 (モデルの追加)](https://qiita.com/plusM/items/6a1aac0c1b39533bca95)