Data binding in blazor

One way binding

In one-way binding, we need to pass property or variable name along with @ i.e. @Title (Title is either property or variable).

Counter.razor.cs

public class CounterBase : ComponentBase
{
	protected int Count { get; set; }
	
	protected EmployeeModel Employee { get; set; }

	// ... ... ...
}

Counter.razor

@page "/counter"
@inherits CounterBase

<p>Current count: @Count</p>

<p>First Name: @Employee.FirstName</p>

Two way binding

Counter.razor.cs

public class CounterBase : ComponentBase
{
	protected int Count { get; set; }

	// ... ... ...
}

Counter.razor

@page "/counter"
@inherits CounterBase

<input @bind="@Count" />
<input @bind="Count" />

Notes:

Component parameter

One Way Binding Between Components

ParentComponent.razor.cs

public class ParentComponent : ComponentBase
{

	protected int Name { get; set; } = "Foo1";

	// ... ... ...
}

ParentComponent.razor


<h1>Parent name: @Name</h1>

<ChildComponent ParentName="@Name" />  <!-- Razor expression -->
<ChildComponent ParentName="Name" />   <!-- Property -->

ChildComponent.razor.cs

public class ChildComponent : ComponentBase
{
    [Parameter]
    protected int ParentName { get; set; }

    // ... ... ...
}

ChildComponent.razor

<h1>Parent name in child: @ParentName</h1>

Two Way Binding Between Components

ParentComponent.razor.cs

public class ParentComponent : ComponentBase
{

    protected int Name { get; set; } = "Foo1";
	
    protected void UpdateName()
    {
        Name = "Foo2";
    }
	
	// ... ... ...
}

ParentComponent.razor


<h1>Parent name: @Name</h1>

<button @onclick="UpdateName">Update Name</button>

<ChildComponent @bind-ParentName="@Name" />

ChildComponent.razor.cs

public class ChildComponent : ComponentBase
{
    [Parameter]
    protected int ParentName { get; set; }
    [Parameter]
    public EventCallback<string> ParentNameChanged { get; set; }
	
    protected void UpdateParentName() {
        ParentName = "Foo3"
        ParentNameChanged.InvokeAsync(ParentName);
    }

    // ... ... ...
}

ChildComponent.razor

<h1>Parent name in child: @ParentName</h1>

<button @onclick="UpdateParentName">Update Parent Name</button>

Explanations: