Ludo Programming

Pe măsură ce aplicația ta Blazor crește, componentele vor trebui să colaboreze. Comunicarea între ele se poate face în mai multe moduri, iar Blazor ne pune la dispoziție instrumente simple și eficiente pentru acest scop:

✅ 1. EventCallback – comunicare de jos în sus

Folosit pentru a transmite evenimente de la o componentă copil către părintele ei.

👇 Ex: Buton într-o componentă copil care adaugă un element

AddItemForm.razor:

<input @bind="ItemName" placeholder="Nume element" />
<button @onclick="Trimite">Adaugă</button>

@code {
    private string ItemName;

    [Parameter]
    public EventCallback<string> OnItemAdded { get; set; }

    private async Task Trimite()
    {
        if (!string.IsNullOrWhiteSpace(ItemName))
        {
            await OnItemAdded.InvokeAsync(ItemName);
            ItemName = "";
        }
    }
}

ParentComponent.razor:

<AddItemForm OnItemAdded="AdaugaElement" />
<ul>
    @foreach (var item in Elemente)
    {
        <li>@item</li>
    }
</ul>

@code {
    private List<string> Elemente = new();

    private void AdaugaElement(string nou)
    {
        Elemente.Add(nou);
    }
}

✅ 2. [CascadingParameter] – comunicare de sus în jos pentru valori globale

Ideal pentru furnizarea unor date comune (de ex. tema, cultură, autentificare etc.) mai multor componente.

App.razor:

<CascadingValue Value="MesajGlobal">
    <MainLayout />
</CascadingValue>

@code {
    private string MesajGlobal = "Salut din context global!";
}

Orice componentă copil poate primi această valoare:

@code {
    [CascadingParameter]
    public string MesajGlobal { get; set; }
}

🧠 Concluzie

Comunicarea între componente este esențială în orice aplicație modernă. EventCallback îți permite să reacționezi la evenimente, iar CascadingParameter facilitează partajarea valorilor globale fără o structură rigidă. În următoarea săptămână vom discuta despre Forms și Validare în Blazor.