Files
jdescopingtool/DOCUMENTATION/Architecture/BlazorClient.md
T
Joseph Doherty 26ff8d9b4f Initial commit: JDE Scoping Tool migration project
Set up repository with legacy .NET Framework 4.8 source (OLD/),
new .NET 10 Blazor solution (NEW/), OpenSpec specifications,
documentation, and project configuration.
2026-01-02 07:43:29 -05:00

3.0 KiB

Blazor Client

The JdeScoping.Client project is a Blazor WebAssembly application using Radzen Blazor components.

Project Structure

JdeScoping.Client/
├── Program.cs                    # WASM entry, configure HttpClient + SignalR
├── Pages/
│   ├── Login.razor               # LDAP login form
│   ├── Search.razor              # Main search criteria page
│   ├── Results.razor             # Search history + download
│   └── Admin.razor               # Data sync status (optional)
├── Components/
│   ├── SearchCriteriaForm.razor  # Complex search form
│   ├── SearchStatusCard.razor    # Real-time status display
│   └── LookupDropdown.razor      # Autocomplete wrapper
├── Services/
│   ├── SearchApiClient.cs        # HTTP calls to SearchController
│   ├── LookupApiClient.cs        # HTTP calls to LookupController
│   ├── AuthApiClient.cs          # Login/logout
│   └── StatusHubClient.cs        # SignalR connection
└── wwwroot/
    └── css/                      # Custom styles if needed

Radzen Components

Radzen Blazor replaces the legacy Kendo UI JS components. The core library is free (MIT license).

Component Usage
RadzenDataGrid Search results and history tables
RadzenDropDown Work center, operator selection
RadzenAutoComplete Item number lookup with search
RadzenDatePicker Date range selection
RadzenButton Form actions
RadzenCard Layout containers
RadzenNotification Toast messages
RadzenProgressBar Search progress indication

Program.cs Configuration

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");

// HTTP client for API calls
builder.Services.AddScoped(sp =>
    new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

// API clients
builder.Services.AddScoped<SearchApiClient>();
builder.Services.AddScoped<LookupApiClient>();
builder.Services.AddScoped<AuthApiClient>();
builder.Services.AddScoped<StatusHubClient>();

await builder.Build().RunAsync();

SignalR Client

The StatusHubClient connects on login and subscribes to status updates:

public class StatusHubClient : IAsyncDisposable
{
    private HubConnection _connection;

    public event Action<SearchStatusUpdate> OnStatusChanged;

    public async Task ConnectAsync(string baseUrl)
    {
        _connection = new HubConnectionBuilder()
            .WithUrl($"{baseUrl}/hubs/status")
            .WithAutomaticReconnect()
            .Build();

        _connection.On<SearchStatusUpdate>("StatusChanged", update =>
        {
            OnStatusChanged?.Invoke(update);
        });

        await _connection.StartAsync();
    }
}