Blazor InputX form components (#26753)
Luke Latham
GitHub
parent
4da31236a7
commit
a8d984a7e1
|
|
@ -822,7 +822,7 @@
|
|||
},
|
||||
{
|
||||
"source_path": "aspnetcore/razor-components/forms-validation.md",
|
||||
"redirect_url": "/aspnet/core/blazor/forms-validation",
|
||||
"redirect_url": "/aspnet/core/blazor/forms-and-input-components",
|
||||
"redirect_document_id": false
|
||||
},
|
||||
{
|
||||
|
|
@ -1173,6 +1173,11 @@
|
|||
"source_path": "aspnetcore/tutorials/signalr-blazor.md",
|
||||
"redirect_url": "/aspnet/core/blazor/tutorials/signalr-blazor",
|
||||
"redirect_document_id": false
|
||||
},
|
||||
{
|
||||
"source_path": "aspnetcore/blazor/forms-validation.md",
|
||||
"redirect_url": "/aspnet/core/blazor/forms-and-input-components",
|
||||
"redirect_document_id": false
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,15 +25,15 @@ The following built-in Razor components are provided by the Blazor framework:
|
|||
* [`FocusOnNavigate`](xref:blazor/fundamentals/routing#focus-an-element-on-navigation)
|
||||
* [`HeadContent`](xref:blazor/components/control-head-content)
|
||||
* [`HeadOutlet`](xref:blazor/components/control-head-content)
|
||||
* [`InputCheckbox`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputDate`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputCheckbox`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputDate`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputFile`](xref:blazor/file-uploads)
|
||||
* [`InputNumber`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputRadio`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputRadioGroup`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputSelect`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputText`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputTextArea`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputNumber`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputRadio`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputRadioGroup`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputSelect`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputText`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputTextArea`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`LayoutView`](xref:blazor/components/layouts#apply-a-layout-to-arbitrary-content-layoutview-component)
|
||||
* [`MainLayout`](xref:blazor/components/layouts#mainlayout-component)
|
||||
* [`NavLink`](xref:blazor/fundamentals/routing#navlink-and-navmenu-components)
|
||||
|
|
@ -53,15 +53,15 @@ The following built-in Razor components are provided by ASP.NET Core:
|
|||
* [`Authentication`](xref:blazor/security/webassembly/index#authentication-component)
|
||||
* [`AuthorizeView`](xref:blazor/security/index#authorizeview-component)
|
||||
* [`CascadingValue`](xref:blazor/components/cascading-values-and-parameters#cascadingvalue-component)
|
||||
* [`InputCheckbox`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputDate`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputCheckbox`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputDate`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputFile`](xref:blazor/file-uploads)
|
||||
* [`InputNumber`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputRadio`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputRadioGroup`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputSelect`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputText`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputTextArea`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputNumber`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputRadio`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputRadioGroup`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputSelect`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputText`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputTextArea`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`LayoutView`](xref:blazor/components/layouts#apply-a-layout-to-arbitrary-content-layoutview-component)
|
||||
* [`MainLayout`](xref:blazor/components/layouts#mainlayout-component)
|
||||
* [`NavLink`](xref:blazor/fundamentals/routing#navlink-and-navmenu-components)
|
||||
|
|
@ -80,14 +80,14 @@ The following built-in Razor components are provided by the Blazor framework:
|
|||
* [`Authentication`](xref:blazor/security/webassembly/index#authentication-component)
|
||||
* [`AuthorizeView`](xref:blazor/security/index#authorizeview-component)
|
||||
* [`CascadingValue`](xref:blazor/components/cascading-values-and-parameters#cascadingvalue-component)
|
||||
* [`InputCheckbox`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputDate`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputNumber`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputRadio`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputRadioGroup`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputSelect`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputText`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputTextArea`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputCheckbox`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputDate`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputNumber`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputRadio`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputRadioGroup`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputSelect`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputText`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputTextArea`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`LayoutView`](xref:blazor/components/layouts#apply-a-layout-to-arbitrary-content-layoutview-component)
|
||||
* [`MainLayout`](xref:blazor/components/layouts#mainlayout-component)
|
||||
* [`NavLink`](xref:blazor/fundamentals/routing#navlink-and-navmenu-components)
|
||||
|
|
@ -110,15 +110,15 @@ The following built-in Razor components are provided by the Blazor framework:
|
|||
* [`FocusOnNavigate`](xref:blazor/fundamentals/routing#focus-an-element-on-navigation)
|
||||
* [`HeadContent`](xref:blazor/components/control-head-content)
|
||||
* [`HeadOutlet`](xref:blazor/components/control-head-content)
|
||||
* [`InputCheckbox`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputDate`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputCheckbox`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputDate`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputFile`](xref:blazor/file-uploads)
|
||||
* [`InputNumber`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputRadio`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputRadioGroup`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputSelect`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputText`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputTextArea`](xref:blazor/forms-validation#built-in-form-components)
|
||||
* [`InputNumber`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputRadio`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputRadioGroup`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputSelect`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputText`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`InputTextArea`](xref:blazor/forms-and-input-components#built-in-input-components)
|
||||
* [`LayoutView`](xref:blazor/components/layouts#apply-a-layout-to-arbitrary-content-layoutview-component)
|
||||
* [`MainLayout`](xref:blazor/components/layouts#mainlayout-component)
|
||||
* [`NavLink`](xref:blazor/fundamentals/routing#navlink-and-navmenu-components)
|
||||
|
|
|
|||
|
|
@ -139,7 +139,7 @@ For the `oninput` event (`@bind:event="oninput"`), a value reversion occurs afte
|
|||
|
||||
* 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](#custom-binding-formats) to handle invalid entries.
|
||||
* Use a [form validation component](xref:blazor/forms-validation), such as <xref:Microsoft.AspNetCore.Components.Forms.InputNumber%601> or <xref:Microsoft.AspNetCore.Components.Forms.InputDate%601>. Form validation components provide built-in support to manage invalid inputs. Form validation components:
|
||||
* Use a [form validation component](xref:blazor/forms-and-input-components), such as <xref:Microsoft.AspNetCore.Components.Forms.InputNumber%601> or <xref:Microsoft.AspNetCore.Components.Forms.InputDate%601>. 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 <xref:Microsoft.AspNetCore.Components.Forms.EditContext>.
|
||||
* Display validation errors in the UI without interfering with the user entering additional webform data.
|
||||
|
||||
|
|
@ -262,9 +262,9 @@ For an alternative approach suited to sharing data in memory and across componen
|
|||
## Additional resources
|
||||
|
||||
* [Parameter change detection and additional guidance on Razor component rendering](xref:blazor/components/rendering)
|
||||
* <xref:blazor/forms-validation>
|
||||
* [Binding to radio buttons in a form](xref:blazor/forms-validation#radio-buttons)
|
||||
* [Binding `InputSelect` options to C# object `null` values](xref:blazor/forms-validation#binding-inputselect-options-to-c-object-null-values)
|
||||
* <xref:blazor/forms-and-input-components>
|
||||
* [Binding to radio buttons in a form](xref:blazor/forms-and-input-components#radio-buttons)
|
||||
* [Binding `InputSelect` options to C# object `null` values](xref:blazor/forms-and-input-components#binding-inputselect-options-to-c-object-null-values)
|
||||
* [ASP.NET Core Blazor event handling: `EventCallback` section](xref:blazor/components/event-handling#eventcallback)
|
||||
* [Blazor samples GitHub repository (`dotnet/blazor-samples`)](https://github.com/dotnet/blazor-samples)
|
||||
|
||||
|
|
@ -336,7 +336,7 @@ For the `oninput` event (`@bind:event="oninput"`), a value reversion occurs afte
|
|||
|
||||
* 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](#custom-binding-formats) to handle invalid entries.
|
||||
* Use a [form validation component](xref:blazor/forms-validation), such as <xref:Microsoft.AspNetCore.Components.Forms.InputNumber%601> or <xref:Microsoft.AspNetCore.Components.Forms.InputDate%601>. Form validation components provide built-in support to manage invalid inputs. Form validation components:
|
||||
* Use a [form validation component](xref:blazor/forms-and-input-components), such as <xref:Microsoft.AspNetCore.Components.Forms.InputNumber%601> or <xref:Microsoft.AspNetCore.Components.Forms.InputDate%601>. 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 <xref:Microsoft.AspNetCore.Components.Forms.EditContext>.
|
||||
* Display validation errors in the UI without interfering with the user entering additional webform data.
|
||||
|
||||
|
|
@ -459,9 +459,9 @@ For an alternative approach suited to sharing data in memory and across componen
|
|||
## Additional resources
|
||||
|
||||
* [Parameter change detection and additional guidance on Razor component rendering](xref:blazor/components/rendering)
|
||||
* <xref:blazor/forms-validation>
|
||||
* [Binding to radio buttons in a form](xref:blazor/forms-validation#radio-buttons)
|
||||
* [Binding `InputSelect` options to C# object `null` values](xref:blazor/forms-validation#binding-inputselect-options-to-c-object-null-values)
|
||||
* <xref:blazor/forms-and-input-components>
|
||||
* [Binding to radio buttons in a form](xref:blazor/forms-and-input-components#radio-buttons)
|
||||
* [Binding `InputSelect` options to C# object `null` values](xref:blazor/forms-and-input-components#binding-inputselect-options-to-c-object-null-values)
|
||||
* [ASP.NET Core Blazor event handling: `EventCallback` section](xref:blazor/components/event-handling#eventcallback)
|
||||
* [Blazor samples GitHub repository (`dotnet/blazor-samples`)](https://github.com/dotnet/blazor-samples)
|
||||
|
||||
|
|
@ -533,7 +533,7 @@ For the `oninput` event (`@bind:event="oninput"`), a value reversion occurs afte
|
|||
|
||||
* 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](#custom-binding-formats) to handle invalid entries.
|
||||
* Use a [form validation component](xref:blazor/forms-validation), such as <xref:Microsoft.AspNetCore.Components.Forms.InputNumber%601> or <xref:Microsoft.AspNetCore.Components.Forms.InputDate%601>. Form validation components provide built-in support to manage invalid inputs. Form validation components:
|
||||
* Use a [form validation component](xref:blazor/forms-and-input-components), such as <xref:Microsoft.AspNetCore.Components.Forms.InputNumber%601> or <xref:Microsoft.AspNetCore.Components.Forms.InputDate%601>. 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 <xref:Microsoft.AspNetCore.Components.Forms.EditContext>.
|
||||
* Display validation errors in the UI without interfering with the user entering additional webform data.
|
||||
|
||||
|
|
@ -656,9 +656,9 @@ For an alternative approach suited to sharing data in memory and across componen
|
|||
## Additional resources
|
||||
|
||||
* [Parameter change detection and additional guidance on Razor component rendering](xref:blazor/components/rendering)
|
||||
* <xref:blazor/forms-validation>
|
||||
* [Binding to radio buttons in a form](xref:blazor/forms-validation#radio-buttons)
|
||||
* [Binding `InputSelect` options to C# object `null` values](xref:blazor/forms-validation#binding-inputselect-options-to-c-object-null-values)
|
||||
* <xref:blazor/forms-and-input-components>
|
||||
* [Binding to radio buttons in a form](xref:blazor/forms-and-input-components#radio-buttons)
|
||||
* [Binding `InputSelect` options to C# object `null` values](xref:blazor/forms-and-input-components#binding-inputselect-options-to-c-object-null-values)
|
||||
* [ASP.NET Core Blazor event handling: `EventCallback` section](xref:blazor/components/event-handling#eventcallback)
|
||||
* [Blazor samples GitHub repository (`dotnet/blazor-samples`)](https://github.com/dotnet/blazor-samples)
|
||||
|
||||
|
|
@ -791,7 +791,7 @@ For the `oninput` event (`@bind:event="oninput"`), a value reversion occurs afte
|
|||
|
||||
* 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](#custom-binding-formats) to handle invalid entries.
|
||||
* Use a [form validation component](xref:blazor/forms-validation), such as <xref:Microsoft.AspNetCore.Components.Forms.InputNumber%601> or <xref:Microsoft.AspNetCore.Components.Forms.InputDate%601>. Form validation components provide built-in support to manage invalid inputs. Form validation components:
|
||||
* Use a [form validation component](xref:blazor/forms-and-input-components), such as <xref:Microsoft.AspNetCore.Components.Forms.InputNumber%601> or <xref:Microsoft.AspNetCore.Components.Forms.InputDate%601>. 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 <xref:Microsoft.AspNetCore.Components.Forms.EditContext>.
|
||||
* Display validation errors in the UI without interfering with the user entering additional webform data.
|
||||
|
||||
|
|
@ -914,9 +914,9 @@ For an alternative approach suited to sharing data in memory and across componen
|
|||
## Additional resources
|
||||
|
||||
* [Parameter change detection and additional guidance on Razor component rendering](xref:blazor/components/rendering)
|
||||
* <xref:blazor/forms-validation>
|
||||
* [Binding to radio buttons in a form](xref:blazor/forms-validation#radio-buttons)
|
||||
* [Binding `InputSelect` options to C# object `null` values](xref:blazor/forms-validation#binding-inputselect-options-to-c-object-null-values)
|
||||
* <xref:blazor/forms-and-input-components>
|
||||
* [Binding to radio buttons in a form](xref:blazor/forms-and-input-components#radio-buttons)
|
||||
* [Binding `InputSelect` options to C# object `null` values](xref:blazor/forms-and-input-components#binding-inputselect-options-to-c-object-null-values)
|
||||
* [ASP.NET Core Blazor event handling: `EventCallback` section](xref:blazor/components/event-handling#eventcallback)
|
||||
* [Blazor samples GitHub repository (`dotnet/blazor-samples`)](https://github.com/dotnet/blazor-samples)
|
||||
|
||||
|
|
|
|||
|
|
@ -324,7 +324,7 @@ These are unusual scenarios. For objects that are implemented correctly and beha
|
|||
|
||||
### Event handlers
|
||||
|
||||
Always unsubscribe event handlers from .NET events. The following [Blazor form](xref:blazor/forms-validation) examples show how to unsubscribe an event handler in the `Dispose` method:
|
||||
Always unsubscribe event handlers from .NET events. The following [Blazor form](xref:blazor/forms-and-input-components) examples show how to unsubscribe an event handler in the `Dispose` method:
|
||||
|
||||
* Private field and lambda approach
|
||||
|
||||
|
|
@ -433,7 +433,7 @@ When [anonymous functions](/dotnet/csharp/programming-guide/statements-expressio
|
|||
}
|
||||
```
|
||||
|
||||
The full example of the preceding code with anonymous lambda expressions appears in the <xref:blazor/forms-validation#validator-components> article.
|
||||
The full example of the preceding code with anonymous lambda expressions appears in the <xref:blazor/forms-and-input-components#validator-components> article.
|
||||
|
||||
For more information, see [Cleaning up unmanaged resources](/dotnet/standard/garbage-collection/unmanaged) and the topics that follow it on implementing the `Dispose` and `DisposeAsync` methods.
|
||||
|
||||
|
|
@ -782,7 +782,7 @@ These are unusual scenarios. For objects that are implemented correctly and beha
|
|||
|
||||
### Event handlers
|
||||
|
||||
Always unsubscribe event handlers from .NET events. The following [Blazor form](xref:blazor/forms-validation) examples show how to unsubscribe an event handler in the `Dispose` method:
|
||||
Always unsubscribe event handlers from .NET events. The following [Blazor form](xref:blazor/forms-and-input-components) examples show how to unsubscribe an event handler in the `Dispose` method:
|
||||
|
||||
* Private field and lambda approach
|
||||
|
||||
|
|
@ -890,7 +890,7 @@ When [anonymous functions](/dotnet/csharp/programming-guide/statements-expressio
|
|||
}
|
||||
```
|
||||
|
||||
The full example of the preceding code with anonymous lambda expressions appears in the <xref:blazor/forms-validation#validator-components> article.
|
||||
The full example of the preceding code with anonymous lambda expressions appears in the <xref:blazor/forms-and-input-components#validator-components> article.
|
||||
|
||||
For more information, see [Cleaning up unmanaged resources](/dotnet/standard/garbage-collection/unmanaged) and the topics that follow it on implementing the `Dispose` and `DisposeAsync` methods.
|
||||
|
||||
|
|
@ -1236,7 +1236,7 @@ These are unusual scenarios. For objects that are implemented correctly and beha
|
|||
|
||||
### Event handlers
|
||||
|
||||
Always unsubscribe event handlers from .NET events. The following [Blazor form](xref:blazor/forms-validation) examples show how to unsubscribe an event handler in the `Dispose` method:
|
||||
Always unsubscribe event handlers from .NET events. The following [Blazor form](xref:blazor/forms-and-input-components) examples show how to unsubscribe an event handler in the `Dispose` method:
|
||||
|
||||
* Private field and lambda approach
|
||||
|
||||
|
|
@ -1344,7 +1344,7 @@ When [anonymous functions](/dotnet/csharp/programming-guide/statements-expressio
|
|||
}
|
||||
```
|
||||
|
||||
The full example of the preceding code with anonymous lambda expressions appears in the <xref:blazor/forms-validation#validator-components> article.
|
||||
The full example of the preceding code with anonymous lambda expressions appears in the <xref:blazor/forms-and-input-components#validator-components> article.
|
||||
|
||||
For more information, see [Cleaning up unmanaged resources](/dotnet/standard/garbage-collection/unmanaged) and the topics that follow it on implementing the `Dispose` and `DisposeAsync` methods.
|
||||
|
||||
|
|
@ -1693,7 +1693,7 @@ These are unusual scenarios. For objects that are implemented correctly and beha
|
|||
|
||||
### Event handlers
|
||||
|
||||
Always unsubscribe event handlers from .NET events. The following [Blazor form](xref:blazor/forms-validation) examples show how to unsubscribe an event handler in the `Dispose` method:
|
||||
Always unsubscribe event handlers from .NET events. The following [Blazor form](xref:blazor/forms-and-input-components) examples show how to unsubscribe an event handler in the `Dispose` method:
|
||||
|
||||
* Private field and lambda approach
|
||||
|
||||
|
|
@ -1802,7 +1802,7 @@ When [anonymous functions](/dotnet/csharp/programming-guide/statements-expressio
|
|||
}
|
||||
```
|
||||
|
||||
The full example of the preceding code with anonymous lambda expressions appears in the <xref:blazor/forms-validation#validator-components> article.
|
||||
The full example of the preceding code with anonymous lambda expressions appears in the <xref:blazor/forms-and-input-components#validator-components> article.
|
||||
|
||||
For more information, see [Cleaning up unmanaged resources](/dotnet/standard/garbage-collection/unmanaged) and the topics that follow it on implementing the `Dispose` and `DisposeAsync` methods.
|
||||
|
||||
|
|
|
|||
|
|
@ -152,7 +152,7 @@ For more information on CORS with ASP.NET Core apps and other Microsoft products
|
|||
* <xref:blazor/js-interop/index>
|
||||
* [`<a>`: The Anchor element: Security and privacy (MDN documentation)](https://developer.mozilla.org/docs/Web/HTML/Element/a#security_and_privacy)
|
||||
* <xref:blazor/file-uploads>
|
||||
* <xref:blazor/forms-validation>
|
||||
* <xref:blazor/forms-and-input-components>
|
||||
* [Blazor samples GitHub repository (`dotnet/blazor-samples`)](https://github.com/dotnet/blazor-samples)
|
||||
|
||||
:::moniker-end
|
||||
|
|
@ -297,7 +297,7 @@ For more information on CORS with ASP.NET Core apps and other Microsoft products
|
|||
* <xref:blazor/js-interop/index>
|
||||
* [`<a>`: The Anchor element: Security and privacy (MDN documentation)](https://developer.mozilla.org/docs/Web/HTML/Element/a#security_and_privacy)
|
||||
* <xref:blazor/file-uploads>
|
||||
* <xref:blazor/forms-validation>
|
||||
* <xref:blazor/forms-and-input-components>
|
||||
* [Blazor samples GitHub repository (`dotnet/blazor-samples`)](https://github.com/dotnet/blazor-samples)
|
||||
|
||||
:::moniker-end
|
||||
|
|
|
|||
|
|
@ -576,7 +576,7 @@ For more information on SignalR configuration and how to set <xref:Microsoft.Asp
|
|||
|
||||
* <xref:blazor/file-downloads>
|
||||
* <xref:mvc/models/file-uploads#security-considerations>
|
||||
* <xref:blazor/forms-validation>
|
||||
* <xref:blazor/forms-and-input-components>
|
||||
* [Blazor samples GitHub repository (`dotnet/blazor-samples`)](https://github.com/dotnet/blazor-samples)
|
||||
|
||||
:::moniker-end
|
||||
|
|
@ -1132,7 +1132,7 @@ For more information on SignalR configuration and how to set <xref:Microsoft.Asp
|
|||
## Additional resources
|
||||
|
||||
* <xref:mvc/models/file-uploads#security-considerations>
|
||||
* <xref:blazor/forms-validation>
|
||||
* <xref:blazor/forms-and-input-components>
|
||||
* [Blazor samples GitHub repository (`dotnet/blazor-samples`)](https://github.com/dotnet/blazor-samples)
|
||||
|
||||
:::moniker-end
|
||||
|
|
@ -1694,7 +1694,7 @@ For more information on SignalR configuration and how to set <xref:Microsoft.Asp
|
|||
|
||||
* <xref:blazor/file-downloads>
|
||||
* <xref:mvc/models/file-uploads#security-considerations>
|
||||
* <xref:blazor/forms-validation>
|
||||
* <xref:blazor/forms-and-input-components>
|
||||
* [Blazor samples GitHub repository (`dotnet/blazor-samples`)](https://github.com/dotnet/blazor-samples)
|
||||
|
||||
:::moniker-end
|
||||
|
|
|
|||
|
|
@ -1,16 +1,19 @@
|
|||
---
|
||||
title: ASP.NET Core Blazor forms and validation
|
||||
title: ASP.NET Core Blazor forms and input components
|
||||
author: guardrex
|
||||
description: Learn how to use forms and field validation scenarios in Blazor.
|
||||
description: Learn how to use forms with field validation and built-in input components in Blazor.
|
||||
monikerRange: '>= aspnetcore-3.1'
|
||||
ms.author: riande
|
||||
ms.custom: mvc
|
||||
ms.date: 11/09/2021
|
||||
uid: blazor/forms-validation
|
||||
uid: blazor/forms-and-input-components
|
||||
---
|
||||
# ASP.NET Core Blazor forms and validation
|
||||
# ASP.NET Core Blazor forms and input components
|
||||
|
||||
The Blazor framework supports forms and validation using the <xref:Microsoft.AspNetCore.Components.Forms.EditForm> component bound to a model that uses [data annotations](xref:mvc/models/validation).
|
||||
The Blazor framework supports forms and provides built-in input components:
|
||||
|
||||
* <xref:Microsoft.AspNetCore.Components.Forms.EditForm> component bound to a model that uses [data annotations](xref:mvc/models/validation)
|
||||
* [Built-in input components](#built-in-input-components)
|
||||
|
||||
:::moniker range=">= aspnetcore-6.0 < aspnetcore-7.0"
|
||||
|
||||
|
|
@ -81,9 +84,9 @@ The <xref:Microsoft.AspNetCore.Components.Forms.EditForm> provides the following
|
|||
* Use <xref:Microsoft.AspNetCore.Components.Forms.EditForm.OnInvalidSubmit> to assign an event handler to run when a form with invalid fields is submitted.
|
||||
* Use <xref:Microsoft.AspNetCore.Components.Forms.EditForm.OnSubmit> to assign an event handler to run regardless of the form fields' validation status. The form is validated by calling <xref:Microsoft.AspNetCore.Components.Forms.EditContext.Validate%2A?displayProperty=nameWithType> in the event handler method. If <xref:Microsoft.AspNetCore.Components.Forms.EditContext.Validate%2A> returns `true`, the form is valid.
|
||||
|
||||
## Built-in form components
|
||||
## Built-in input components
|
||||
|
||||
The Blazor framework provides built-in form components to receive and validate user input. Inputs are validated when they're changed and when a form is submitted. Available input components are shown in the following table.
|
||||
The Blazor framework provides built-in input components to receive and validate user input. Inputs are validated when they're changed and when a form is submitted. Available input components are shown in the following table.
|
||||
|
||||
| Input component | Rendered as… |
|
||||
| --------------- | ------------------- |
|
||||
|
|
@ -128,7 +131,7 @@ The following `Starship` type, which is used in several of this article's exampl
|
|||
The following form accepts and validates user input using:
|
||||
|
||||
* The properties and validation defined in the preceding `Starship` model.
|
||||
* Several of Blazor's [built-in form components](#built-in-form-components).
|
||||
* Several of Blazor's [built-in input components](#built-in-input-components).
|
||||
|
||||
`Pages/FormExample2.razor`:
|
||||
|
||||
|
|
@ -1216,9 +1219,9 @@ The <xref:Microsoft.AspNetCore.Components.Forms.EditForm> provides the following
|
|||
* Use <xref:Microsoft.AspNetCore.Components.Forms.EditForm.OnInvalidSubmit> to assign an event handler to run when a form with invalid fields is submitted.
|
||||
* Use <xref:Microsoft.AspNetCore.Components.Forms.EditForm.OnSubmit> to assign an event handler to run regardless of the form fields' validation status. The form is validated by calling <xref:Microsoft.AspNetCore.Components.Forms.EditContext.Validate%2A?displayProperty=nameWithType> in the event handler method. If <xref:Microsoft.AspNetCore.Components.Forms.EditContext.Validate%2A> returns `true`, the form is valid.
|
||||
|
||||
## Built-in form components
|
||||
## Built-in input components
|
||||
|
||||
The Blazor framework provides built-in form components to receive and validate user input. Inputs are validated when they're changed and when a form is submitted. Available input components are shown in the following table.
|
||||
The Blazor framework provides built-in input components to receive and validate user input. Inputs are validated when they're changed and when a form is submitted. Available input components are shown in the following table.
|
||||
|
||||
| Input component | Rendered as… |
|
||||
| --------------- | ------------------- |
|
||||
|
|
@ -1263,7 +1266,7 @@ The following `Starship` type, which is used in several of this article's exampl
|
|||
The following form accepts and validates user input using:
|
||||
|
||||
* The properties and validation defined in the preceding `Starship` model.
|
||||
* Several of Blazor's [built-in form components](#built-in-form-components).
|
||||
* Several of Blazor's [built-in input components](#built-in-input-components).
|
||||
|
||||
`Pages/FormExample2.razor`:
|
||||
|
||||
|
|
@ -2204,9 +2207,9 @@ The <xref:Microsoft.AspNetCore.Components.Forms.EditForm> provides the following
|
|||
* Use <xref:Microsoft.AspNetCore.Components.Forms.EditForm.OnInvalidSubmit> to assign an event handler to run when a form with invalid fields is submitted.
|
||||
* Use <xref:Microsoft.AspNetCore.Components.Forms.EditForm.OnSubmit> to assign an event handler to run regardless of the form fields' validation status. The form is validated by calling <xref:Microsoft.AspNetCore.Components.Forms.EditContext.Validate%2A?displayProperty=nameWithType> in the event handler method. If <xref:Microsoft.AspNetCore.Components.Forms.EditContext.Validate%2A> returns `true`, the form is valid.
|
||||
|
||||
## Built-in form components
|
||||
## Built-in input components
|
||||
|
||||
The Blazor framework provides built-in form components to receive and validate user input. Inputs are validated when they're changed and when a form is submitted. Available input components are shown in the following table.
|
||||
The Blazor framework provides built-in input components to receive and validate user input. Inputs are validated when they're changed and when a form is submitted. Available input components are shown in the following table.
|
||||
|
||||
| Input component | Rendered as… |
|
||||
| --------------- | ------------------- |
|
||||
|
|
@ -2242,7 +2245,7 @@ The following `Starship` type, which is used in several of this article's exampl
|
|||
The following form accepts and validates user input using:
|
||||
|
||||
* The properties and validation defined in the preceding `Starship` model.
|
||||
* Several of Blazor's [built-in form components](#built-in-form-components).
|
||||
* Several of Blazor's [built-in input components](#built-in-input-components).
|
||||
|
||||
`Pages/FormExample2.razor`:
|
||||
|
||||
|
|
@ -3080,9 +3083,9 @@ The <xref:Microsoft.AspNetCore.Components.Forms.EditForm> provides the following
|
|||
* Use <xref:Microsoft.AspNetCore.Components.Forms.EditForm.OnInvalidSubmit> to assign an event handler to run when a form with invalid fields is submitted.
|
||||
* Use <xref:Microsoft.AspNetCore.Components.Forms.EditForm.OnSubmit> to assign an event handler to run regardless of the form fields' validation status. The form is validated by calling <xref:Microsoft.AspNetCore.Components.Forms.EditContext.Validate%2A?displayProperty=nameWithType> in the event handler method. If <xref:Microsoft.AspNetCore.Components.Forms.EditContext.Validate%2A> returns `true`, the form is valid.
|
||||
|
||||
## Built-in form components
|
||||
## Built-in input components
|
||||
|
||||
The Blazor framework provides built-in form components to receive and validate user input. Inputs are validated when they're changed and when a form is submitted. Available input components are shown in the following table.
|
||||
The Blazor framework provides built-in input components to receive and validate user input. The built-in input components in the following table are supported in an <xref:Microsoft.AspNetCore.Components.Forms.EditForm> with an <xref:Microsoft.AspNetCore.Components.Forms.EditContext> and outside of a form in Razor component markup. Inputs are validated when they're changed and when a form is submitted.
|
||||
|
||||
| Input component | Rendered as… |
|
||||
| --------------- | ------------------- |
|
||||
|
|
@ -3107,7 +3110,12 @@ For more information on the <xref:Microsoft.AspNetCore.Components.Forms.InputFil
|
|||
|
||||
All of the input components, including <xref:Microsoft.AspNetCore.Components.Forms.EditForm>, support arbitrary attributes. Any attribute that doesn't match a component parameter is added to the rendered HTML element.
|
||||
|
||||
Input components provide default behavior for validating when a field is changed, including updating the field CSS class to reflect the field's state as valid or invalid. Some components include useful parsing logic. For example, <xref:Microsoft.AspNetCore.Components.Forms.InputDate%601> and <xref:Microsoft.AspNetCore.Components.Forms.InputNumber%601> handle unparseable values gracefully by registering unparseable values as validation errors. Types that can accept null values also support nullability of the target field (for example, `int?` for a nullable integer).
|
||||
Input components provide default behavior for validating when a field is changed:
|
||||
|
||||
* For input components in a form with an <xref:Microsoft.AspNetCore.Components.Forms.EditContext>, the defult validation behavior includes updating the field CSS class to reflect the field's state as valid or invalid with validation styling of the underlying HTML element.
|
||||
* For controls that don't have an <xref:Microsoft.AspNetCore.Components.Forms.EditContext>, the default validation reflects the valid or invalid state but does ***not*** provide validation styling to the underlying HTML element.
|
||||
|
||||
Some components include useful parsing logic. For example, <xref:Microsoft.AspNetCore.Components.Forms.InputDate%601> and <xref:Microsoft.AspNetCore.Components.Forms.InputNumber%601> handle unparseable values gracefully by registering unparseable values as validation errors. Types that can accept null values also support nullability of the target field (for example, `int?` for a nullable integer).
|
||||
|
||||
## Example form
|
||||
|
||||
|
|
@ -3127,7 +3135,7 @@ The following `Starship` type, which is used in several of this article's exampl
|
|||
The following form accepts and validates user input using:
|
||||
|
||||
* The properties and validation defined in the preceding `Starship` model.
|
||||
* Several of Blazor's [built-in form components](#built-in-form-components).
|
||||
* Several of Blazor's [built-in input components](#built-in-input-components).
|
||||
|
||||
`Pages/FormExample2.razor`:
|
||||
|
||||
|
|
@ -105,7 +105,7 @@ The following `ShowImage2` component:
|
|||
|
||||
<!--
|
||||
|
||||
* <xref:blazor/forms-validation#preview-an-image-provided-by-the-inputfile-component>
|
||||
* <xref:blazor/forms-and-input-components#preview-an-image-provided-by-the-inputfile-component>
|
||||
|
||||
-->
|
||||
|
||||
|
|
@ -210,7 +210,7 @@ The following `ShowImage2` component:
|
|||
|
||||
<!--
|
||||
|
||||
* <xref:blazor/forms-validation#preview-an-image-provided-by-the-inputfile-component>
|
||||
* <xref:blazor/forms-and-input-components#preview-an-image-provided-by-the-inputfile-component>
|
||||
|
||||
-->
|
||||
|
||||
|
|
|
|||
|
|
@ -152,7 +152,7 @@ For example:
|
|||
* A change event for a `<select>` could send a value that isn't within the options that the app presented to the client.
|
||||
* An `<input>` could send any text data to the server, bypassing client-side validation.
|
||||
|
||||
The app must validate the data for any event that the app handles. The Blazor framework [forms components](xref:blazor/forms-validation) perform basic validations. If the app uses custom forms components, custom code must be written to validate event data as appropriate.
|
||||
The app must validate the data for any event that the app handles. The Blazor framework [forms components](xref:blazor/forms-and-input-components) perform basic validations. If the app uses custom forms components, custom code must be written to validate event data as appropriate.
|
||||
|
||||
Blazor Server events are asynchronous, so multiple events can be dispatched to the server before the app has time to react by producing a new render. This has some security implications to consider. Limiting client actions in the app must be performed inside event handlers and not depend on the current rendered view state.
|
||||
|
||||
|
|
@ -543,7 +543,7 @@ For example:
|
|||
* A change event for a `<select>` could send a value that isn't within the options that the app presented to the client.
|
||||
* An `<input>` could send any text data to the server, bypassing client-side validation.
|
||||
|
||||
The app must validate the data for any event that the app handles. The Blazor framework [forms components](xref:blazor/forms-validation) perform basic validations. If the app uses custom forms components, custom code must be written to validate event data as appropriate.
|
||||
The app must validate the data for any event that the app handles. The Blazor framework [forms components](xref:blazor/forms-and-input-components) perform basic validations. If the app uses custom forms components, custom code must be written to validate event data as appropriate.
|
||||
|
||||
Blazor Server events are asynchronous, so multiple events can be dispatched to the server before the app has time to react by producing a new render. This has some security implications to consider. Limiting client actions in the app must be performed inside event handlers and not depend on the current rendered view state.
|
||||
|
||||
|
|
@ -934,7 +934,7 @@ For example:
|
|||
* A change event for a `<select>` could send a value that isn't within the options that the app presented to the client.
|
||||
* An `<input>` could send any text data to the server, bypassing client-side validation.
|
||||
|
||||
The app must validate the data for any event that the app handles. The Blazor framework [forms components](xref:blazor/forms-validation) perform basic validations. If the app uses custom forms components, custom code must be written to validate event data as appropriate.
|
||||
The app must validate the data for any event that the app handles. The Blazor framework [forms components](xref:blazor/forms-and-input-components) perform basic validations. If the app uses custom forms components, custom code must be written to validate event data as appropriate.
|
||||
|
||||
Blazor Server events are asynchronous, so multiple events can be dispatched to the server before the app has time to react by producing a new render. This has some security implications to consider. Limiting client actions in the app must be performed inside event handlers and not depend on the current rendered view state.
|
||||
|
||||
|
|
|
|||
|
|
@ -193,7 +193,7 @@ The demonstration in this section:
|
|||
* Visual Studio: **Create a solution** > **Create a new project** > **Razor Class Library**. Name the project `GrantImaharaRobotControls`.
|
||||
* Visual Studio Code/.NET CLI: Execute `dotnet new razorclasslib -o GrantImaharaRobotControls` from a command prompt. The `-o|--output` option creates a folder for the [solution](xref:blazor/tooling#visual-studio-solution-file-sln) and names the project `GrantImaharaRobotControls`.
|
||||
|
||||
1. The example component presented later in this section uses a [Blazor form](xref:blazor/forms-validation). In the RCL project, add the [`Microsoft.AspNetCore.Components.Forms`](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.Forms) package to the project.
|
||||
1. The example component presented later in this section uses a [Blazor form](xref:blazor/forms-and-input-components). In the RCL project, add the [`Microsoft.AspNetCore.Components.Forms`](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.Forms) package to the project.
|
||||
|
||||
[!INCLUDE[](~/includes/package-reference.md)]
|
||||
|
||||
|
|
@ -561,7 +561,7 @@ The demonstration in this section:
|
|||
* Visual Studio: **Create a solution** > **Create a new project** > **Razor Class Library**. Name the project `GrantImaharaRobotControls`.
|
||||
* Visual Studio Code/.NET CLI: Execute `dotnet new razorclasslib -o GrantImaharaRobotControls` from a command prompt. The `-o|--output` option creates a folder for the [solution](xref:blazor/tooling#visual-studio-solution-file-sln) and names the project `GrantImaharaRobotControls`.
|
||||
|
||||
1. The example component presented later in this section uses a [Blazor form](xref:blazor/forms-validation). In the RCL project, add the [`Microsoft.AspNetCore.Components.Forms`](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.Forms) package to the project.
|
||||
1. The example component presented later in this section uses a [Blazor form](xref:blazor/forms-and-input-components). In the RCL project, add the [`Microsoft.AspNetCore.Components.Forms`](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.Forms) package to the project.
|
||||
|
||||
[!INCLUDE[](~/includes/package-reference.md)]
|
||||
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@ The `InputFile` component allows reading one or more files selected by a user fo
|
|||
|
||||
### New `InputRadio` and `InputRadioGroup` components
|
||||
|
||||
Blazor has built-in `InputRadio` and `InputRadioGroup` components that simplify data binding to radio button groups with integrated validation. For more information, see <xref:blazor/forms-validation>.
|
||||
Blazor has built-in `InputRadio` and `InputRadioGroup` components that simplify data binding to radio button groups with integrated validation. For more information, see <xref:blazor/forms-and-input-components>.
|
||||
|
||||
### Component virtualization
|
||||
|
||||
|
|
@ -142,7 +142,7 @@ Use the `FocusAsync` convenience method on element references to set the UI focu
|
|||
|
||||
### Custom validation CSS class attributes
|
||||
|
||||
Custom validation CSS class attributes are useful when integrating with CSS frameworks, such as Bootstrap. For more information, see <xref:blazor/forms-validation#custom-validation-css-class-attributes>.
|
||||
Custom validation CSS class attributes are useful when integrating with CSS frameworks, such as Bootstrap. For more information, see <xref:blazor/forms-and-input-components#custom-validation-css-class-attributes>.
|
||||
|
||||
### IAsyncDisposable support
|
||||
|
||||
|
|
@ -160,7 +160,7 @@ The following built-in components support display names with the `DisplayName` p
|
|||
* `InputNumber`
|
||||
* `InputSelect`
|
||||
|
||||
For more information, see <xref:blazor/forms-validation#display-name-support>.
|
||||
For more information, see <xref:blazor/forms-and-input-components#display-name-support>.
|
||||
|
||||
### Catch-all route parameters
|
||||
|
||||
|
|
|
|||
|
|
@ -186,7 +186,7 @@ Support for working with query strings is improved. For more information, see <x
|
|||
Binding supports multiple option selection with `<input>` elements. For more information, see the following resources:
|
||||
|
||||
* <xref:blazor/components/data-binding?view=aspnetcore-6.0#multiple-option-selection-with-input-elements>
|
||||
* <xref:blazor/forms-validation?view=aspnetcore-6.0#multiple-option-selection-with-the-inputselect-component>
|
||||
* <xref:blazor/forms-and-input-components?view=aspnetcore-6.0#multiple-option-selection-with-the-inputselect-component>
|
||||
|
||||
### Head (`<head>`) content control
|
||||
|
||||
|
|
|
|||
|
|
@ -423,8 +423,8 @@ items:
|
|||
uid: blazor/components/built-in-components
|
||||
- name: Globalization and localization
|
||||
uid: blazor/globalization-localization
|
||||
- name: Forms and validation
|
||||
uid: blazor/forms-validation
|
||||
- name: Forms and input components
|
||||
uid: blazor/forms-and-input-components
|
||||
- name: File uploads
|
||||
uid: blazor/file-uploads
|
||||
- name: File downloads
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ Welcome to what's new in the ASP.NET Core docs from July 1, 2022 through July 31
|
|||
|
||||
### Updated articles
|
||||
|
||||
- <xref:blazor/forms-validation>
|
||||
- <xref:blazor/forms-and-input-components>
|
||||
- Custom validation attribute with DI
|
||||
- Blazor template and prerendering updates
|
||||
- Partial updates for previewing images
|
||||
|
|
|
|||
Loading…
Reference in New Issue