C# Academy · Lezione

Modello dei componenti Blazor

Crei componenti Razor, comprenda il ciclo di vita dei componenti e usi parametri e valori a cascata.

Modello dei componenti Blazor è una lezione C# Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento C# Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso C# Academy include 4 lezioni in totale.

Che cos'è Blazor?

Blazor consente di creare interfacce web interattive usando C# invece di JavaScript. I componenti sono definiti in file .razor che combinano markup HTML e logica C#. Blazor viene eseguito sul server (Blazor Server) o nel browser tramite WebAssembly (Blazor WASM).

Il primo componente

Un componente Razor è un file .razor con markup HTML e un blocco @code per il codice C#. Il nome del componente diventa il nome del tag HTML.

@* Greeting.razor *@
<h2>Hello, @Name!</h2>
<p>You have @Count messages.</p>

@code {
    [Parameter] public string Name { get; set; } = "World";
    private int Count = 5;
}

Ciclo di vita dei componenti

I componenti Blazor hanno un ciclo di vita con hook di cui è possibile eseguire l'override. I più comuni sono OnInitializedAsync (caricamento dei dati) e OnParametersSetAsync (reazione alle modifiche dei parametri).

@code {
    private List<Product> Products = new();

    protected override async Task OnInitializedAsync()
    {
        // Called once on first render
        Products = await Http.GetFromJsonAsync<List<Product>>("/api/products")
                   ?? new();
    }

    protected override async Task OnParametersSetAsync()
    {
        // Called whenever parameters change
        await LoadDataAsync();
    }
}

Parametri: passaggio di dati ai componenti

Decori le proprietà con [Parameter] per accettare dati dai componenti padre. I parametri vengono impostati prima del rendering e possono attivare un nuovo rendering quando cambiano.

@* ProductCard.razor *@
<div class="card">
    <h4>@Product.Name</h4>
    <p>Price: @Product.Price.ToString("C")</p>
    <button @onclick="AddToCart">Add to Cart</button>
</div>

@code {
    [Parameter, EditorRequired]
    public Product Product { get; set; } = default!;

    [Parameter]
    public EventCallback<Product> OnAddToCart { get; set; }

    private async Task AddToCart() =>
        await OnAddToCart.InvokeAsync(Product);
}

Parametri a cascata

I parametri a cascata attraversano l'albero dei componenti senza doverli passare esplicitamente attraverso ogni livello intermedio: sono ideali per temi, informazioni sull'utente o stato condiviso.

@* App.razor — wraps the whole app *@
<CascadingValue Value="CurrentUser">
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="routeData" DefaultLayout="@typeof(MainLayout)" />
        </Found>
    </Router>
</CascadingValue>

@* Anywhere in the tree: *@
@code {
    [CascadingParameter]
    public UserInfo CurrentUser { get; set; } = default!;
}

Rendering di elenchi e condizioni

Utilizzi le direttive Razor @if, @foreach e @for per eseguire il rendering di contenuti dinamici. Fornisca sempre @key agli elementi degli elenchi per un diffing efficiente.

@if (Products.Count == 0)
{
    <p>No products found.</p>
}
else
{
    <ul>
        @foreach (var product in Products)
        {
            <li @key="product.Id">
                <ProductCard Product="product" OnAddToCart="HandleAdd" />
            </li>
        }
    </ul>
}

RenderFragment e ChildContent

Utilizzi RenderFragment per passare il markup come parametro, analogamente agli slot in Vue o ai children in React. Il nome convenzionale del parametro è ChildContent.

@* Panel.razor *@
<div class="panel">
    <div class="panel-header">@Title</div>
    <div class="panel-body">@ChildContent</div>
</div>

@code {
    [Parameter] public string Title { get; set; } = "";
    [Parameter] public RenderFragment? ChildContent { get; set; }
}

@* Usage: *@
<Panel Title="Order Details">
    <p>Order #42 — Shipped</p>
</Panel>

Riferimenti ai componenti con @ref

Acquisisca un riferimento a un componente figlio con @ref per chiamarne i metodi pubblici o leggerne le proprietà dal componente padre.

@* Parent.razor *@
<ConfirmDialog @ref="_dialog" OnConfirm="DeleteOrder" />
<button @onclick="() => _dialog!.Show()">Delete Order</button>

@code {
    private ConfirmDialog? _dialog;

    private async Task DeleteOrder()
    {
        await OrderService.DeleteAsync(CurrentOrderId);
        // Refresh UI...
    }
}

StateHasChanged e nuovo rendering manuale

Blazor esegue automaticamente un nuovo rendering dopo i gestori degli eventi. Per le modifiche asincrone allo stato al di fuori dei gestori degli eventi (ad esempio, provenienti da un timer in background), chiami manualmente StateHasChanged().

@implements IDisposable

<p>Time: @CurrentTime</p>

@code {
    private string CurrentTime = "";
    private Timer? _timer;

    protected override void OnInitialized()
    {
        _timer = new Timer(_ =>
        {
            CurrentTime = DateTime.Now.ToString("HH:mm:ss");
            InvokeAsync(StateHasChanged); // thread-safe re-render
        }, null, 0, 1000);
    }

    public void Dispose() => _timer?.Dispose();
}

ShouldRender per le prestazioni

Esegua l'override di ShouldRender() per evitare nuovi rendering non necessari. Restituisca false quando l'output del componente non cambia, riducendo il sovraccarico del diffing.

@code {
    private string _lastRenderedStatus = "";

    [Parameter] public string Status { get; set; } = "";

    protected override bool ShouldRender()
    {
        // Only re-render if Status actually changed
        if (Status == _lastRenderedStatus) return false;
        _lastRenderedStatus = Status;
        return true;
    }
}

Caso reale: componente per l'elenco dei prodotti

Un componente completo per l'elenco dei prodotti che carica i dati durante l'inizializzazione, gestisce lo stato di caricamento e passa gli eventi al componente padre.

@inject HttpClient Http

@if (_loading)
{
    <p>Loading products...</p>
}
else
{
    @foreach (var p in _products)
    {
        <ProductCard Product="p" OnAddToCart="AddToCart" />
    }
}

@code {
    private List<Product> _products = new();
    private bool _loading = true;

    [Parameter] public EventCallback<Product> OnCartUpdated { get; set; }

    protected override async Task OnInitializedAsync()
    {
        _products = await Http.GetFromJsonAsync<List<Product>>("/api/products")
                   ?? new();
        _loading = false;
    }

    private async Task AddToCart(Product p) => await OnCartUpdated.InvokeAsync(p);
}

Verifica rapida

Quale metodo del ciclo di vita è il punto migliore per caricare i dati da un'API quando un componente Blazor viene inizializzato?

Riepilogo: modello dei componenti Blazor

Concetti chiave:

I file .razor combinano il markup HTML con C# in un blocco @code
[Parameter] accetta dati dal componente padre; EventCallback propaga gli eventi verso l'alto
CascadingParameter propaga i dati verso il basso senza prop-drilling
RenderFragment/ChildContent crea componenti componibili basati sugli slot
OnInitializedAsync serve per il caricamento iniziale dei dati; StateHasChanged per il nuovo rendering manuale
ShouldRender() evita il diffing non necessario per migliorare le prestazioni

Domande Frequenti

La lezione «Modello dei componenti Blazor» è gratuita?

Sì — il testo completo di «Modello dei componenti Blazor» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso C# Academy, passa a CoddyKit PRO. Il corso C# Academy include 4 lezioni in totale.

Cosa imparerò in «Modello dei componenti Blazor»?

Crei componenti Razor, comprenda il ciclo di vita dei componenti e usi parametri e valori a cascata. Eserciti C# Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare C# Academy?

Non è richiesta alcuna esperienza precedente. C# Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Modello dei componenti Blazor»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione C# Academy?

Sì. Ogni lezione C# Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a C# Academy