Reactのようなコンポーネント指向でフロント側をデザインしてみると、レイアウトの中にさらにレイアウトを作るのが普通でしょう。.Net Coreでも実現できます。
要望
共通レイアウト(親)をベースにして、細かいレイアウト(子)を組み込みます。
親レイアウト
_Layout.cshtml
<!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
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="row">
<div class="col-xs-12">@ViewData["Title"]</div>
@RenderBody()
</div>
子レイアウトの利用
Search.cshtml
@{
Layout = "~/Views/Shared/_LayoutSearch.cshtml";
ViewData["Title"] = "ホテル検索";
}
<div class="row">
...hotel list
</div>
エラーについて
下記のエラーを表示する可能性があります。
InvalidOperationException: RenderBody has not been called for the page at '/Views/Shared/_LayoutSearch.cshtml'. To ignore call IgnoreBody()
原因は子レイアウトのRenderBody
をif conditionに入れたかもしれません。
if (Model.Data.Count > 0) {
@RenderBody()
}
対策としては、if分岐を丸ごとレイアウトを利用するページに移動することです。