Razor Pagesで変数(プロパティ)の値をHTMLタグとして出力するコードを紹介します。
概要
プロパティの値をページのHTMLとして出力する場合は、
Html.Raw を利用します。
動作の確認 : 何も指定しない場合
コード
何も指定しない状態でプロパティの値を画面に表示した場合の動作を確認します。
下記のRazorPageを作成します。
@page
@model HtmlGenerate.Pages.SimpleHtmlOutputModel
@{
}
<html>
<head></head>
<body>
<p>テストページ</p>
@Model.OutputMessage
<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 HtmlGenerate.Pages
{
public class SimpleHtmlOutputModel : PageModel
{
public string OutputMessage { get; set; }
public void OnGet()
{
OutputMessage = "<h2>タイトル</h2>";
OutputMessage += "<p>メッセージ1です。あいうえお。</p>";
OutputMessage += "<p>メッセージ2です。ABCDEFG</p>";
}
}
}
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 HtmlGenerate
{
public class Startup
{
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment()) {
app.UseDeveloperExceptionPage();
}
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapRazorPages();
});
}
}
}
解説
ページモデルクラスで、
OutputMessage プロパティを宣言します。OnGetメソッドで、OutputMessageプロパティに値を設定します。
public class SimpleHtmlOutputModel : PageModel
{
public string OutputMessage { get; set; }
public void OnGet()
{
OutputMessage = "<h2>タイトル</h2>";
OutputMessage += "<p>メッセージ1です。あいうえお。</p>";
OutputMessage += "<p>メッセージ2です。ABCDEFG</p>";
}
}
Razor Pageのcshtmlファイルには
@Model.OutputMessage を記述し、ページモデルクラスの
OutputMessageプロパティの値をページに表示します。
Startup.csファイルで、RazorPageへのルーティングを実装しています。
表示結果
上記のプロジェクトを実行し
(アプリケーションルート)/SimpleHtmlOutput URLにアクセスします。下図のページが表示されます。
HTMLタグをプロパティの文字列として設定していますが、タグの文字がそのまま画面に表示され、HTMLの書式として反映されていないことが確認できます。
対処法 : Html.Raw の利用
HTMLとして出力するため、
Html.Raw を利用します。
コード
Razor Pageのcshtmlファイルを下記に変更します。
@Html.Raw() メソッドの引数にページモデルのプロパティの値を与えます。
@page
@model HtmlGenerate.Pages.SimpleHtmlOutputModel
@{
}
<html>
<head></head>
<body>
<p>テストページ</p>
@Html.Raw(Model.OutputMessage)
<p>テストページ</p>
</body>
</html>
解説
Html.Raw() メソッドの引数にHTMLのタグ文字列を与えると、タグの文字列をHTMLの書式として表現できます。
実行結果
cshtmlファイルを変更後プロジェクトを実行します。
(アプリケーションルート)/SimpleHtmlOutput URLにアクセスします。下図のページが表示されます。
タグの文字列がHTMLの書式として表現され、文字の大きさや段落として表現できていることが確認できます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2021-05-11
作成日: 2021-05-11
