Blazor Basics: Build Interactive Web UIs with C# Instead of JavaScript

@* ProductCard.razor — a reusable component that displays one product *@
@* Drop it anywhere with: <ProductCard Product="someProduct" OnAddToCart="HandleAdd" /> *@

<div class="product-card">
    <h3>@Product.Name</h3>
    <p class="price">@Product.Price.ToString("C")</p>   @* 'C' formats as currency *@

    @if (Product.StockCount > 0)
    {
        <!-- Button is only rendered when stock exists -->
        <button class="btn-primary" @onclick="AddToCart">Add to Cart</button>
    }
    else
    {
        <span class="out-of-stock">Out of Stock</span>
    }
</div>

@code {
    // [Parameter] marks a public property that a parent component can set
    [Parameter]
    public required ProductModel Product { get; set; }

    // EventCallback lets the child notify the parent without tight coupling
    [Parameter]
    public EventCallback<ProductModel> OnAddToCart { get; set; }

    // This method is called when the button fires its @onclick event
    private async Task AddToCart()
    {
        // Invoke the parent's handler and pass the product as the argument
        await OnAddToCart.InvokeAsync(Product);
    }

    // Lifecycle hook — runs once after the component first renders
    protected override void OnInitialized()
    {
        // Good place for lightweight sync setup (no data fetching here)
        Console.WriteLine($"ProductCard initialized for: {Product.Name}");
    }
}

// --- ProductModel.cs (put this in your Models folder) ---
public class ProductModel
{
    public int    Id         { get; set; }
    public string Name       { get; set; } = string.Empty;
    public decimal Price     { get; set; }
    public int    StockCount { get; set; }
}

@page "/checkout"
@* This page demonstrates two-way binding, live character count, and form validation *@

<h2>Checkout</h2>

@* EditForm links the form to the C# model and handles validation lifecycle *@
<EditForm Model="order" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />   @* Reads [Required], [Range] etc. from OrderModel *@
    <ValidationSummary />          @* Displays all current validation errors *@

    <div class="form-group">
        <label>Full Name</label>
        @* @bind wires value <-> order.CustomerName two-ways *@
        <InputText @bind-Value="order.CustomerName" class="form-control" />
        <ValidationMessage For="@(() => order.CustomerName)" />
    </div>

    <div class="form-group">
        <label>Order Notes (@notesRemaining chars remaining)</label>
        @* @bind:event="oninput" updates on EVERY keystroke, not just on blur *@
        <textarea @bind="order.Notes" @bind:event="oninput"
                  class="form-control" maxlength="200"></textarea>
    </div>

    <div class="form-group">
        <label>Quantity</label>
        <InputNumber @bind-Value="order.Quantity" class="form-control" />
        <ValidationMessage For="@(() => order.Quantity)" />
    </div>

    <button type="submit" class="btn-primary">Place Order</button>
</EditForm>

@if (orderConfirmed)
{
    <p class="success">Order placed for @order.CustomerName! Qty: @order.Quantity</p>
}

@code {
    // The model the form is bound to — all fields live here
    private OrderModel order = new();
    private bool orderConfirmed = false;

    // Computed property — recalculates every render cycle automatically
    private int notesRemaining => 200 - (order.Notes?.Length ?? 0);

    // OnValidSubmit only fires when ALL DataAnnotations pass
    private async Task HandleValidSubmit()
    {
        // In a real app you'd call an API here
        await Task.Delay(500);  // Simulate a network call
        orderConfirmed = true;
    }
}

// --- OrderModel.cs ---
using System.ComponentModel.DataAnnotations;

public class OrderModel
{
    [Required(ErrorMessage = "Name is required")]
    [StringLength(100, ErrorMessage = "Name too long")]
    public string CustomerName { get; set; } = string.Empty;

    public string? Notes { get; set; }

    [Range(1, 99, ErrorMessage = "Quantity must be between 1 and 99")]
    public int Quantity { get; set; } = 1;
}

@* WeatherDashboard.razor — works identically in both Server and WASM hosting *@
@* The component code is the same; only the Program.cs setup differs *@
@page "/weather"
@inject IWeatherService WeatherService   @* Injected service — works in both models *@

<h2>Weather Dashboard</h2>

@if (isLoading)
{
    <p>Loading weather data...</p>  @* Shown during async fetch *@
}
else if (forecasts == null || !forecasts.Any())
{
    <p>No forecast data available.</p>
}
else
{
    <table class="weather-table">
        <thead>
            <tr><th>Date</th><th>Temp (°C)</th><th>Summary</th></tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td class="@GetTempCssClass(forecast.TemperatureC)">
                        @forecast.TemperatureC
                    </td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

<button @onclick="RefreshForecasts" disabled="@isLoading">
    @(isLoading ? "Refreshing..." : "Refresh")
</button>

@code {
    private List<WeatherForecast>? forecasts;
    private bool isLoading = true;

    // OnInitializedAsync is the correct hook for async data loading
    // It fires after the first render, preventing the UI from blocking
    protected override async Task OnInitializedAsync()
    {
        await LoadForecastsAsync();
    }

    private async Task RefreshForecasts()
    {
        isLoading = true;
        // StateHasChanged() is NOT needed here — Blazor tracks event handlers automatically
        await LoadForecastsAsync();
    }

    private async Task LoadForecastsAsync()
    {
        isLoading = true;
        forecasts = await WeatherService.GetForecastAsync(DateTime.Today, days: 5);
        isLoading = false;
        // For Blazor Server: the SignalR diff is sent to browser automatically after this
        // For Blazor WASM:   the WASM runtime re-renders locally after this
    }

    // Helper to apply a CSS class based on temperature value
    private string GetTempCssClass(int tempC) => tempC switch
    {
        <= 0  => "temp-freezing",
        <= 15 => "temp-cold",
        <= 25 => "temp-mild",
        _     => "temp-hot"
    };
}

// --- WeatherForecast.cs ---
public record WeatherForecast(DateOnly Date, int TemperatureC, string Summary);

@* ShoppingCartSidebar.razor *@
@* Demonstrates @inject, a scoped service, and reacting to external state changes *@

@inject ICartService CartService          @* Scoped: one instance per SignalR circuit *@
@inject NavigationManager NavManager     @* Built-in Blazor service for URL navigation *@
@implements IDisposable                  @* We subscribe to an event, so we must unsubscribe *@

<div class="cart-sidebar">
    <h4>Your Cart (@cartItemCount items)</h4>

    @foreach (var item in cartItems)
    {
        <div class="cart-item">
            <span>@item.ProductName</span>
            <span>x@item.Quantity</span>
            <button @onclick="() => RemoveItem(item.ProductId)">Remove</button>
        </div>
    }

    <p class="cart-total">Total: @cartTotal.ToString("C")</p>
    <button @onclick="GoToCheckout" class="btn-checkout">Checkout</button>
</div>

@code {
    private List<CartItem> cartItems = new();

    // Computed properties — Blazor recalculates these each render, no manual sync needed
    private int     cartItemCount => cartItems.Count;
    private decimal cartTotal     => cartItems.Sum(i => i.LineTotal);

    protected override async Task OnInitializedAsync()
    {
        // Load initial cart state from the service
        cartItems = await CartService.GetItemsAsync();

        // Subscribe to cart change events from other components (e.g., ProductCard)
        // This allows the sidebar to update when ANY component adds a product
        CartService.OnCartChanged += HandleCartChanged;
    }

    // This handler is called by the service when cart changes from OUTSIDE this component
    private async void HandleCartChanged()
    {
        cartItems = await CartService.GetItemsAsync();
        // InvokeAsync ensures StateHasChanged is called on the correct sync context
        // This is CRITICAL when the callback comes from a background thread or another component
        await InvokeAsync(StateHasChanged);
    }

    private async Task RemoveItem(int productId)
    {
        await CartService.RemoveItemAsync(productId);
        // CartService will fire OnCartChanged, which calls HandleCartChanged above
    }

    private void GoToCheckout()
    {
        NavManager.NavigateTo("/checkout");
    }

    // IDisposable — always unsubscribe from events to prevent memory leaks
    public void Dispose()
    {
        CartService.OnCartChanged -= HandleCartChanged;
    }
}

// --- ICartService.cs ---
public interface ICartService
{
    event Action OnCartChanged;
    Task<List<CartItem>> GetItemsAsync();
    Task RemoveItemAsync(int productId);
    Task AddItemAsync(ProductModel product);
}

// --- CartItem.cs ---
public record CartItem(int ProductId, string ProductName, int Quantity, decimal UnitPrice)
{
    public decimal LineTotal => Quantity * UnitPrice;
}