今回、_Imports.razor ファイルを利用しないため、@usingの記述があります。通常は、_Imports.razor ファイルを用意します。
詳しくはこちらの記事を参照してください。
MapFallbackToPage() の引数も "/_Host" に変更します。Html.RenderComponentAsync<App> のコードにより、後ほど作成する App.razor ファイルのコンテンツをフォールバックページに表示する動作になります。@namespace の SimpleBlazorApp部分はプロジェクトのネームスペースの名称になります。作成したプロジェクト名ごとに異なりますので注意してください。@page
@namespace SimpleBlazorApp.Pages
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
</body>
</html>
MapFallbackToPage() メソッドの引数の値を "/_Host" にしています。var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
var app = builder.Build();
app.UseStaticFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
});
app.Run();
App.razor ファイルを追加します。
NotFound タグ部分の
"Sorry, there's nothing at this address." をページに表示する動作になります。@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
<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>
Index.razor ファイルを追加します。
@page がルーティングの設定です。"/Index"を指定していますので、(アプリケーションルートのURL)/Index のURLにアクセスすると、
Index.razor の画面が表示される動作になります。@page "/Index"
<h3>Hello Blazor App World!</h3>
@code {
}
(アプリケーションルート)/Index に変更します。Index.razor に設定したルーティングのページなので、Index.razorのコンテンツが表示されます。
画面にh3タグで、"Hello Blazor App World!" の文字列が表示されます。
@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
<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 SimpleBlazorApp
{
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.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
});
}
}
}
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered)) の処理がRazorコンポーネントのルーティングとレンダリングの処理になります。@page
@namespace SimpleBlazorApp.Pages
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
</body>
</html>
<h3>Index</h3>
@code {
}
@page "/Index"
<h3>Hello Blazor App World!</h3>
@code {
}
