今回、_Imports.razor ファイルを利用しないため、@usingの記述があります。通常は、_Imports.razor ファイルを用意します。
詳しくはこちらの記事を参照してください。
ASP.NET Blazor アプリケーションにルーティングを追加して、Blazorコンポーネントを表示できるようにします。
こちらの記事を参照して、Blazorアプリケーションのひな型を作成します。
こちらの記事では、フォールバックページを "index.chtml" として作成しましたが、
Blazorアプリケーションでは、"_Host.cshtml" とするのが一般的です。_Host.cshtmlファイルを作成します。
Program.csファイルの MapFallbackToPage() の引数も "/_Host" に変更します。
_Host.cshtml を記述します。
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 ファイルを追加します。追加した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>
アプリケーションの画面となる、Razorコンポーネントを追加します。
ソリューションエクスプローラーで右クリックし、[新しい項目の追加]を選択し"Pages"フォルダ内にIndex.razor ファイルを追加します。
Index.razorファイルにコードを記述します。
@page がルーティングの設定です。"/Index"を指定していますので、(アプリケーションルートのURL)/Index のURLにアクセスすると、
Index.razor の画面が表示される動作になります。
ページはHTMLで記述します。今回の例では、h3タグで、「Hello Blazor App World」の文字列をページに表示します。
@page "/Index"
<h3>Hello Blazor App World!</h3>
@code {
}
プロジェクトを実行します。
Webブラウザが起動してアプリケーションルートのページが表示されます。アプリケーションルートのURLをルーティングする画面はないため、
下図の"Sorry, there's nothing at this address." が画面に表示されます。
(アプリケーションルート)/Index に変更します。Index.razor に設定したルーティングのページなので、Index.razorのコンテンツが表示されます。
画面にh3タグで、"Hello Blazor App World!" の文字列が表示されます。
ページのrazorコンポーネントにボタンを配置してクリックイベントを実装します。手順やコードはこちらの記事を参照してください。
こちらの記事を参照して、ASP.NET Core アプリケーションのプロジェクトを作成します。
プロジェクトが作成できたら、Pagesフォルダを追加します。
Blazorアプリケーションをホストするホストページ(フォールバックページ)を追加します。Blazorアプリケーションが動作する基のページになります。
ソリューションエクスローラーのPagesフォルダで右クリックします。ポップアップメニューの[追加]の[新しい項目]をクリックします。
[新しい項目の追加]ダイアログボックスが表示されます。中央のエリアのファイルの種類の一覧から[Razorページ]をクリックして選択します。
ダイアログ下部の[名前]テキストボックスに "_Host.cshtml" と入力します。名前は任意の名前でよいのですが、Blazorアプリケーションの場合はホストページは "_Host" という名前にするのが一般的な命名方法です。設定後ウィンドウ右下の[追加]ボタンをクリックします。
"_Host.cshtml" ファイルが追加されました。
続いて、Razorコンポーネントへのルーティングをするルーティングコンポーネントを作成します。
ソリューションエクスプローラーのプロジェクトのノードの位置で右クリックします。ポップアップメニューが表示されますので、[追加]の[新しい項目の追加]をクリックします。
[新しい項目の追加]ダイアログが表示されますので、中央のファイルの一覧の[Razor コンポーネント]の項目をクリックして選択します。
ダイアログ下部の[名前]テキストボックスに "App.razor" と入力します。この名前は固定ですので必ず App.razorの名称にします。また、Razorコンポーネントの先頭は大文字である必要があるため "app.razor" ではなく、先頭を大文字にして "App.razor" にします。
ソリューションエクスプローラに"App.razor" ファイルが追加できました。
App.razorファイルを下記に変更します。Razorコンポーネントのルーティング設定を記述します。
@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>
Blazorアプリケーションの画面となるRazorコンポーネントを追加します。
ソリューションエクスローラーのPagesフォルダで右クリックします。ポップアップメニューの[追加]の[新しい項目]をクリックします。
[新しい項目の追加]ダイアログが表示されますので、中央のファイルの一覧の[Razor コンポーネント]の項目をクリックして選択します。
ダイアログ下部の[名前]テキストボックスに "Index.razor" と入力します。この名前は任意のものでよいですが、今回は Index.razorとしました。Razorコンポーネントの先頭は大文字である必要があるため "index.razor" ではなく、先頭を大文字にして "Index.razor" にします。
Pagesディレクトリ内に Index.razor ファイルが作成されました。
コードを記述します。
Blazorアプリケーションの設定に変更します。詳しくはこちらの記事を参照してください。
MapFallbackToPage メソッドで指定するフォールバックページは先に追加した "_Host" ページに設定します。
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");
});
}
}
}
ホストページにBlazorコンポーネントを描画する記述を追記します。@namespace でアプリケーションのネームスペースを設定することで、ルーティングコンポーネントの App.razor を参照できるようになります。
@(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>
Blazorアプリケーションの画面を編集します。
<h3>Index</h3>
@code {
}
文字列を編集します。また page ディレクティブを追加します。
@page "/Index"
<h3>Hello Blazor App World!</h3>
@code {
}
プロジェクトを実行します。Webブラウザが起動し下図の画面が表示されます。画面が見つからない旨のメッセージが表示されます。このメッセージはApp.razorのルーティングコンポーネントに記述した文字列が表示されていることがわかります。
続いて、URLの末尾に "Index" を追加します。下図の画面が表示されます。"Hello Blazor App World!" の文字列が画面に表示されます。ルーティングが実行されて Index.razor のコンポーネントが画面に表示できたことが確認できます。
以上の手順でルーティング処理により、ページのrazorコンポーネントがWebブラウザで表示できるようになりました。
ページのrazorコンポーネントにボタンを配置してクリックイベントを実装します。手順やコードはこちらの記事を参照してください。
