Ludo Programming

In acest articol exploram doua concepte fundamentale in dezvoltarea cu Blazor: data binding-ul si evenimentele. Acestea permit actualizarea dinamica a interfetei in functie de actiunile utilizatorului – fara JavaScript!

🔄 Ce este data binding-ul in Blazor?

Data binding-ul leaga valorile dintre elementele UI si logica aplicatiei. Blazor ofera suport bidirectional (@bind) si un mod elegant de a gestiona interactiuni prin evenimente ca @onclick sau @onchange.

✅ @bind

@bind permite legatura directă între o variabilă și un element HTML.

<input @bind="nume" placeholder="Introdu numele" />

<p>Numele introdus: @nume</p>

@code {
    private string nume = "";
}

🖱️ @onclick

Permite apelarea unei metode cand un utilizator face clic pe un element.

<button @onclick="AfiseazaSalut">Salută</button>

@code {
    void AfiseazaSalut()
    {
        Console.WriteLine("Salut!");
    }
}

✏️ @onchange

Se declanseaza cand se modifica valoarea unui input (de exemplu, un dropdown).

<select @onchange="OnSelectat">
    <option>Red</option>
    <option>Green</option>
    <option>Blue</option>
</select>

@code {
    private void OnSelectat(ChangeEventArgs e)
    {
        var culoare = e.Value?.ToString();
        Console.WriteLine($"Culoare selectată: {culoare}");
    }
}

🧪 Exemplu practic: mini-formular + lista cu adaugare

<h3>Adaugă un task</h3>

<input @bind="taskNou" placeholder="Scrie un task..." />
<button @onclick="AdaugaTask">Adaugă</button>

<ul>
    @foreach (var task in taskuri)
    {
        <li>@task</li>
    }
</ul>

@code {
    private string taskNou = "";
    private List<string> taskuri = new();

    void AdaugaTask()
    {
        if (!string.IsNullOrWhiteSpace(taskNou))
        {
            taskuri.Add(taskNou);
            taskNou = "";
        }
    }
}

🔁 Fiecare data cand utilizatorul adauga un task, lista este actualizata in timp real.

🏁 Concluzie

Blazor iti permite sa construiesti UI-uri interactive si moderne doar cu C#. Cu @bind si @onclick, poti crea aplicatii dinamice fara JavaScript. In urmatorul articol, vom explora Componentizarea si transmiterea de date intre componente – esential pentru aplicatii complexe.