From 9213a1abaea5e22bc2a887fb62a4bb453a924247 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Fri, 6 Sep 2024 08:52:02 -0400 Subject: [PATCH 1/8] Override InputNumber type attribute --- aspnetcore/blazor/forms/input-components.md | 84 +++++++++++++++++++ .../aspnetcore-9/includes/blazor.md | 16 ++++ 2 files changed, 100 insertions(+) diff --git a/aspnetcore/blazor/forms/input-components.md b/aspnetcore/blazor/forms/input-components.md index 91d8d69a6ffd..67f31b4bdc36 100644 --- a/aspnetcore/blazor/forms/input-components.md +++ b/aspnetcore/blazor/forms/input-components.md @@ -527,3 +527,87 @@ Assign a custom template to The ProductionDate field has an incorrect date value. :::moniker-end + +:::moniker range=">= aspnetcore-9.0" + +### Override `InputNumber` `type` attribute + +The `InputNumber` component supports overriding the `type` attribute, where the `{TYPE}` placeholder represents the `type` value: + +```razor + +``` + +For example, specify an [`` element of `type="range"`](https://developer.mozilla.org/docs/Web/HTML/Element/input/range) with an `InputNumber` component to create a range input that supports model binding and form validation, typically rendered as a slider or dial control rather than a text box: + +```razor + +``` + +If the user's browser doesn't support `type="range"`, the `` element gracefully degrades back to a default text box. + +In the following example, the `InputNumber` components set their `type` attributes to `range`, resulting in a set of three sliders or dial controls by typical browsers. + +`EngineForm.razor`: + +```razor +@page "/engine-form" +@inject ILogger Logger + + +
+ +
+
+ +
+
+ +
+
+ +
+ + +@code { + [SupplyParameterFromForm] + private EngineSpecifications? Model { get; set; } + + protected override void OnInitialized() => Model ??= new(); + + private void Submit() + { + Logger.LogInformation( + "Nacelle Count = {NacelleCount}, Plasma Injector Count = " + + "{PlasmaInjectorCount}, Warp Field Coil Count = {WarpFieldCoilCount}", + Model?.PlasmaInjectorCount, Model?.WarpFieldCoilCount, + Model?.NacelleCount); + } + + public class Starship + { + [Required, Range(minimum: 2, maximum: 6)] + public int NacelleCount { get; set; } + + [Required, Range(minimum: 2, maximum: 8)] + public int PlasmaInjectorCount { get; set; } + + [Required, Range(minimum: 4, maximum: 20)] + public int WarpFieldCoilCount { get; set; } + } +} +``` + +:::moniker-end diff --git a/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md b/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md index cbfeb3a3499d..32af10e96212 100644 --- a/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md +++ b/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md @@ -193,3 +193,19 @@ The default `OverscanCount` is 3. The following example increases the `OverscanC ... ``` + +### Override `InputNumber` `type` attribute + +The `InputNumber` component now supports overriding the `type` attribute, where the `{TYPE}` placeholder represents the `type` value: + +```razor + +``` + +For example, specify an [`` element of `type="range"`](https://developer.mozilla.org/docs/Web/HTML/Element/input/range) to create a range input that supports model binding and form validation, typically rendered as a slider or dial control rather than a text box: + +```razor + +``` + +For more information and an example use in a component, see . From 5dfff335f74c759542ea3736221c5d994e023eaf Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Fri, 6 Sep 2024 09:06:38 -0400 Subject: [PATCH 2/8] Updates --- aspnetcore/release-notes/aspnetcore-9/includes/blazor.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md b/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md index 32af10e96212..0195eca9c096 100644 --- a/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md +++ b/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md @@ -208,4 +208,4 @@ For example, specify an [`` element of `type="range"`](https://developer. ``` -For more information and an example use in a component, see . +For more information and an example use in a component, see . From 34606ec18cfed8164b951206a24a40cb7fc1a015 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Fri, 6 Sep 2024 14:33:18 -0400 Subject: [PATCH 3/8] Updates --- aspnetcore/blazor/forms/input-components.md | 96 +++---------------- .../aspnetcore-9/includes/blazor.md | 32 +++++-- 2 files changed, 36 insertions(+), 92 deletions(-) diff --git a/aspnetcore/blazor/forms/input-components.md b/aspnetcore/blazor/forms/input-components.md index 67f31b4bdc36..8ece547c10ab 100644 --- a/aspnetcore/blazor/forms/input-components.md +++ b/aspnetcore/blazor/forms/input-components.md @@ -67,6 +67,18 @@ Input components provide default behavior for validating when a field is changed 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). +:::moniker range=">= aspnetcore-9.0" + +The component supports overriding the `type` attribute. For example, specify an [`` element of `type="range"`](https://developer.mozilla.org/docs/Web/HTML/Element/input/range) to create a range input that supports model binding and form validation, typically rendered as a slider or dial control rather than a text box: + +```razor + +``` + +If the user's browser doesn't support `type="range"`, the `` element gracefully degrades back to a default text box. + +:::moniker-end + :::moniker range=">= aspnetcore-5.0" For more information on the component, see . @@ -527,87 +539,3 @@ Assign a custom template to The ProductionDate field has an incorrect date value. :::moniker-end - -:::moniker range=">= aspnetcore-9.0" - -### Override `InputNumber` `type` attribute - -The `InputNumber` component supports overriding the `type` attribute, where the `{TYPE}` placeholder represents the `type` value: - -```razor - -``` - -For example, specify an [`` element of `type="range"`](https://developer.mozilla.org/docs/Web/HTML/Element/input/range) with an `InputNumber` component to create a range input that supports model binding and form validation, typically rendered as a slider or dial control rather than a text box: - -```razor - -``` - -If the user's browser doesn't support `type="range"`, the `` element gracefully degrades back to a default text box. - -In the following example, the `InputNumber` components set their `type` attributes to `range`, resulting in a set of three sliders or dial controls by typical browsers. - -`EngineForm.razor`: - -```razor -@page "/engine-form" -@inject ILogger Logger - - -
- -
-
- -
-
- -
-
- -
- - -@code { - [SupplyParameterFromForm] - private EngineSpecifications? Model { get; set; } - - protected override void OnInitialized() => Model ??= new(); - - private void Submit() - { - Logger.LogInformation( - "Nacelle Count = {NacelleCount}, Plasma Injector Count = " + - "{PlasmaInjectorCount}, Warp Field Coil Count = {WarpFieldCoilCount}", - Model?.PlasmaInjectorCount, Model?.WarpFieldCoilCount, - Model?.NacelleCount); - } - - public class Starship - { - [Required, Range(minimum: 2, maximum: 6)] - public int NacelleCount { get; set; } - - [Required, Range(minimum: 2, maximum: 8)] - public int PlasmaInjectorCount { get; set; } - - [Required, Range(minimum: 4, maximum: 20)] - public int WarpFieldCoilCount { get; set; } - } -} -``` - -:::moniker-end diff --git a/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md b/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md index 0195eca9c096..4eb2a2bde5b2 100644 --- a/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md +++ b/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md @@ -196,16 +196,32 @@ The default `OverscanCount` is 3. The following example increases the `OverscanC ### Override `InputNumber` `type` attribute -The `InputNumber` component now supports overriding the `type` attribute, where the `{TYPE}` placeholder represents the `type` value: +The `InputNumber` component now supports overriding the `type` attribute. For example, specify an [`` element of `type="range"`](https://developer.mozilla.org/docs/Web/HTML/Element/input/range) to create a range input that supports model binding and form validation, typically rendered as a slider or dial control rather than a text box: ```razor - -``` + +
+ +
+
+ +
+ -For example, specify an [`` element of `type="range"`](https://developer.mozilla.org/docs/Web/HTML/Element/input/range) to create a range input that supports model binding and form validation, typically rendered as a slider or dial control rather than a text box: +@code { + [SupplyParameterFromForm] + private EngineSpecifications? Model { get; set; } -```razor - -``` + protected override void OnInitialized() => Model ??= new(); -For more information and an example use in a component, see . + public class Starship + { + [Required, Range(minimum: 2, maximum: 6)] + public int NacelleCount { get; set; } + } +} +``` From 548c6a18425fd2bb4a870250b6efb18648d3a06f Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Fri, 6 Sep 2024 14:36:36 -0400 Subject: [PATCH 4/8] Updates --- aspnetcore/release-notes/aspnetcore-9/includes/blazor.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md b/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md index 4eb2a2bde5b2..f942a5d8ba48 100644 --- a/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md +++ b/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md @@ -218,7 +218,7 @@ The `InputNumber` component now supports overriding the `type` attribute. For ex protected override void OnInitialized() => Model ??= new(); - public class Starship + public class EngineSpecifications { [Required, Range(minimum: 2, maximum: 6)] public int NacelleCount { get; set; } From 2ffc7b76c1504137bb1008c23459e834468328d7 Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Fri, 6 Sep 2024 14:43:16 -0400 Subject: [PATCH 5/8] Updates --- aspnetcore/release-notes/aspnetcore-9/includes/blazor.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md b/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md index f942a5d8ba48..580d00969166 100644 --- a/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md +++ b/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md @@ -218,6 +218,11 @@ The `InputNumber` component now supports overriding the `type` attribute. For ex protected override void OnInitialized() => Model ??= new(); + private void Submit() + { + ... + } + public class EngineSpecifications { [Required, Range(minimum: 2, maximum: 6)] From 45d24276942338d126dccb47e1835e5a5bbd3297 Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Fri, 6 Sep 2024 14:48:32 -0400 Subject: [PATCH 6/8] Updates --- aspnetcore/release-notes/aspnetcore-9/includes/blazor.md | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md b/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md index 580d00969166..f22d74c042a8 100644 --- a/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md +++ b/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md @@ -196,7 +196,7 @@ The default `OverscanCount` is 3. The following example increases the `OverscanC ### Override `InputNumber` `type` attribute -The `InputNumber` component now supports overriding the `type` attribute. For example, specify an [`` element of `type="range"`](https://developer.mozilla.org/docs/Web/HTML/Element/input/range) to create a range input that supports model binding and form validation, typically rendered as a slider or dial control rather than a text box: +The component now supports overriding the `type` attribute. For example, specify an [`` element of `type="range"`](https://developer.mozilla.org/docs/Web/HTML/Element/input/range) to create a range input that supports model binding and form validation, typically rendered as a slider or dial control rather than a text box: ```razor @@ -218,10 +218,7 @@ The `InputNumber` component now supports overriding the `type` attribute. For ex protected override void OnInitialized() => Model ??= new(); - private void Submit() - { - ... - } + private void Submit() {} public class EngineSpecifications { From 5e9488d4919bed4ded1c3dad54760953110d95e6 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Fri, 6 Sep 2024 16:54:24 -0400 Subject: [PATCH 7/8] Updates --- aspnetcore/blazor/forms/input-components.md | 4 +--- aspnetcore/release-notes/aspnetcore-9/includes/blazor.md | 4 ++-- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/aspnetcore/blazor/forms/input-components.md b/aspnetcore/blazor/forms/input-components.md index 8ece547c10ab..ee5b362a5383 100644 --- a/aspnetcore/blazor/forms/input-components.md +++ b/aspnetcore/blazor/forms/input-components.md @@ -69,14 +69,12 @@ Some components include useful parsing logic. For example, component supports overriding the `type` attribute. For example, specify an [`` element of `type="range"`](https://developer.mozilla.org/docs/Web/HTML/Element/input/range) to create a range input that supports model binding and form validation, typically rendered as a slider or dial control rather than a text box: +The component supports the [`type="range"` attribute](https://developer.mozilla.org/docs/Web/HTML/Element/input/range), which creates a range input that supports model binding and form validation, typically rendered as a slider or dial control rather than a text box: ```razor ``` -If the user's browser doesn't support `type="range"`, the `` element gracefully degrades back to a default text box. - :::moniker-end :::moniker range=">= aspnetcore-5.0" diff --git a/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md b/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md index f22d74c042a8..705f470701b2 100644 --- a/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md +++ b/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md @@ -194,9 +194,9 @@ The default `OverscanCount` is 3. The following example increases the `OverscanC ``` -### Override `InputNumber` `type` attribute +### `InputNumber` component supports `type="range"` attribute -The component now supports overriding the `type` attribute. For example, specify an [`` element of `type="range"`](https://developer.mozilla.org/docs/Web/HTML/Element/input/range) to create a range input that supports model binding and form validation, typically rendered as a slider or dial control rather than a text box: +The component now supports the [`type="range"` attribute](https://developer.mozilla.org/docs/Web/HTML/Element/input/range), which creates a range input that supports model binding and form validation, typically rendered as a slider or dial control rather than a text box: ```razor From 378ef5264bf06c9a358fce7da5917206c62d0375 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Fri, 6 Sep 2024 16:58:25 -0400 Subject: [PATCH 8/8] Updates --- aspnetcore/release-notes/aspnetcore-9/includes/blazor.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md b/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md index 705f470701b2..733dbfde84cf 100644 --- a/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md +++ b/aspnetcore/release-notes/aspnetcore-9/includes/blazor.md @@ -194,7 +194,7 @@ The default `OverscanCount` is 3. The following example increases the `OverscanC ``` -### `InputNumber` component supports `type="range"` attribute +### `InputNumber` component supports the `type="range"` attribute The component now supports the [`type="range"` attribute](https://developer.mozilla.org/docs/Web/HTML/Element/input/range), which creates a range input that supports model binding and form validation, typically rendered as a slider or dial control rather than a text box: