Blazor Onchange

Posted on  by admin
Razor components provide data binding features with the @bind Razor directive attribute with a field, property, or Razor expression value.

The following example binds:. An element value to the C# inputValue field. A second element value to the C# InputValue property. When an element loses focus, its bound field or property is updated. The text box is updated in the UI only when the component is rendered, not in response to changing the field's or property's value.

Since components render themselves after event handler code executes, field and property updates are usually reflected in the UI immediately after an event handler is triggered.

As a demonstration of how data binding composes in HTML, the following example binds the InputValue property to the second element's value and onchange attributes.

Neville Nazerane
6,185
3

When the BindTheory component is rendered, the value of the HTML demonstration element comes from the InputValue property.

When the user enters a value in the text box and changes element focus, the onchange event is fired and the InputValue property is set to the changed value.

In reality, code execution is more complex because @bind handles cases where type conversions are performed. In general, @bind associates the current value of an expression with a value attribute and handles changes using the registered handler.

Bind a property or field on other Document Object Model (DOM) events by including an @bind:event="{EVENT}" attribute with a DOM event for the {EVENT} placeholder.

Saeb AminiSaeb Amini
21k1
Razor attribute binding is case sensitive:.
3

@bind and @bind:event are valid. @Bind/@Bind:Event (capital letters B and E) or @BIND/@BIND:EVENT (all capital letters) are invalid. Binding supports multiple option selection with elements. The @onchange event provides an array of the selected elements via event arguments (ChangeEventArgs). The value must be bound to an array type. For information on how empty strings and null values are handled in data binding, see the Binding element option value as a C# object null value, because:.

HTML attributes can't have null values. The closest equivalent to null in HTML is absence of the HTML value attribute from the

Antonio Correia
1,005