Razor PagesアプリケーションでHTMLタグを出力する - ASP.NET Core

Razor PagesアプリケーションでHTMLタグを出力するコードを紹介します。

概要

Razor Pageで文字列を出力する場合、モデルクラスのプロパティの値を出力できますが、何も指定せずに出力すると単純な文字列の表示となり、HTMLタグでの出力ができません。
Razor Page内にHTMLタグを出力する場合は、Html.Raw() メソッドを利用します。

書式

Html.Raw([出力するHTML文字列の値])

記述例

@Html.Raw(Model.OutputHtmlString)

@Html.Raw("<p>段落です。</p>")

プログラム例

RazorPages アプリケーションで以下のコードを記述します。

SimpleHtmlTagOutput.cshtml

@page
@model RazorPagesControlFlow.Pages.SimpleHtmlTagOutputModel
@{
}
<html>
<head>
  <style type="text/css">
    .Frame{
      border:solid 1px #ff6a00;
    }
  </style>
</head>
<body>
  <p>HTMLタグ出力のデモ</p>
  <div class="Frame">
    @Html.Raw(Model.ContentText)
  </div>
  <p>オレンジ色の枠にページモデルで設定したコンテンツが表示されます。</p>
</body>
</html>

SimpleHtmlTagOutput.cshtml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace RazorPagesControlFlow.Pages
{
  public class SimpleHtmlTagOutputModel : PageModel
  {
    public string ContentText { get; set; }

    public void OnGet()
    {
      ContentText = "<ul><li>ぺんぎんクッキー</li> <li>らくだキャラメル</li> <li>しろくまアイス</li> </ul>";
    }
  }
}

Startup.cs

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();
      });
    }
  }
}

解説

ページモデルクラスSimpleHtmlTagOutputModel のOnGetメソッドでページへのアクセス時に ContentText プロパティにHTMLタグを含む文字列を設定します。
RazorPageのcshtmlの@Html.Raw(Model.ContentText) でページクラスのContentTextプロパティの値をHTMLタグとしてページに表示します。

実行結果

上記のプロジェクトを実行し、(アプリケーションルート)/SimpleHtmlTagOutputModel のURLにアクセスします。下図のページが表示されます。
ページモデルクラスのContentTextプロパティに設定した文字列がHTMLのタグ文字列としてページに表示できていることが確認できます。

著者

Penta

iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

目次

Razor PagesアプリケーションでHTMLタグを出力する - ASP.NET Core

概要

書式

記述例

プログラム例

解説

実行結果

関連するページ