Azure Static Web Appsを試してみる（Blazor WebAssembly + ASP.NET Core Web API）

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.MapGet("/", async context =>
{
    await context.Response.WriteAsync("Hit the /albums endpoint to retrieve a list of albums!");
});

app.MapGet("api/albums", () =>
{
    return Album.GetAll();
})
.WithName("GetAlbums");

app.Run();

record Album(int Id, string Title, string Artist, double Price, string Image_url)
{
    public static List<Album> GetAll()
    {
        var albums = new List<Album>(){
            new Album(1, "You, Me and an App Id", "Daprize", 10.99, "https://aka.ms/albums-daprlogo"),
            new Album(2, "Seven Revision Army", "The Blue-Green Stripes", 13.99, "https://aka.ms/albums-containerappslogo"),
            new Album(3, "Scale It Up", "KEDA Club", 13.99, "https://aka.ms/albums-kedalogo"),
            new Album(4, "Lost in Translation", "MegaDNS", 12.99,"https://aka.ms/albums-envoylogo"),
            new Album(5, "Lock Down Your Love", "V is for VNET", 12.99, "https://aka.ms/albums-vnetlogo"),
            new Album(6, "Sweet Container O' Mine", "Guns N Probeses", 14.99, "https://aka.ms/albums-containerappslogo")
         };

        return albums;
    }
}

namespace BlazorWasmApp1.Data
{
    public class Album
    {
        public int Id { get; set; }

        public string? Title { get; set; }

        public string? Artist { get; set; }

        public double Price { get; set; }

        public string? Image_url { get; set; }

    }
}

@page "/call-web-api"
@using BlazorWasmApp1.Data
@inject HttpClient Http

<PageTitle>Call Web API</PageTitle>

<h1>Albums</h1>

@if (albums == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>番号</th>
                <th>タイトル</th>
                <th>アーティスト</th>
                <th>価格</th>
                <th>URL</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var album in albums)
            {
                <tr>
                    <td>@album.Id</td>
                    <td>@album.Title</td>
                    <td>@album.Artist</td>
                    <td>@album.Price</td>
                    <td>@album.Image_url</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private IEnumerable<Album>? albums = Array.Empty<Album>();
    private const string ServiceEndpoint = "/api/albums";

    protected override async Task OnInitializedAsync() => await GetAlbums();
      
    private async Task GetAlbums()
    {
        albums = await Http.GetFromJsonAsync<Album[]>(ServiceEndpoint);
    }
}

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">BlazorWasmApp1</a>
        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="call-web-api">
                <span class="oi oi-code" aria-hidden="true"></span> Call Web API
            </NavLink>
        </div>
    </nav>
</div>

@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}