Blazor から Laravel の Web API 呼び出しの組み合わせ（商品一覧）

  /categories/{id}:
    get:
      tags:
        - categories
      summary: カテゴリ詳細取得
      description: 指定されたIDのカテゴリ情報を取得
      parameters:
        - $ref: '#/components/parameters/IdPath'
      responses:
        '200':
          description: 成功
          content:
            application/json:
              schema:
                type: object
                properties:
                  data:
                    $ref: '#/components/schemas/Category'
        '404':
          $ref: '#/components/responses/NotFound'

{
    "data": {
        "id": 6,
        "name": "サイドメニュー",
        "description": "寿司と一緒に楽しめるサイドメニューです。",
        "created_at": "2026-05-15T03:00:01.000000Z",
        "updated_at": "2026-05-15T03:00:01.000000Z",
        "products": [
            {
                "id": 19,
                "name": "茶碗蒸し",
                "price": "280.00",
                "description": "なめらかな茶碗蒸し",
                "image_url": null,
                "created_at": "2026-05-15T03:00:01.000000Z",
                "updated_at": "2026-05-15T03:00:01.000000Z",
                "pivot": {
                    "category_id": 6,
                    "product_id": 19
                }
            },
            {
                "id": 20,
                "name": "枝豆",
                "price": "180.00",
                "description": "塩ゆで枝豆",
                "image_url": null,
                "created_at": "2026-05-15T03:00:01.000000Z",
                "updated_at": "2026-05-15T03:00:01.000000Z",
                "pivot": {
                    "category_id": 6,
                    "product_id": 20
                }
            }
        ]
    }
}

@page "/products/category/{CategoryId:int}"
@rendermode InteractiveServer
@inject NavigationManager Navigation
@inject HttpClient Http
@inject IJSRuntime JSRuntime

<PageTitle>カテゴリ一覧</PageTitle>

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

    <div class="row">
        @foreach (var it in products)
        {
            <div>@it.Id : @it.Name @it.Price</div>
        }
    </div>
</div>

@code {
    [Parameter] public int CategoryId { get; set; }

    class Product 
    {
        public int Id { get; set; }
        public string Name { get; set; } = "";
        public string Description { get; set; } = "";
        public string Price { get; set; } = "";
        public string? ImageUrl { get; set; }
        public DateTime CreatedAt { get; set; }
        public DateTime UpdatedAt { get; set; }
    }
    class Category
    {
        public int Id { get; set; }
        public string Name { get; set; } = "";
        public string Description { get; set; } = "";
        public DateTime CreatedAt { get; set; }
        public DateTime UpdatedAt { get; set; }
        public Product[] Products { get; set; } = [];

    }
    class CategoryResponse {
        public Category Data { get; set; } = default!;
    }

    private List<Product> products = new() ;

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

    private async Task onSearch()
    {
        System.Text.Json.JsonSerializerOptions JsonOptions = new()
        {
            PropertyNamingPolicy = System.Text.Json.JsonNamingPolicy.SnakeCaseLower
        };

        var res = await Http.GetFromJsonAsync<CategoryResponse>($"api/categories/{CategoryId}", JsonOptions);
        if (res != null)
            products = res.Data.Products.ToList();
    }
}

<PageTitle>商品一覧</PageTitle>

<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 (products.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 products)
            {
                <div class="col">
                    <div class="card h-100 shadow-sm border-0">
                        <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="fw-bold text-danger">¥@it.Price</span>
                            <button class="btn btn-danger btn-sm" @onclick="() => AddToCart(it)">カートに追加</button>
                        </div>
                    </div>
                </div>
            }
        </div>
    }
</div>

@inject BlazorOrderApp.Services.CartService Cart

...
@code {
    ...
    private async Task AddToCart(Product product)
    {
        await Cart.AddAsync(product.Id, product.Name, product.Price);
    }
}