Blazor から Laravel の Web API 呼び出しの組み合わせ

@page "/top"
@rendermode InteractiveServer
@inject NavigationManager Navigation

<PageTitle>お寿司注文システム</PageTitle>

<div class="min-vh-100 bg-light d-flex align-items-center justify-content-center p-4">
    <div class="bg-white rounded-4 shadow-lg p-5 text-center" style="max-width: 28rem; width: 100%;">
        <div class="mb-4">
            <h1 class="display-4 text-danger mb-2">🍣</h1>
            <h2 class="fs-4 fw-bold mb-2">お寿司注文システム</h2>
            <p class="text-secondary">ようこそ！ご着席ありがとうございます</p>
        </div>

        <div class="mb-4">
            <label class="form-label fw-semibold fs-5 mb-3">
                ご利用人数を選択してください
            </label>
            <div class="d-flex align-items-center justify-content-center gap-3">
                <button class="btn btn-outline-secondary btn-lg" @onclick="Decrement">
                    −
                </button>
                <div class="bg-light rounded d-flex align-items-center justify-content-center"
                     style="width: 5rem; height: 4rem;">
                    <span class="fs-2 fw-bold">@guests</span>
                </div>
                <button class="btn btn-outline-secondary btn-lg" @onclick="Increment">
                    ＋
                </button>
            </div>
            <p class="text-muted small mt-2">最大8名様まで</p>
        </div>

        <button class="btn btn-primary btn-lg w-100" @onclick="startOrder">
            注文開始
        </button>

        <div class="mt-4 small text-muted">
            <p>テーブル番号: <span class="fw-semibold">T-001</span></p>
        </div>
    </div>
</div>

@code {
    private int guests = 2;

    private void Increment()
    {
        System.Diagnostics.Debug.WriteLine("click Increment");
        if (guests < 8) guests++;
    }

    private void Decrement()
    {
        System.Diagnostics.Debug.WriteLine("click Decrement");
        if (guests > 1) guests--;
    }

    private void startOrder()
    {
        System.Diagnostics.Debug.WriteLine("click startOrder");
        Navigation.NavigateTo("/categories");
    }
}

@page "/categories"
@rendermode InteractiveServer
@inject NavigationManager Navigation
@inject HttpClient Http
@inject IJSRuntime JSRuntime

<PageTitle>カテゴリ一覧</PageTitle>
<div>
    カテゴリを表示
    
    @foreach(  var it in categories) {
        <div>
            @it.Id : @it.Name
        </div>
    }
</div>

@code {
    class Category {
        public int Id { get; set; }
        public string Name {get; set; } = "";
        public string Description { get; set; } = "";
        public int ProductsCount { get; set; }
        public DateTime CreatedAt {get; set; }
        public DateTime UpdatedAt {get; set; }
    }
    class CategoriesResponse {
        public Category[] Data { get; set; } = default! ;
    }

    private List<Category> categories = new List<Category>();
    protected override async Task OnInitializedAsync()
    {
        await onSearch();
    }

    /// <summary>
    /// 検索
    /// </summary>
    private async Task onSearch()
    {
        var res = await Http.GetFromJsonAsync<CategoriesResponse>(
            "api/categories");
        if (res == null) return;
        this.categories = res.Data.ToList();

        System.Diagnostics.Debug.WriteLine( this.categories );

        foreach( var it in this.categories  ) {
            System.Diagnostics.Debug.WriteLine( it.Name );
        }
    }
}

<div class="container py-4">
    <div class="mb-4">
        <h2 class="fw-bold text-danger">🍣 カテゴリ一覧</h2>
        <p class="text-secondary">カテゴリを選択してください</p>
    </div>

    @if (isLoading)
    {
        <div class="d-flex justify-content-center py-5">
            <div class="spinner-border text-danger" role="status">
                <span class="visually-hidden">読み込み中...</span>
            </div>
        </div>
    }
    else if (categories.Count == 0)
    {
        <div class="alert alert-warning">カテゴリが見つかりませんでした。</div>
    }
    else
    {
        <div class="row row-cols-1 row-cols-md-3 g-4">
            @foreach (var it in categories)
            {
                <div class="col">
                    <div class="card h-100 shadow-sm border-0" style="cursor: pointer;"
                         @onclick="() => SelectCategory(it)">
                        <div class="card-body">
                            <h5 class="card-title fw-bold">@it.Name</h5>
                            <p class="card-text text-secondary">@it.Description</p>
                        </div>
                        <div class="card-footer bg-white border-0 d-flex justify-content-between align-items-center">
                            <span class="badge bg-danger rounded-pill">@it.products_count 品</span>
                            <small class="text-muted">→</small>
                        </div>
                    </div>
                </div>
            }
        </div>
    }
</div>

class Category
{
    public int Id { get; set; }
    public string Name { get; set; } = "";
    public string Description { get; set; } = "";
    public int products_count { get; set; }
    public DateTime CreatedAt { get; set; }
    public DateTime UpdatedAt { get; set; }
}

class CategoriesResponse
{
    public Category[] Data { get; set; } = default!;
}

private List<Category> categories = new List<Category>();
private bool isLoading = true;

protected override async Task OnInitializedAsync()
{
    await onSearch();
}

private async Task onSearch()
{
    isLoading = true;
    var res = await Http.GetFromJsonAsync<CategoriesResponse>("api/categories");
    if (res != null)
        categories = res.Data.ToList();
    isLoading = false;
}

private void SelectCategory(Category category)
{
    System.Diagnostics.Debug.WriteLine($"Selected: {category.Name}");
    Navigation.NavigateTo($"/products/{category.Id}");
}