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

概要

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

コントローラーを追加する

ソリューションエクスプローラーの「Controllers」を選択します。
右クリックでメニューを表示し、追加⇒コントローラーを選択します。
「MVCコントローラー-空」を選択します。

名前を設定します。コントローラーは「xxxController」という名称で作ります。
今回は「KujiController」とします。

作成直後のコードは以下のようになっています。

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」のままです。

呼び出した時に分かりやすいように、タイトルと背景色を変えます。
コードを以下のようにします。

Index.cshtml

@{
    ViewData["Title"] = "あみだくじ";
}

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

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

Homeから追加したビューを呼び出す

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

_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>項目を追加しました。

実行してみる

デバッグ実行します。

「あみだくじ」メニューが追加されました。押下してみます。

無事、切り替わりました。
URLも「https : //localhost:44344/」の後に「Kuji」が付いています。
これは、KujiControllerのIndexアクションのURLです。

まとめ

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