Blazor Integration with ASP.NET Core

// Program.cs
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode();

Common follow-ups: What is the newer Interactive Auto render mode, and how does it combine both approaches?;How does Blazor share the same middleware pipeline as MVC controllers in the same app?

var app = builder.Build();

app.MapControllers();          // traditional REST API endpoints
app.MapRazorPages();            // traditional server-rendered pages
app.MapRazorComponents<App>()   // Blazor interactive components
    .AddInteractiveServerRenderMode();

Common follow-ups: What routing conflicts can arise between MVC routes and Blazor component routes?;How do you share layout/authentication state consistently across both UI paradigms?

// Registered once, used in both paradigms
builder.Services.AddScoped<IProductService, ProductService>();

// MVC controller
public class ProductsController(IProductService service) : ControllerBase { }

// Blazor component
@inject IProductService ProductService

Common follow-ups: How does Scoped lifetime differ in practical meaning between MVC requests and Blazor Server circuits?;What happens if a service assumes HTTP request-scoped behavior but is used in Blazor Server?

@page "/profile"
@attribute [Authorize]

<AuthorizeView>
    <Authorized>
        <p>Welcome, @context.User.Identity.Name</p>
    </Authorized>
    <NotAuthorized>
        <p>Please log in.</p>
    </NotAuthorized>
</AuthorizeView>

Common follow-ups: How does a custom AuthenticationStateProvider work differently for Blazor WebAssembly's token-based auth?;How do you access the current user's claims imperatively inside a component's code?

// Program.cs: configuring a Redis backplane for SignalR to support Blazor Server scaling
builder.Services.AddSignalR().AddStackExchangeRedis(builder.Configuration.GetConnectionString("Redis"));

// Load balancer configuration (conceptual): enable sticky sessions for the SignalR connection

Common follow-ups: What happens to a user's Blazor Server session if their sticky-session server instance restarts?;How does Blazor WebAssembly avoid this scaling consideration entirely?

// Program.cs (Blazor WebAssembly client project)
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

// Component
@inject HttpClient Http

@code {
    private Product[]? products;
    protected override async Task OnInitializedAsync() {
        products = await Http.GetFromJsonAsync<Product[]>("api/products");
    }
}

Common follow-ups: Why can't Blazor WebAssembly directly inject and call backend services in-process the way Blazor Server can?;How do you handle CORS if the WebAssembly app is hosted separately from its API?

<!-- Inside a traditional Razor Page (.cshtml) -->
<component type="typeof(WeatherWidget)" render-mode="ServerPrerendered" />

<!-- WeatherWidget.razor renders its initial HTML immediately,
     then becomes fully interactive after the SignalR connection establishes -->

Common follow-ups: What issues can arise if component code isn't safe to run twice (prerender phase and real render phase)?;How does this differ from the newer unified .razor-component-only hosting model in .NET 8+?

// API's Program.cs
builder.Services.AddCors(options => {
    options.AddPolicy("BlazorClient", policy =>
        policy.WithOrigins("https://blazor-app.mycompany.com").AllowAnyMethod().AllowAnyHeader());
});
app.UseCors("BlazorClient");

Common follow-ups: Does Blazor Server have the same CORS considerations as WebAssembly?;How does hosting both the API and WASM app from the same ASP.NET Core project avoid this CORS configuration entirely?

// Identical code, very different performance characteristics depending on render mode:
await JS.InvokeVoidAsync("updateChart", chartData);
// Blazor Server: network round-trip over SignalR
// Blazor WebAssembly: in-process, no network latency

Common follow-ups: How would you batch multiple JS interop calls to reduce round-trip overhead in Blazor Server?;What is Interactive Auto mode's trade-off regarding this performance difference?

// Shared/ProductDto.cs (referenced by both Blazor client and API projects)
public class ProductDto {
    [Required, StringLength(100)] public string Name { get; set; }
    [Range(0.01, 10000)] public decimal Price { get; set; }
}

<!-- Blazor component -->
<EditForm Model="product" OnValidSubmit="Submit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <InputText @bind-Value="product.Name" />
</EditForm>

Common follow-ups: Why must server-side validation still be enforced even with client-side validation in place?;How does this shared-model pattern work when Blazor Server and the API are the same project?