ASP.NET Core アプリケーションを作成し、以下のRazor Pageを作成します。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@RenderSection("MyScripts", required: false)
</head>
<body>
<div>
@RenderBody()
</div>
</body>
</html>
@page
@using Microsoft.Extensions.Configuration;
@model RazorPagesCustomTagHelper.Pages.SimpleDemoPageModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = "~/Pages/_Layout1.cshtml";
}
@section MyScripts {
<script type="application/ld+json">
{
"id":101,
"name":"ペンギン",
"code":"PEN-001"
}
</script>
}
<html>
<head>
<title>テスト用ページ</title>
</head>
<body>
<h1>HTMLタグの確認デモページ</h1>
<p>あいうえお</p>
</body>
</html>
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace RazorPagesCustomTagHelper.Pages
{
public class SimpleDemoPageModel : PageModel
{
public void OnGet()
{
}
}
}
(Webアプリケーションルート)/SimpleDemoPage のURLを開きます。下図のページが表示されます。
<script type="application/ld+json"> の部分が <script type="application/ld+json"> と表現されています。
なお、@section を利用しない場合は実体参照にはなりません。以下のコードで実行結果を確認します。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<script type="application/ld+json">
{
"id":101,
"name":"ペンギン",
"code":"PEN-001"
}
</script>
</head>
<body>
<div>
@RenderBody()
</div>
</body>
</html>
@page
@model RazorPagesCustomTagHelper.Pages.SimpleDemoPageNoSectionModel
@{
Layout = "~/Pages/_Layout2.cshtml";
}
<html>
<head>
<title>テスト用ページ</title>
</head>
<body>
<h1>HTMLタグの確認デモページ</h1>
<p>セクションを使わない場合のデモ</p>
</body>
</html>
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace RazorPagesCustomTagHelper.Pages
{
public class SimpleDemoPageNoSectionModel : PageModel
{
public void OnGet()
{
}
}
}
@sectionを利用していません。
<script type="application/ld+json"> で表現されています。
@sectionのタグを実体参照の表記にしない方法として、
カスタムのタグヘルパーを作成する方法がわかりやすいです。
はじめに以下のクラスを記述します。カスタムのタグヘルパーのクラスになります。
output.TagNameは出力するタグ名になります。今回の例では、タグヘルパーを通すことで、raw-script タグを script タグに変換します。
output.TagMode = TagMode.StartTagAndEndTag;により、開始と終了タグがあるタグであることを指定しています。
using Microsoft.AspNetCore.Razor.TagHelpers;
namespace RazorPagesCustomTagHelper
{
[HtmlTargetElement("raw-script", Attributes = "type")]
public class RawScriptTagHelper : TagHelper
{
public override void Process(TagHelperContext context, TagHelperOutput output)
{
output.TagName = "script"; // Change <raw-script> to <script>
output.TagMode = TagMode.StartTagAndEndTag; // Ensure it's not self-closing
output.Content.SetHtmlContent(output.GetChildContentAsync().Result.GetContent());
}
}
}
以下のコードはraw-scriptタグ内の文字列をそのまま結果として出力する処理となります。
output.Content.SetHtmlContent(output.GetChildContentAsync().Result.GetContent());
続いてRazorPageを修正します。実体参照表示したくない<script> タグを <raw-script> タグとして記述します。
また、TagHelperを参照するための@addTagHelperを記述します。
addTagHelperの書式は次の通りです。
@addTagHelper *, (プロジェクトのネームスペース)
@page
@model RazorPagesCustomTagHelper.Pages.SimpleCustomTagHelperModel
@addTagHelper *, RazorPagesCustomTagHelper
@{
Layout = "~/Pages/_Layout3.cshtml";
}
@section MyScripts {
<raw-script type="application/ld+json">
{
"id":101,
"name":"ペンギン",
"code":"PEN-001"
}
</raw-script>
}
<html>
<head>
<title>テスト用ページ</title>
</head>
<body>
<h1>HTMLタグの確認デモページ</h1>
<p>あいうえお</p>
</body>
</html>
プロジェクトを実行します。(Webアプリケーションルート)/SimpleCustomTagHelper のURLを開きます。下図のページが表示されます。
HTMLのコードを表示します。@section 内で記述されているタグraw-scriptは sctipt タグに変換され、+ の記号も実体参照の表現にはなっていません。
@section 内で記述されたタグを実体参照の表現にしない動作が実現できました。
