ASP.NET Core-Razorレイアウトビュー

この章では、Razorレイアウトビューについて理解します。ほとんどのWebサイトおよびWebアプリケーションでは、いくつかの一般的な要素を表示するページを作成する必要があります。

通常、ロゴとナビゲーションメニューを表示するすべてのページに上部領域があります。
また、追加のリンクと情報を含むサイドバーと、おそらくコンテンツのあるページの下部にフッターがある場合があります。
アプリケーションのすべてのページには、これらの共通の要素が必要です。ここでは、レイアウトビューを使用して、作成するすべてのページで要因の重複を回避します。

レイアウトビュー

レイアウトビューとは何かを理解しましょう。

レイアウトビューは、拡張子が*。cshtml *のRazorビューです。レイアウトビューに好きな名前を付けることができます。この章では、 *_ Layout.cshtml という名前のレイアウトビューを使用します。
これはレイアウトビューの一般的な名前であり、先頭のアンダースコアは必要ありません。これは、多くの開発者がビューではないビューを識別するために従う規則です。これをコントローラーアクションのビュー結果としてレンダリングします。
これは特別な種類のビューですが、レイアウトビューができたら、ホームページのインデックスビューのようなコントローラービューを設定できます。

レイアウトビュー

このビューを設定して、特定の場所のレイアウトビュー内にレンダリングできます。
このレイアウトビューのアプローチは、Index.cshtmlがロゴまたはトップレベルナビゲーションについて何も知る必要がないことを意味します。
インデックスビューは、コントローラーアクションがこのビューに与えるモデルの特定のコンテンツをレンダリングするだけでよく、レイアウトビューが他のすべてを処理します。

例

簡単な例を見てみましょう。

複数のビューがある場合、すべてのビューにある程度の重複マークアップが含まれることがわかります。これらはすべて、開始* HTMLタグ*、ヘッドタグ、および*ボディタグ*を持ちます。

このアプリケーションにはナビゲーションメニューはありませんが、実際のアプリケーションでも使用できる可能性があり、すべてのビューでそのマークアップを複製することは望ましくありません。

レイアウトビューを作成し、レイアウトビューを Views フォルダー内のSharedという名前の新しいフォルダーに追加します。これは、MVCフレームワークが知っている従来のフォルダーです。ここの内部のビューは、アプリケーション全体の複数のコントローラーによって使用される可能性があることを知っています。 [共有]フォルダーを右クリックして、[追加]→[新しいアイテム]を選択します。

ASP.NET新しいアイテムの追加

中央のペインで、MVCビューレイアウトページを選択します。ここでのデフォルト名は_Layout.cshtmlです。ユーザーに応じて、実行時に使用するレイアウトビューを選択します。次に、追加ボタンをクリックします。これは、新しいレイアウトビューでデフォルトで取得されるものです。

レイアウトCshtml

頭と体を管理するのはレイアウトビューです。これで、このビューはRazorビューにあるため、C＃式を使用できます。リテラルテキストを追加できます。 DateTime.Nowを表示するdivができました。 Yearを追加します。

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width"/>
      <title>@ViewBag.Title</title>
   </head>

   <body>
      <div>
        @DateTime.Now
      </div>

      <div>
        @RenderBody()
      </div>

   </body>
</html>

上記のコードでは、 RenderBody や ViewBag.Title などの式が表示されます。 MVCコントローラーアクションがインデックスビューをレンダリングするとき、それに関連するレイアウトページがあります。次に、Indexビューとそれが生成するHTMLがIndexビューに配置されます。

これは、RenderBodyのメソッド呼び出しが存在する場所です。アプリケーション全体のすべてのコンテンツビューは、RenderBodyが呼び出されるdiv内に表示されることが期待できます。

このファイル内の他の式は、ViewBag.Titleです。 ViewBagは、ViewBagに追加する任意のプロパティとデータに追加できるデータ構造です。 ViewBag.Title、ViewBag.CurrentDate、またはViewBagに必要なプロパティを追加できます。

index.cshtmlファイルに移動しましょう。

@model FirstAppDemo.Controllers.HomePageViewModel
<html xmlns = "http://www.w3.org/1999/xhtml">

   <head>
      <title>Home</title>
   </head>

   <body>
      <h1>Welcome!</h1>

      <table>
         @foreach (var employee in Model.Employees) {
            <tr>
               <td>
                  @Html.ActionLink(employee.Id.ToString(), "Details", new
                     { id = employee.Id })
               </td>
               <td>@employee.Name</td>
            </tr>
         }
      </table>

   </body>
</html>

インデックスビュー内で不要になったマークアップを削除します。そのため、HTMLタグやheadタグなどを削除できます。また、次のプログラムに示すように、開始のbody要素または終了タグは必要ありません。

@model FirstAppDemo.Controllers.HomePageViewModel
@{
   ViewBag.Title = "Home";
   Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>Welcome!</h1>
<table>
   @foreach (var employee in Model.Employees) {
      <tr>
         <td>
            @Html.ActionLink(employee.Id.ToString(), "Details", new { id = employee.Id })
         </td>
         <td>@employee.Name</td>
      </tr>
   }
</table>

私たちはまだ2つのことを行う必要があります-

最初に、このビューからレイアウトビューを使用することをMVCフレームワークに伝える必要があります。
次に、上記のコードに示すように、ViewBagに情報を追加して適切なタイトルを設定する必要があります。

すべてのファイルを保存して、アプリケーションを実行しましょう。アプリケーションを実行すると、次のホームページが表示されます。

ホームページ

Asp.net-core-razor-layout-views

ASP.NET Core-Razorレイアウトビュー

レイアウトビュー

例