.NET Core MVC ビュー編

ビューの追加

「Views」フォルダを右クリック → 「追加」 → 「新しいフォルダー」
「新しいフォルダ」の名前を「〇〇〇」（〇〇〇controllerで付けた名前と同じ）
「Views/〇〇〇」フォルダを右クリック → 「追加」 → 「新しい項目」
「Razor ビュー - 空」を選択する。
名前はデフォルトの「index.cshtml」のまま、「追加」を選択。
「Views/〇〇〇/Index.cshtml」に以下のコードを記述する


@{
　ViewData["Title"] = "Index";
}
<h2>Index</h2>

<p>これがIndexページです！</p>

アプリを実行してURLに「https://localhost:{PORT}/〇〇〇」を入力すると、先ほどのコードの内容が表示されます。

ビューのページレイアウトを変更する

「Views/Shared/_Layout.cshtml 」を開く
下記のコードに修正する

<!DOCTYPE html>
<html lang="ja"> <!--★ここを修正-->
<head>
　<meta charset="utf-8" />
　<meta name="viewport" content="width=device-width, initial-scale=1.0" />
　<title>@ViewData["Title"] - 〇〇〇</title> <!--★ここを修正　〇〇〇はプロジェクト名-->
　<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
　<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
　<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="〇〇〇s" asp-action="Index">〇〇〇</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 justify-content-between">
　　　　　<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>
　　　　　</ul>
　　　　</div>
　　　</div>
　　</nav>
　</header>
　<div class="container">
　　<main role="main" class="pb-3">
　　　@RenderBody()
　　</main>
　</div>

　<footer class="border-top footer text-muted">
　　<div class="container">
　　　&copy; 2021 - 〇〇〇 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a> <!--★ここを修正　〇〇〇はプロジェクト名-->
　　</div>
　</footer>
　<script src="~/lib/jquery/dist/jquery.min.js"></script>
　<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
　<script src="~/js/site.js" asp-append-version="true"></script>
　@await RenderSectionAsync("Scripts", required: false)
</body>
</html>

ビューのタイトル

「Views/〇〇〇/Index.cshtml」に以下のコード書きなおす。


@{
　ViewData["Title"] = "〇〇〇 List"; <!--ページタイトルの修正-->
}

<h2>〇〇〇 List</h2>

<p>〇〇〇 Listです！</p>

コントローラからビューへのデータの受け渡し

コントローラの設定

「Controllers/〇〇〇Controller.cs」を開く。
以下のコードに書き換える。


public IActionResult Parameters(string hello, int number)
{
　ViewData["Hello"] = hello;
　ViewData["Number"] = number;

　return View();
}

ビューの設定

「Views/〇〇〇」フォルダを右クリック → 「追加」 → 「新しい項目」
「Razor ビュー - 空」を選択する。
名前は「Parameters.cshtml」で、「追加」を選択。
「Views/〇〇〇/Parameters.cshtml」に以下のコードを追記する


@{
　ViewData["Title"] = "パラメータ";
}

<h2>パラメータ</h2>

<ul>
　@for (int i = 0; i < (int)ViewData["Number"]; i++)
　{
　　<li>@ViewData["Hello"]</li>
　}
</ul>