From 8354dc9d822632be4a773c6c3316459bd9b0d2bc Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 16 Aug 2022 10:02:08 -0500 Subject: [PATCH] Blazor InputX form components --- .openpublishing.redirection.json | 7 +- .../blazor/components/built-in-components.md | 64 +++++++++---------- aspnetcore/blazor/components/data-binding.md | 32 +++++----- aspnetcore/blazor/components/lifecycle.md | 16 ++--- aspnetcore/blazor/file-downloads.md | 4 +- aspnetcore/blazor/file-uploads.md | 6 +- ...ation.md => forms-and-input-components.md} | 44 +++++++------ aspnetcore/blazor/images.md | 4 +- .../security/server/threat-mitigation.md | 6 +- .../webassembly-lazy-load-assemblies.md | 4 +- aspnetcore/release-notes/aspnetcore-5.0.md | 6 +- aspnetcore/release-notes/aspnetcore-6.0.md | 2 +- aspnetcore/toc.yml | 4 +- .../dotnet-AspNetCore.Docs-2022-07-01.md | 2 +- 14 files changed, 107 insertions(+), 94 deletions(-) rename aspnetcore/blazor/{forms-validation.md => forms-and-input-components.md} (98%) diff --git a/.openpublishing.redirection.json b/.openpublishing.redirection.json index e04c75211bc0..c6addead0643 100644 --- a/.openpublishing.redirection.json +++ b/.openpublishing.redirection.json @@ -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 } ] } diff --git a/aspnetcore/blazor/components/built-in-components.md b/aspnetcore/blazor/components/built-in-components.md index f9045d297ab9..8aea1a43b7c1 100644 --- a/aspnetcore/blazor/components/built-in-components.md +++ b/aspnetcore/blazor/components/built-in-components.md @@ -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) diff --git a/aspnetcore/blazor/components/data-binding.md b/aspnetcore/blazor/components/data-binding.md index 2c4faad88c4b..950b4de685ab 100644 --- a/aspnetcore/blazor/components/data-binding.md +++ b/aspnetcore/blazor/components/data-binding.md @@ -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 or . 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 or . 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 . * 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) -* -* [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) +* +* [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 or . 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 or . 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 . * 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) -* -* [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) +* +* [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 or . 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 or . 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 . * 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) -* -* [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) +* +* [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 or . 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 or . 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 . * 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) -* -* [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) +* +* [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) diff --git a/aspnetcore/blazor/components/lifecycle.md b/aspnetcore/blazor/components/lifecycle.md index ddc05ae1f30b..d52f93f9ac6f 100644 --- a/aspnetcore/blazor/components/lifecycle.md +++ b/aspnetcore/blazor/components/lifecycle.md @@ -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 article. + The full example of the preceding code with anonymous lambda expressions appears in the 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 article. + The full example of the preceding code with anonymous lambda expressions appears in the 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 article. + The full example of the preceding code with anonymous lambda expressions appears in the 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 article. + The full example of the preceding code with anonymous lambda expressions appears in the 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. diff --git a/aspnetcore/blazor/file-downloads.md b/aspnetcore/blazor/file-downloads.md index cd6835194bce..dae55e1ca4f8 100644 --- a/aspnetcore/blazor/file-downloads.md +++ b/aspnetcore/blazor/file-downloads.md @@ -152,7 +152,7 @@ For more information on CORS with ASP.NET Core apps and other Microsoft products * * [``: The Anchor element: Security and privacy (MDN documentation)](https://developer.mozilla.org/docs/Web/HTML/Element/a#security_and_privacy) * -* +* * [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 * * [``: The Anchor element: Security and privacy (MDN documentation)](https://developer.mozilla.org/docs/Web/HTML/Element/a#security_and_privacy) * -* +* * [Blazor samples GitHub repository (`dotnet/blazor-samples`)](https://github.com/dotnet/blazor-samples) :::moniker-end diff --git a/aspnetcore/blazor/file-uploads.md b/aspnetcore/blazor/file-uploads.md index d5e39aa4179e..fbcd36e0a52f 100644 --- a/aspnetcore/blazor/file-uploads.md +++ b/aspnetcore/blazor/file-uploads.md @@ -576,7 +576,7 @@ For more information on SignalR configuration and how to set * -* +* * [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 -* +* * [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 * -* +* * [Blazor samples GitHub repository (`dotnet/blazor-samples`)](https://github.com/dotnet/blazor-samples) :::moniker-end diff --git a/aspnetcore/blazor/forms-validation.md b/aspnetcore/blazor/forms-and-input-components.md similarity index 98% rename from aspnetcore/blazor/forms-validation.md rename to aspnetcore/blazor/forms-and-input-components.md index 76f6f4cdb6da..3d92e17bf8fe 100644 --- a/aspnetcore/blazor/forms-validation.md +++ b/aspnetcore/blazor/forms-and-input-components.md @@ -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 component bound to a model that uses [data annotations](xref:mvc/models/validation). +The Blazor framework supports forms and provides built-in input components: + +* 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 provides the following * Use to assign an event handler to run when a form with invalid fields is submitted. * Use to assign an event handler to run regardless of the form fields' validation status. The form is validated by calling in the event handler method. If 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 provides the following * Use to assign an event handler to run when a form with invalid fields is submitted. * Use to assign an event handler to run regardless of the form fields' validation status. The form is validated by calling in the event handler method. If 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 provides the following * Use to assign an event handler to run when a form with invalid fields is submitted. * Use to assign an event handler to run regardless of the form fields' validation status. The form is validated by calling in the event handler method. If 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 provides the following * Use to assign an event handler to run when a form with invalid fields is submitted. * Use to assign an event handler to run regardless of the form fields' validation status. The form is validated by calling in the event handler method. If 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 with an 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 , 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, and 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 , 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 , 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, and 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`: diff --git a/aspnetcore/blazor/images.md b/aspnetcore/blazor/images.md index 781b1194fbdd..3ef03e28d3df 100644 --- a/aspnetcore/blazor/images.md +++ b/aspnetcore/blazor/images.md @@ -105,7 +105,7 @@ The following `ShowImage2` component: @@ -210,7 +210,7 @@ The following `ShowImage2` component: diff --git a/aspnetcore/blazor/security/server/threat-mitigation.md b/aspnetcore/blazor/security/server/threat-mitigation.md index 9814e648eee0..6d9021e2e697 100644 --- a/aspnetcore/blazor/security/server/threat-mitigation.md +++ b/aspnetcore/blazor/security/server/threat-mitigation.md @@ -152,7 +152,7 @@ For example: * A change event for a `` 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 `` 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 `` 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. diff --git a/aspnetcore/blazor/webassembly-lazy-load-assemblies.md b/aspnetcore/blazor/webassembly-lazy-load-assemblies.md index 268d152ed954..18026c525356 100644 --- a/aspnetcore/blazor/webassembly-lazy-load-assemblies.md +++ b/aspnetcore/blazor/webassembly-lazy-load-assemblies.md @@ -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)] diff --git a/aspnetcore/release-notes/aspnetcore-5.0.md b/aspnetcore/release-notes/aspnetcore-5.0.md index d07821d69ed0..91ba46e73cd8 100644 --- a/aspnetcore/release-notes/aspnetcore-5.0.md +++ b/aspnetcore/release-notes/aspnetcore-5.0.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 . +Blazor has built-in `InputRadio` and `InputRadioGroup` components that simplify data binding to radio button groups with integrated validation. For more information, see . ### 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 . +Custom validation CSS class attributes are useful when integrating with CSS frameworks, such as Bootstrap. For more information, see . ### IAsyncDisposable support @@ -160,7 +160,7 @@ The following built-in components support display names with the `DisplayName` p * `InputNumber` * `InputSelect` -For more information, see . +For more information, see . ### Catch-all route parameters diff --git a/aspnetcore/release-notes/aspnetcore-6.0.md b/aspnetcore/release-notes/aspnetcore-6.0.md index 4a61e4ef3eb7..3e56be3846a6 100644 --- a/aspnetcore/release-notes/aspnetcore-6.0.md +++ b/aspnetcore/release-notes/aspnetcore-6.0.md @@ -186,7 +186,7 @@ Support for working with query strings is improved. For more information, see ` elements. For more information, see the following resources: * -* +* ### Head (``) content control diff --git a/aspnetcore/toc.yml b/aspnetcore/toc.yml index feefdf38cdef..9c0aca5d4316 100644 --- a/aspnetcore/toc.yml +++ b/aspnetcore/toc.yml @@ -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 diff --git a/aspnetcore/whats-new/dotnet-AspNetCore.Docs-2022-07-01.md b/aspnetcore/whats-new/dotnet-AspNetCore.Docs-2022-07-01.md index acc9bb7513e0..92fd92b199e8 100644 --- a/aspnetcore/whats-new/dotnet-AspNetCore.Docs-2022-07-01.md +++ b/aspnetcore/whats-new/dotnet-AspNetCore.Docs-2022-07-01.md @@ -12,7 +12,7 @@ Welcome to what's new in the ASP.NET Core docs from July 1, 2022 through July 31 ### Updated articles -- +- - Custom validation attribute with DI - Blazor template and prerendering updates - Partial updates for previewing images