Call an ASP.NET Minimal API from a Blazor WebAssembly App

ApiApp_Program.cs

// Change this to your project namespace
using Sample.Shared;

var CorsPolicyName = "MyCorsApiPolicy";

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddCors(options =>
{
    options.AddPolicy(name: CorsPolicyName, policy =>
    {
        policy.AllowAnyMethod();
        policy.AllowAnyOrigin();
        policy.AllowAnyHeader();
    });
});

var app = builder.Build();
app.UseCors(CorsPolicyName);
app.MapGet("/config/{id}", GetHandler);
app.MapPost("/config", PutHandler);
app.Run();

IResult GetHandler(int id)
{
    // TODO: Get configuration from database
    var configuration = new Configuration
    {
        ConnectionString = "default value one",
        DatabaseType = "default value two"
    };
    System.Diagnostics.Debugger.Break();
    return Results.Ok(configuration);
}

IResult PutHandler(Configuration configuration) 
{
    // TODO: Save configuration to database
    System.Diagnostics.Debugger.Break();
    return Results.Ok();
}

BlazorApp_Index.razor

@page "/"
@using Sample.Shared
@using Microsoft.Fast.Components.FluentUI

<h1 style="color:red;">@Message</h1>

<h4>Connection String</h4>
<FluentTextField @bind-Value=Model.ConnectionString></FluentTextField>

<h4>Database Type</h4>
<FluentTextField @bind-Value=Model.DatabaseType></FluentTextField>

<p>
    <FluentButton @onclick="LoadAsync">Load</FluentButton>
    <FluentButton @onclick="SaveAsync">Save</FluentButton>
</p>

@code {
    [Inject]
    public HttpClient Http { get; set; } = default!;

    public readonly string Url = "https://localhost:7266/config";

    public Configuration Model { get; set; } = new();

    public string Message { get; set; } = string.Empty;

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

    public async Task LoadAsync()
    {
        try
        {
            var model = await Http.GetFromJsonAsync<Configuration>(Url + "/123");
            Model = model ?? throw new NullReferenceException("Result is null");
        }
        catch (Exception ex)
        {
            Message = ex.Message;
            System.Diagnostics.Debugger.Break();
        }
    }

    public async Task SaveAsync()
    {
        try
        {
            await Http.PostAsJsonAsync(Url, Model);
        }
        catch (Exception ex)
        {
            Message = ex.Message;
            System.Diagnostics.Debugger.Break();
        }
    }
}

BlazorApp_Program.cs

// NuGet: Microsoft.Fast.Components.FluentUI

// change this to your project namespace
using Sample.UI;

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Fast.Components.FluentUI;

var builder = WebAssemblyHostBuilder.CreateDefault(args);

builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services.AddFluentUIComponents();

await builder. Build().RunAsync();

Shared_Configuration.cs

using System.Text.Json.Serialization;

// Change this to your project namespace
namespace Sample.Shared
{
    public class Configuration
    {
        [JsonPropertyName("connectionString")]
        public string ConnectionString { get; set; } = default!;

        [JsonPropertyName("databaseType")]
        public string DatabaseType { get; set; } = default!;
    }
}

This is all you need. Three projects:

• Sample.BlazorApp (references Shared) Blazor WebAssembly App Empty Project / .NET 7.0
• Sample.ApiApp (references Shared) ASP.NET Core Empty Project / .NET 8.0
• Sample.Shared Class Library Project / .NET 7.0