Blazor

C# で Web が書けちゃうフレームワーク
すっごーい！

Blazor MAUI（.NET MAUIBlazor Hybrid）

Blazor 使ってWindowsアプリもLinux対応もiOSもAndroidもなんでも作れちゃうフレームワーク
すっごーい！

まういについてのスクラップ↓

あざらし

NavigateTo

Blazor のページ遷移の機能
たとえば React だと、

react-router-dom 使って
AppRouter にURLを指定して
useNavigate 宣言して
遷移先を指定する

みたいな工程を踏むと思うんですが、
Blazor は端的に言えば「3」「4」だけで済む。すごいね

NavigationManager 宣言して

[Inject]
protected NavigationManager NavManager { get; set; }

遷移先を指定する

NavManager.NavigateTo("hogehoge");

簡単だね
詳しくは公式を読んでね

あざらし

An unhandled error has occurred.

原因

私がハマった原因's

データが正しく取得できていないまま画面遷移した
@pageに書かれたURL指定がおかしい

データが正しく取得できていないまま画面遷移した

◆今回の処理の流れ

ページ①と②があった
通常処理はページ①のOnInitialized()でデータを取得して表示する
今回のエラーはページ①のOnInitialized()でデータを取得せず、ページ②にNavigateToで遷移したかった

◆原因
NavigateTo は元の画面を描画してから次の画面へ遷移する
→ページ①を描画完了後、ページ②へ飛ぶ手筈
→今回はデータを取得せず（new しないまま）ページ②へ遷移しようとした
→ページ①のデータがないので怒られた

◆対策
NavigateToの前に画面描画に使う変数はちゃんと new なりして初期化する！！

@page に書かれたURL指定がおかしい

◆今回の

NavigateTo 時にパラメータを設定して画面遷移したかった
数値の hoge1 と文字列の hoge2 を渡したい
そのため、下記のように @page を設定した

@page "/hogehoge/{hoge1:int}/{hoge2:string}"

そしたら初回画面の前に An unhandled error has occurred. で怒られた

◆原因
文字列をパラメータで渡すときは :string は不要
{hoge2}だけでOK
int は必要だよ！

あざらし

VSCode でホットリロード

コマンドでできる。すげー

dotnet watch

再起動が必要な場合は下記のように聞かれるので、該当する文字を入れればおｋ

あざらし

せっしょん（わすれちゃう・・・）

あざらし

AntDesign使う

UIこんぽーねんとだよ！

いんすこ、基本公式を見ればOKだけどちょっと違う部分があったので記事も参考にする

具体的には

Add dependency registration in Startup.cs.

public void ConfigureServices(IServiceCollection services)
{
  ...
  services.AddAntDesign();
}

この部分を下記に読み替える

Program.cs

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddAntDesign();        // これを入れる

他の工程は同じ。