+ Current value: @currentValue +
+ ++ Current value: @CurrentValue +
@code { + private string currentValue; + private string CurrentValue { get; set; } } ``` -When the text box loses focus, the property's value is updated. +When one of the elements looses 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 property's value. Since components render themselves after event handler code executes, property updates are *usually* reflected in the UI immediately after an event handler is triggered. +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. Using [`@bind`](xref:mvc/views/razor#bind) with the `CurrentValue` property (``) is essentially equivalent to the following: @@ -35,13 +43,13 @@ Using [`@bind`](xref:mvc/views/razor#bind) with the `CurrentValue` property (` - + @code { private string CurrentValue { get; set; } } ``` -When the component is rendered, the `value` of the input element comes from the `CurrentValue` property. When the user types in the text box and changes element focus, the `onchange` event is fired and the `CurrentValue` property is set to the changed value. In reality, the code generation is more complex because [`@bind`](xref:mvc/views/razor#bind) handles cases where type conversions are performed. In principle, [`@bind`](xref:mvc/views/razor#bind) associates the current value of an expression with a `value` attribute and handles changes using the registered handler. +When the component is rendered, the `value` of the input element comes from the `CurrentValue` property. When the user types in the text box and changes element focus, the `onchange` event is fired and the `CurrentValue` property is set to the changed value. In reality, the code generation is more complex than that because [`@bind`](xref:mvc/views/razor#bind) handles cases where type conversions are performed. In principle, [`@bind`](xref:mvc/views/razor#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 events by also including an `@bind:event` attribute with an `event` parameter. The following example binds the `CurrentValue` property on the `oninput` event: @@ -55,11 +63,15 @@ Bind a property or field on other events by also including an `@bind:event` attr Unlike `onchange`, which fires when the element loses focus, `oninput` fires when the value of the text box changes. -Use `@bind-{ATTRIBUTE}` with `@bind-{ATTRIBUTE}:event` syntax to bind element attributes other than `value`. In the following example, the paragraph's style is updated when the `paragraphStyle` value changes: +Use `@bind-{ATTRIBUTE}` with `@bind-{ATTRIBUTE}:event` syntax to bind element attributes other than `value`. In the following example: -```razor -@page "/binding-example" +* The paragraph's style is **red** when the component loads (`style="color:red"`). +* The user changes the value of the text box to reflect a different CSS color style and changes the page's element focus. For example, the user changes the text box value to `color:blue` and presses the Tab key on the keyboard. +* When the element focus changes: + * The value of `paragraphStyle` is assigned from the `` element's value. + * The paragraph style is updated to reflect the new style in `paragraphStyle`. If the style is updated to `color:blue`, the text color changes to **blue**. +```razor@@ -87,13 +99,13 @@ Consider the following scenario: * An `` element is bound to an `int` type with an initial value of `123`: ```razor - + @code { - [Parameter] - public int MyProperty { get; set; } = 123; + private int inputValue = 123; } ``` + * The user updates the value of the element to `123.45` in the page and changes the element focus. In the preceding scenario, the element's value is reverted to `123`. When the value `123.45` is rejected in favor of the original value of `123`, the user understands that their value wasn't accepted. @@ -101,8 +113,8 @@ In the preceding scenario, the element's value is reverted to `123`. When the va By default, binding applies to the element's `onchange` event (`@bind="{PROPERTY OR FIELD}"`). Use `@bind="{PROPERTY OR FIELD}" @bind:event={EVENT}` to trigger binding on a different event. For the `oninput` event (`@bind:event="oninput"`), the 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 `.` character. A `.` 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 (only specify `@bind="{PROPERTY OR FIELD}"`), 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 logic to handle invalid entries. -* Use a [form validation component](xref:blazor/forms-validation), such as
Year: @Year
+Child Year: @Year
+ +
+ParentYear: @ParentYear
+Parent year: @year
ParentYear: 1978
- -Year: 1978
-``` - -If the value of the `ParentYear` property is changed by selecting the button in the `ParentComponent`, the `Year` property of the `ChildComponent` is updated. The new value of `Year` is rendered in the UI when the `ParentComponent` is rerendered: - -```html -ParentYear: 1986
- -Year: 1986
-``` - The `Year` parameter is bindable because it has a companion `YearChanged` event that matches the type of the `Year` parameter. -By convention, `Expanded = @Expanded)Expanded = @Expanded)@ChildContent
}expanded = @expanded)expanded = @expanded)@ChildContent
}