RazorPages アプリケーションでHTMLタグを表示するとタグが文字列として画面に表示される現象について紹介します。
以下のRazor Pageとコードを記述します。
@page
@model OutputPageContent.Pages.SimpleTextOutputModel
@{
}
<html>
<head>
<style type="text/css">
.Frame {
border: solid 1px #0094ff;
}
</style>
</head>
<body>
<p>出力のデモ</p>
<div class="Frame">
@Model.ContentText
</div>
<p>水色の枠にページモデルで設定したコンテンツが表示されます。</p>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace OutputPageContent.Pages
{
public class SimpleTextOutputModel : PageModel
{
public string ContentText { get; set; }
public void OnGet()
{
ContentText = "<div style=\"color:#008782;font-size:2rem\" >コンテンツです。ABCDEFG</div>";
}
}
}
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace OutputPageContent
{
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment()) {
app.UseDeveloperExceptionPage();
}
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapRazorPages();
});
}
}
}
ページモデルクラスのOnGetメソッドで ContentText プロパティにページに表示したい文字列を代入します。
RazorPageのcshtmlファイルの@Model.ContentTextでページモデルクラスの ContentText プロパティの値を表示します。
上記のRazor Pagesアプリケーションを起動し (アプリケーションルート)/SimpleTextOutput のURLをWebブラウザでアクセスします。
下図のページが表示されます。
文字列にHTMLのタグを含む文字列を設定していますが、HTMLタグの部分も文字列としてページ内に表示されてしまいます。
文字列をHTMLのタグの文字列として出力する場合は、Html.Rawメソッドを利用します。
Html.Rawメソッドの書式や動作の詳細はこちらの記事を参照してください。
SimpleTextOutput.cshtmlファイルのページ内の下記のコードを変更します。
<div class="Frame">
@Model.ContentText
</div>
<div class="Frame">
@Html.Raw(Model.ContentText)
</div>
変更後、プロジェクトを実行し(アプリケーションルート)/SimpleTextOutput のURLをWebブラウザでアクセスします。
下図のページが表示されます。出力する文字列がHTMLタグの文字列として処理されて表示されます。
