BlazorアプリケーションでHTMLタグを出力する
BlazorアプリケーションでHTMLタグをページ内に出力するコードを紹介します。
概要
こちらの記事ではボタンのクリックによるページへのメッセージの表示をしました。この記事ではHTMLのタグをページ内に出力するコードを紹介します。
HTMLタグをページに出力するには、
MarkupString オブジェクトへのキャストを利用します。
プログラム例
こちらの記事で作成したボタンのクリックでメッセージを表示するプログラムを修正します。
コード
Blazorコンポーネントを追加し、ページを追加します。
@page "/SimpleButtonHtmlOutput"
<h3>Index</h3>
<div>
<button class="" @onclick="ButtonClick">Button1</button>
<p>@((MarkupString)messageText)</p>
</div>
@code {
string messageText;
void ButtonClick()
{
messageText = "<h3>見出しです</h3><p>My Button Clicked</p>";
}
}
解説
@((MarkupString)messageText)を記述し、MarkupStringオブジェクトにキャストすることでタグの内容を出力できます。
@messageText の記述の場合は、変数の値をそのまま文字列としてページに出力されます。
実行結果
Blazorアプリケーションのページを表示します。下図の画面が表示されます。
[Button1]をクリックします。見出しタグ(h3)、段落タグ(p)で整形された文字列が表示されます。
参考 : MarkupString のキャストをしない場合
MarkupString へのキャストをせずに変数を出力した場合の結果は以下になります。
@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>";
}
}
タグも文字列として画面に表示されることが確認できます。
参考 : プロジェクト内のその他のコード
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" />
</Found>
<NotFound>
<LayoutView>
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
namespace SimpleButton
{
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();
services.AddServerSideBlazor();
}
// 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.UseStaticFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
});
}
}
}
@page
@namespace SimpleButton.Pages
<!DOCTYPE html>
<html lang="ja">
<head>
<base href="~/" />
</head>
<body>
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
