プログラミング備忘録

プログラミングメモ

.NET Core

.NET Core MVC ビュー編

net-core-view

ビューの追加

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

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

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

 

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

 

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

  1. Views/Shared/_Layout.cshtml 」を開く
  2. 下記のコードに修正する
<!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>

 

 

ビューのタイトル

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

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

<h2>〇〇〇 List</h2>

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

 

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

コントローラの設定

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

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

 return View();
}

 

ビューの設定

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

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

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

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

 

 

 

 

 

 

 

-.NET Core

Copyright© プログラミングメモ , 2022 All Rights Reserved Powered by AFFINGER5.