目次
RazorPagesにBlazor Serverが使えるようにした備忘録。詳しい説明は後述の参考文献のリンクを読んでください。
既存コードの修正
Program.cs修正
：
builder.Services.AddServerSideBlazor();
：
app.UseEndpoints(endpoints =>
{
//endpoints.MapControllers();
//endpoints.MapRazorPages();
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host"); // RazorPageにBlazorを部分的に使うだけなら必要ない
});
_Layout.cs修正
：
<script src="~/_framework/blazor.server.js"></script>
：
Pagesフォルダに追加
３つのファイルを追加
_Imports.razor追加
@using System.Net.Http
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.JSInterop
@using Microsoft.AspNetCore.Components.Web
App.razor追加
@using Microsoft.AspNetCore.Components.Routing
<Router AppAssembly="typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="routeData" />
</Found>
<NotFound>
<h1>Page not found</h1>
<p>Sorry, but there's nothing here!</p>
</NotFound>
</Router>
_Host.cshtml
@page "/blazor"
@{
Layout = "_Layout";
}
<app>
<base href="~/" />
@(await Html.RenderComponentAsync<App>(RenderMode.Server))
</app>
サンプルコード
@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
int currentCount = 0;
void IncrementCount()
{
currentCount++;
}
}
上記をRazorPage内の部分ビューとして表示させたい場合は.cshtmlファイルに下記コードを埋め込んでください。
<component>@(await Html.RenderComponentAsync<Counter>(RenderMode.Server))</component>
参考文献
Combining Razor and Blazor Pages in a Single ASP.NET Core 3 Application