2020年6月28日 • ☕️ 2 min read

Reactのようなコンポーネント指向でフロント側をデザインしてみると、レイアウトの中にさらにレイアウトを作るのが普通でしょう。.Net Coreでも実現できます。

要望

共通レイアウト(親)をベースにして、細かいレイアウト(子)を組み込みます。

親レイアウト

_Layout.cshtml
Copy
<!DOCTYPE html>
<!--[if IE 9]><html class="ie ie9"> <![endif]-→
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="thundermiracle.com">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="~/css/site.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script src="~/js/site.js" asp-append-version="true"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>

子レイアウト

_LayoutSearch.cshtml
Copy
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="row">
  <div class="col-xs-12">@ViewData["Title"]</div>
  @RenderBody()
</div>

子レイアウトの利用

Search.cshtml
Copy
@{
    Layout = "~/Views/Shared/_LayoutSearch.cshtml";
    ViewData["Title"] = "ホテル検索";
}

<div class="row">
  ...hotel list
</div>

エラーについて

下記のエラーを表示する可能性があります。

Copy
InvalidOperationException: RenderBody has not been called for the page at '/Views/Shared/_LayoutSearch.cshtml'. To ignore call IgnoreBody()

原因は子レイアウトのRenderBodyをif conditionに入れたかもしれません。

Copy
if (Model.Data.Count > 0) {
  @RenderBody()
}

対策としては、if分岐を丸ごとレイアウトを利用するページに移動することです。


関連投稿

.Net CoreのプロジェクトをPleskにデプロイ

2020年7月6日

ThunderMiracle

Blog part of ThunderMiracle.com