Data Bindings in Blazor | Blazor Tutorials

Before getting into this article, we would suggest you please read all our other Blazor articles for more and sequential information about ASP .NET Core Blazor with the links below:

1. Chapter 1: Blazor Interview Questions and Answers
2. Chapter 2: What is ASP.NET Core Blazor?
3. Chapter 3: Blazor Vs Angular
4. Chapter 4: Blazor hosting models
5. Chapter 5: Project Structure in Blazor
6. Chapter 6: What are Blazor Components
7. Chapter 7: net core razor components in details | Nesting Razor Components
8. Chapter 8: Blazor Model Classes
9. Chapter 9: Data Bindings in Blazor
10. Chapter 10: Data access technique in blazor

Data Binding

Data binding is one of the most remarkable highlights of programming advancement advances. It is the association connect among View and the business rationale of the application. In Blazor, you can tie data to the two components and DOM components utilizing the dilemma trait. In Blazor, you can tie data in the accompanying ways:

One-way Data Binding in Blazor:

In different structures, for example, Angular, one-way data binding is otherwise called interpolation. In one-way binding, we have to pass property or variable name alongside @, i.e., @Title (here Title is either the property or variable). In the accompanying model, we have done one-way binding with various factors.

@page "/one-way-data-binding"

<!-- Use this button to trigger changes in the source values -->
<button onclick="@ChangeValues">Change values</button>

<p>Counter: @Count</p>

@if (ShowWarning)
{
    <p style="background-color: red; padding: 5px">Warning!</p>
}

<p style="background-color: @Background; color=white; padding: 5px">Notification</p>

<ul>
    @foreach (var number in Numbers)
    {
        <li>@number</li>
    }
</ul>

@functions {
    private int Count { get; set; } = 0;
    private bool ShowWarning { get; set; } = true;
    private string Background { get; set; } = "red";
    private List<int> Numbers { get; set; } = new List<int> { 1, 2, 3 };

    private void ChangeValues()
    {
        Count++;
        ShowWarning = !ShowWarning;
        Background = Background == "red" ? "green" : "red";
        Numbers.Add(Numbers.Max() + 1);
    }
}

Two-way Data Binding in Blazor:

Blazor likewise bolsters two-way data binding by utilizing tie quality. As of now, Blazor underpins just the accompanying data types for two-way data binding. These are string, int,, DateTime, Enum, bool. On the off chance that you need different sorts (for example decimal), you have to give getter and setter from/to an upheld type.  The accompanying model shows diverse two-way binding situations.

@page "/two-way-data-binding"

<p>
    Enter your name: <input type="text" bind="@Name" /><br />
    What is your age? <input type="number" bind="@Age" /><br />
    What is your salery? <input type="number" bind="@Salary" /><br />

    What is your birthday (culture-invariant default format)? <input type="text" bind="@Birthday" /><br />
    What is your birthday (German date format)? <input type="text" bind="@Birthday" format-value="dd.MM.yyyy" /><br />

    Are you a manager? <input type="checkbox" bind="@IsManager" /><br />

    <select id="select-box" bind="@TypeOfEmployee">
        <option value=@EmployeeType.Employee>@EmployeeType.Employee.ToString()</option>
        <option value=@EmployeeType.Contractor>@EmployeeType.Contractor.ToString()</option>
        <option value=@EmployeeType.Intern>@EmployeeType.Intern.ToString()</option>
    </select>
</p>

<h2>Hello, @Name!</h2>

<p>You are @Age years old. You are born on the @Birthday. You are @TypeOfEmployee.</p>

@if (IsManager)
{
    <p>You are a manager!</p>
}

    <p>Your salary is $@Salary</p>

@functions {
private enum EmployeeType { Employee, Contractor, Intern };
private EmployeeType TypeOfEmployee { get; set; } = EmployeeType.Employee;

private string Name { get; set; } = "Mark";
private bool IsManager { get; set; } = true;
private static int Age { get; set; } = 26;
public DateTime Birthday { get; set; } = DateTime.Today.AddYears(-Age);

public decimal Salary { get; set; } = (decimal) 2800.5;
}

Event Binding in Blazor:

Event binding is very constrained in Blazor. Presently, just "onclick" and "onchange" are supported. You can discover more subtleties in the Blazor GitHub.

@page "/event-binding"

<h3>Event Binding</h3> <br /> <br />
<button onclick=@ButtonClicked>Event Binding Example</button>  <br /> <br />
<button onclick=@(() => Message = "Inline:Button Clicked")>Inline Event Binding</button> <br /> <br />
<p>Message: @Message</p>

@functions {
    private string Message { get; set; } = "";
    void ButtonClicked()
    {
        Message = "Button Clicked";
    }
}