Blazor Bind Input

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.

The second element in the following example is a concept demonstration and isn't meant to suggest how you should bind data in Razor components.

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.

Unparsable values

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.

The following example binds the InputValue property to the element's value when the element's oninput event is triggered.

Custom binding formats

Unlike the onchange event, which fires when the element loses focus, oninput fires when the value of the text box changes.

Razor attribute binding is case sensitive:. @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

When selecting an

Creating a chain of special-case workarounds in the framework. Breaking changes to current framework behavior. The most plausible null equivalent in HTML is an empty stringvalue. The Blazor framework handles null to empty string conversions for two-way binding to a element is bound to an int type with an initial value of 123.

By default, binding applies to the element's onchange event.

If the user updates the value of the text box's entry to 123.45 and changes the focus, the element's value is reverted to 123 when onchange fires. When the value 123.45 is rejected in favor of the original value of 123, the user understands that their value wasn't accepted. For the oninput event (@bind:event="oninput"), a value reversion occurs after any keystroke that introduces an unparsable value. When targeting the oninput event with an int-bound type, a user is prevented from typing a dot (.) character.

Binding with component parameters

A dot (.) character is immediately removed, so the user receives immediate feedback that only whole numbers are permitted. There are scenarios where reverting the value on the oninput event isn't ideal, such as when the user should be allowed to clear an unparsable value.

Alternatives include:. Don't use the oninput event.

Use the default onchange event, where an invalid value isn't reverted until the element loses focus. Bind to a nullable type, such as int? or string and provide custom get and set accessor logic to handle invalid entries. Use a form validation component, such as InputNumber or InputDate.

Form validation components provide built-in support to manage invalid inputs. Form validation components:Permit the user to provide invalid input and receive validation errors on the associated EditContext.Display validation errors in the UI without interfering with the user entering additional webform data. Permit the user to provide invalid input and receive validation errors on the associated EditContext. Display validation errors in the UI without interfering with the user entering additional webform data.

Data binding works with a single DateTime format string using @bind:format="{FORMAT STRING}", where the {FORMAT STRING} placeholder is the format string. Other format expressions, such as currency or number formats, aren't available at this time but might be added in a future release.

How it works

In the preceding code, the element's field type (type attribute) defaults to text. Nullable System.DateTime and System.DateTimeOffset are supported:. Specifying a format for the date field type isn't recommended because Blazor has built-in support to format dates.

In spite of the recommendation, only use the yyyy-MM-dd date format for binding to function correctly if a format is supplied with the date field type:.

C# get and set accessors can be used to create custom binding format behavior, as the following DecimalBinding component demonstrates.

The component binds a positive or negative decimal with up to three decimal places to an element by way of a string property (DecimalValue).

A common scenario is binding a property of a child component to a property in its parent component. This scenario is called a chained bind because multiple levels of binding occur simultaneously.

Component parameters permit binding properties of a parent component with @bind-{PROPERTY} syntax, where the {PROPERTY} placeholder is the property to bind. You can't implement chained binds with @bind syntax in the child component.

Bind across more than two components

An event handler and value must be specified separately to support updating the property in the parent from the child component. The parent component still leverages the @bind syntax to set up the databinding with the child component.

The following ChildBind component has a Year component parameter and an EventCallback.

By convention, the EventCallback for the parameter must be named as the component parameter name with a "Changed" suffix.

The naming syntax is {PARAMETER NAME}Changed, where the {PARAMETER NAME} placeholder is the parameter name. In the following example, the EventCallback is named YearChanged. EventCallback.InvokeAsync invokes the delegate associated with the binding with the provided argument and dispatches an event notification for the changed property.

For more information on events and EventCallback, see the EventCallback section of the ASP.NET Core Blazor event handling article. In the following Parent component, the year field is bound to the Year parameter of the child component.

The Year parameter is bindable because it has a companion YearChanged event that matches the type of the Year parameter.