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;
}