コンテンツページからレイアウトページのHeadセクションにコンテンツを設定するコードを紹介します。
概要
こちらの記事では、コンテンツページからViewBagやViewDataを利用してページのタイトルを設定するコードを紹介しました。
タグ内に埋め込む文字列の場合は紹介した方法で対応できますが、タグを含むHTMLやJavaScriptのコードをレイアウトページに反映できません。
この記事では、セクションの機能を利用して、レイアウトページのHead内にタグを含めたHTMLコンテンツを出力する手順を紹介します。
方針
コンテンツページにセクションを定義し、レイアウトページの埋め込みたい位置に、RenderSection() メソッドを記述します。
書式
セクションの定義
@section [セクション名]{
<!-- セクションのコンテンツを記述 -->
}
セクションの出力
@RenderSection("[セクション名]");
プログラム例
ASP.NET アプリケーションを作成します。
コード
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="Layout.css" />
<title>@ViewBag.Title</title>
@RenderSection("MyScript")
</head>
<body>
<div class="Header">ヘッダ</div>
<div>
@RenderBody()
</div>
<div class="Footer">フッタ</div>
</body>
</html>
.Header {
background-color: #ceeaff;
border: 1px solid #318dff;
}
.Footer {
background-color: #dddddd;
border: 1px solid #808080;
}
@page
@{
ViewData["Title"] = "Content1";
Layout = "~/Pages/_Layout.cshtml";
}
@section MyScript{
<script type="text/javascript">
alert("Test");
</script>
}
<h1>TestPage - Content1</h1>
<p>コンテンツ1のテストページです。</p>
@page
@{
ViewData["Title"] = "Content2";
Layout = "~/Pages/_Layout.cshtml";
}
@section MyScript{
}
<h1>TestPage - Content2</h1>
<p>コンテンツ2のテストページです。</p>
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
var app = builder.Build();
app.UseStaticFiles();
app.UseRouting();
app.MapRazorPages();
app.Run();
解説
@RenderSection() メソッドによりコンテンツページで定義されたコンテンツを出力します。第一引数にレンダリングするセクション名を与えます。
<head>
<!-- 中略 -->
@RenderSection("MyScript")
</head>
Content1ページのMyScriptセクション部分は以下のコードです。JavaScriptの alert() 関数を実行するスクリプトを出力します。
@section MyScript{
<script type="text/javascript">
alert("Test");
</script>
}
Content2ページのMySectio部分は以下のコードです。空になっており、何も出力しない設定となっています。
@section MyScript{
}
実行結果
プロジェクトを実行し、
(アプリケーションURL)/Content1 ページにアクセスします。
URLを開くと下図のアラートダイアログが表示されます。
アラートダイアログの[OK]ボタンをクリックするとページが表示されます。
ページのコードは以下の通りです。
alert("Test"); のコードがheadタグ内に出力されていることが確認できます。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="Layout.css" />
<title>Content1</title>
<script type="text/javascript">
alert("Test");
</script>
</head>
<body>
<div class="Header">ヘッダ</div>
<div>
<h1>TestPage - Content1</h1>
<p>コンテンツ1のテストページです。</p>
</div>
<div class="Footer">フッタ</div>
<!-- Visual Studio Browser Link -->
<script type="text/javascript" src="/_vs/browserLink" async="async" id="__browserLink_initializationData"
data-requestId="c6476c316bff4f74977147cac9bd8256"data-requestMappingFromServer="false"
data-connectUrl="http://localhost:53487/9c73d7ac66b8438ebf7e088d46c76441/browserLink"></script>
<!-- End Browser Link -->
<script src="/_framework/aspnetcore-browser-refresh.js"></script></body>
</html>
続いて、
(アプリケーションURL)/Content2 ページにアクセスします。
こちらのURLの場合はアラートダイアログは表示されません。
ページのコードは以下の通りです。
alert("Test"); はheadタグ内に出力されていません。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="Layout.css" />
<title>Content2</title>
</head>
<body>
<div class="Header">ヘッダ</div>
<div>
<h1>TestPage - Content2</h1>
<p>コンテンツ2のテストページです。</p>
</div>
<div class="Footer">フッタ</div>
<!-- Visual Studio Browser Link -->
<script type="text/javascript" src="/_vs/browserLink" async="async" id="__browserLink_initializationData"
data-requestId="37862c5805f745bbb357ce15d11628c2"data-requestMappingFromServer="false"
data-connectUrl="http://localhost:53487/9c73d7ac66b8438ebf7e088d46c76441/browserLink"></script>
<!-- End Browser Link -->
<script src="/_framework/aspnetcore-browser-refresh.js"></script></body>
</html>
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2023-03-22
作成日: 2022-07-25
