Blazor data binding

Data binding

Blazor Support in html Use... In elements Razor Syntax binding c# Field Property or value

Binding syntax

stay html In the label , add to @bind="xxxx" The binding can be realized

@page "/bind"
<p>
    <input @bind="inputValue"/>
</p>
<p>
    <input @bind="InputValue" @bind:event="oninput" />
</p>
<ul>
    <li><code> User entered </code>:@inputValue</li>
    <li><code> User entered </code>@InputValue</li>
</ul>
@code {
    private string? inputValue;
    public string? InputValue { get; set; }
}

The above code When the input is completed, the mouse leaves input The input box will trigger the binding event

@bind:event and @bind The difference between

• @bind Binding updates are not real-time. They are triggered only after the mouse leaves the input box
• @bind:event Data will be updated in real time

Format data

blazor Currently only supported DateTime Format string adopt @bind:format="yyyy-MM-dd"

@page "/data-binding"
<code> Specific date </code> 
<input type="date" @bind="startDate" @bind:format="yyyy-MM-dd" />

<code> The day, month and year you chose  @startDate</code>
@code {
    private DateTime  startDate = new(2020, 1, 1);
}

Binding subcomponent properties

A parent interface is often composed of multiple sub components Parent component parameters need to be bound to child components

• Subcomponent definition

<input @bind="Title"/>

@code {
  [Parameter]
  public string Title { get; set; }
    [Parameter]
  public EventCallback<string> TitleChanged { get; set; }
}

• Parent component call

@page "/bind-theory"
<Test @bind-Title="InputValue"/>
@code {
    public string InputValue { get; set; }
}