Chandradev's Blog

There are two type of data binding in asp.net core blazor

1. One way data binding
2. Two way data binding

One way data binding

In this approach data communication will happen in one way. In blazor case data will be bind from the component class to the component view.

Example of one way data binding

@page "/oneway"
<h3>One way Data binding Example</h3> <br />

 Message: @msg 

@functions {
    string msg = "This is one ways data binding message.";
}

Two way data binding

In this approach data can pass in both ways. We can use this type of data binding on text-box to label or text-box depending on our requirement.

Example of Two way data binding

@page "/twoWay"
<h3>Two-way Data Binding Example</h3>

    Enter your name:
<input @bind=@Name   @bind:event="oninput" />
<br />
<br />
    Is it intresting to Learn Blazor ?
<input type="checkbox" @bind="IsTry" />
<br />
<br />
<br />

<p><b>Summary</b></p>
    You have entered:@Name
    <br />
    Your Answer: @(IsTry ? "Yes" : "No")

    @functions {
        public string Name { get; set; }
        public bool IsTry { get; set; }
    }  

Summary
In this small post we saw the example of data-binding in Blazor.