BlazorアプリケーションでHTMLタグを表示するとタグが文字列として画面に表示される

BlazorアプリケーションでHTMLタグを表示するとタグが文字列として画面に表示されてしまう現象について紹介します。

現象

下記のRazorコンポーネントのページを作成します。
ボタンのクリックにより、HTMLのタグで整形された文字列を画面に表示する動作を期待しています。

@page "/SimpleButtonHtmlOutput"

<h3>Index</h3>
<div>
  <button class="" @onclick="ButtonClick">Button1</button>
  <p>@messageText)</p>
</div>
@code {
  string messageText;

  void ButtonClick()
  {
    messageText = "<h3>見出しです</h3><p>My Button Clicked</p>";
  }
}

上記のRazorコンポーネントのページを表示し、[button1]をクリックします。下図の画面が表示されます。HTMLのタグが画面にそのまま文字列として表示されてしまいます。

原因

RazorコンポーネントやRazorページでは、変数を出力した場合タグも含めて文字列として出力されるためです。

対処法

HTMLタグとして画面に表示したい場合は変数を MarkupString オブジェクトにキャストすることでタグとして出力できます。 MarkupStringを利用した出力のコードはこちらの記事を参照して下さい。

著者

Penta

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