Blazor Two-way Data Binding

Blazor also supports two-way data binding by using bind attribute. Currently, Blazor supports only the following data types for two-way data binding.

• string
• int
• DateTime
• Enum
• bool

If you need other types (e.g. decimal), you need to provide getter and setter from/to a supported type.

The following example demonstrates different two-way binding scenarios.

@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 [email protected]>@EmployeeType.Employee.ToString()</option>
        <option [email protected]>@EmployeeType.Contractor.ToString()</option>
        <option [email protected]>@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;
}

You can find more information about two-way binding on Blazor Github.