From ae597e87bf526e43cac922253f5380aa58517193 Mon Sep 17 00:00:00 2001
From: guardrex <1622880+guardrex@users.noreply.github.com>
Date: Mon, 19 Jul 2021 09:49:00 -0500
Subject: [PATCH 1/5] Binding select multiple

---
 aspnetcore/blazor/components/data-binding.md  | 86 +++++++++++++++-
 .../blazor/components/event-handling.md       |  6 +-
 aspnetcore/blazor/forms-validation.md         | 99 ++++++++++++++-----
 3 files changed, 163 insertions(+), 28 deletions(-)

diff --git a/aspnetcore/blazor/components/data-binding.md b/aspnetcore/blazor/components/data-binding.md
index 73437b17c98e..101c9b54a8d4 100644
--- a/aspnetcore/blazor/components/data-binding.md
+++ b/aspnetcore/blazor/components/data-binding.md
@@ -75,6 +75,90 @@ Razor attribute binding is case sensitive:
 * `@bind` and `@bind:event` are valid.
 * `@Bind`/`@Bind:Event` (capital letters `B` and `E`) or `@BIND`/`@BIND:EVENT` (all capital letters) **are invalid**.
 
+::: moniker range=">= aspnetcore-6.0"
+
+## Multiple option selection with `<input>` elements
+
+Binding supports [`multiple`](https://developer.mozilla.org/docs/Web/HTML/Attributes/multiple) option selection with `<input>` elements. The [`@onchange`](xref:mvc/views/razor#onevent) event provides an array of the selected elements via [event arguments (`ChangeEventArgs`)](xref:blazor/components/event-handling#event-arguments). The value must be bound to an array type.
+
+`Pages/BindMultipleInput.razor`:
+
+```razor
+@page "/bind-multiple-input"
+
+<h1>Bind Multiple <code>input</code>Example</h1>
+
+<p>
+    <label>
+        Select one or more cars: 
+        <select @onchange="SelectedCarsChanged" multiple>
+            <option value="volvo">Volvo</option>
+            <option value="saab">Saab</option>
+            <option value="opel">Opel</option>
+            <option value="audi">Audi</option>
+        </select>
+    </label>
+</p>
+
+<p>
+    Selected Cars: @string.Join(", ", SelectedCars)
+</p>
+
+<p>
+    <label>
+        Select one or more cities: 
+        <select @bind="SelectedCities" multiple>
+            <option value="@("\"sf\"")">San Francisco</option>
+            <option value="@("\"la\"")">Los Angeles</option>
+            <option value="@("\"pdx\"")">Portland</option>
+            <option value="@("\"sea\"")">Seattle</option>
+        </select>
+    </label>
+</p>
+
+<span>
+    Selected Cities: @string.Join(", ", SelectedCities)
+</span>
+
+@code {
+    public string[] SelectedCars { get; set; } = new string[] { };
+    public string[] SelectedCities { get; set; } = new[] { "\"sf\"", "\"sea\"" };
+
+    void SelectedCarsChanged(ChangeEventArgs e)
+    {
+        SelectedCars = (string[])e.Value;
+    }
+}
+```
+
+For information on how empty strings and `null` values are handled in data binding, see the [Binding `<select>` element options to C# object `null` values](#binding-select-element-options-to-c-object-null-values) section.
+
+::: moniker-end
+
+## Binding `<select>` element options to C# object `null` values
+
+There's no sensible way to represent a `<select>` element option value as a C# object `null` value, because:
+
+* HTML attributes can't have `null` values. The closest equivalent to `null` in HTML is absence of the HTML `value` attribute from the `<option>` element.
+* When selecting an `<option>` with no `value` attribute, the browser treats the value as the *text content* of that `<option>`'s element.
+
+The Blazor framework doesn't attempt to suppress the default behavior because it would involve:
+
+* Creating a chain of special-case workarounds in the framework.
+* Breaking changes to current framework behavior.
+
+::: moniker range=">= aspnetcore-5.0"
+
+The most plausible `null` equivalent in HTML is an *empty string* `value`. The Blazor framework handles `null` to empty string conversions for two-way binding to a `<select>`'s value.
+
+::: moniker-end
+
+::: moniker range="< aspnetcore-5.0"
+
+The Blazor framework doesn't automatically handle `null` to empty string conversions when attempting two-way binding to a `<select>`'s value. For more information, see [Fix binding `<select>` to a null value (dotnet/aspnetcore #23221)](https://github.com/dotnet/aspnetcore/pull/23221).
+
+::: moniker-end
+
 ## Unparsable values
 
 When a user provides an unparsable value to a databound element, the unparsable value is automatically reverted to its previous value when the bind event is triggered.
@@ -325,5 +409,5 @@ For an alternative approach suited to sharing data in memory and across componen
 
 * <xref:blazor/forms-validation>
 * [Binding to radio buttons in a form](xref:blazor/forms-validation#radio-buttons)
-* [Binding `<select>` element options to C# object `null` values in a form](xref:blazor/forms-validation#binding-select-element-options-to-c-object-null-values)
+* [Binding `InputSelect` options to C# object `null` values](xref:blazor/forms-validation#binding-inputselect-options-to-c-object-null-values)
 * [ASP.NET Core Blazor event handling: `EventCallback` section](xref:blazor/components/event-handling#eventcallback)
diff --git a/aspnetcore/blazor/components/event-handling.md b/aspnetcore/blazor/components/event-handling.md
index e5c5c8932479..8571551b7a2d 100644
--- a/aspnetcore/blazor/components/event-handling.md
+++ b/aspnetcore/blazor/components/event-handling.md
@@ -157,9 +157,9 @@ Custom events with custom event arguments are generally enabled with the followi
 
    ```html
    <script>
-       Blazor.registerCustomEventType('customevent', {
-           createEventArgs: eventArgsCreator;
-       });
+     Blazor.registerCustomEventType('customevent', {
+       createEventArgs: eventArgsCreator;
+     });
    </script>
    ```
 
diff --git a/aspnetcore/blazor/forms-validation.md b/aspnetcore/blazor/forms-validation.md
index ee7ee0955a18..269905316cd4 100644
--- a/aspnetcore/blazor/forms-validation.md
+++ b/aspnetcore/blazor/forms-validation.md
@@ -251,6 +251,81 @@ In the following example:
 > [!NOTE]
 > Changing the <xref:Microsoft.AspNetCore.Components.Forms.EditContext> after its assigned is **not** supported.
 
+::: moniker range=">= aspnetcore-6.0"
+
+## Multiple option selection with the `InputSelect` component
+
+Binding supports [`multiple`](https://developer.mozilla.org/docs/Web/HTML/Attributes/multiple) option selection with the <xref:Microsoft.AspNetCore.Components.Forms.InputSelect%601> component. The [`@onchange`](xref:mvc/views/razor#onevent) event provides an array of the selected options via [event arguments (`ChangeEventArgs`)](xref:blazor/components/event-handling#event-arguments). The value must be bound to an array type, and binding to an array type makes the [`multiple`](https://developer.mozilla.org/docs/Web/HTML/Attributes/multiple) attribute optional on the <xref:Microsoft.AspNetCore.Components.Forms.InputSelect%601> tag.
+
+In the following example, the user must select at least two starship classifications but no more than three classifications.
+
+`Pages/BindMultipleWithInputSelect.razor`:
+
+```razor
+@page "/bind-multiple-with-inputselect"
+@using System.ComponentModel.DataAnnotations 
+@using Microsoft.Extensions.Logging
+@inject ILogger<BindMultipleWithInputSelect> Logger 
+
+<h1>Bind Multiple <code>InputSelect</code>Example</h1>
+
+<EditForm EditContext="@editContext" OnValidSubmit="@HandleValidSubmit">
+    <DataAnnotationsValidator />
+    <ValidationSummary />
+
+    <p>
+        <label>
+            Select one or more classifications (Minimum: 2, Maximum: 3):
+            <InputSelect @bind-Value="starship.SelectedClassification">
+                <option value="@Classification.Exploration">Exploration</option>
+                <option value="@Classification.Diplomacy">Diplomacy</option>
+                <option value="@Classification.Defense">Defense</option>
+                <option value="@Classification.Research">Research</option>
+            </InputSelect>
+        </label>
+    </p>
+
+    <button type="submit">Submit</button>
+</EditForm>
+
+<p>
+    Selected Classifications: 
+    @string.Join(", ", starship.SelectedClassification)
+</p>
+
+@code {
+    private EditContext editContext;
+    private Starship starship = new();
+
+    protected override void OnInitialized()
+    {
+        editContext = new(starship);
+    }
+
+    private void HandleValidSubmit()
+    {
+        Logger.LogInformation("HandleValidSubmit called");
+    }
+
+    private class Starship
+    {
+        [Required, MinLength(2), MaxLength(3)]
+        public Classification[] SelectedClassification { get; set; } =
+            new[] { Classification.Diplomacy };
+    }
+
+    private enum Classification { Exploration, Diplomacy, Defense, Research }
+}
+```
+
+For information on how empty strings and `null` values are handled in data binding, see the [Binding `InputSelect` options to C# object `null` values](#binding-inputselect-options-to-c-object-null-values) section.
+
+::: moniker-end
+
+## Binding `InputSelect` options to C# object `null` values
+
+For information on how empty strings and `null` values are handled in data binding, see <xref:blazor/components/data-binding#binding-select-element-options-to-c-object-null-values>.
+
 ::: moniker range=">= aspnetcore-5.0"
 
 ## Display name support
@@ -1110,30 +1185,6 @@ The following `RadioButtonExample` component uses the preceding `InputRadio` com
 
 ::: moniker-end
 
-## Binding `<select>` element options to C# object `null` values
-
-There's no sensible way to represent a `<select>` element option value as a C# object `null` value, because:
-
-* HTML attributes can't have `null` values. The closest equivalent to `null` in HTML is absence of the HTML `value` attribute from the `<option>` element.
-* When selecting an `<option>` with no `value` attribute, the browser treats the value as the *text content* of that `<option>`'s element.
-
-The Blazor framework doesn't attempt to suppress the default behavior because it would involve:
-
-* Creating a chain of special-case workarounds in the framework.
-* Breaking changes to current framework behavior.
-
-::: moniker range=">= aspnetcore-5.0"
-
-The most plausible `null` equivalent in HTML is an *empty string* `value`. The Blazor framework handles `null` to empty string conversions for two-way binding to a `<select>`'s value.
-
-::: moniker-end
-
-::: moniker range="< aspnetcore-5.0"
-
-The Blazor framework doesn't automatically handle `null` to empty string conversions when attempting two-way binding to a `<select>`'s value. For more information, see [Fix binding `<select>` to a null value (dotnet/aspnetcore #23221)](https://github.com/dotnet/aspnetcore/pull/23221).
-
-::: moniker-end
-
 ## Validation Summary and Validation Message components
 
 The <xref:Microsoft.AspNetCore.Components.Forms.ValidationSummary> component summarizes all validation messages, which is similar to the [Validation Summary Tag Helper](xref:mvc/views/working-with-forms#the-validation-summary-tag-helper):

From a36cd15af87ce560bf9c238092f50fd26c05b60b Mon Sep 17 00:00:00 2001
From: guardrex <1622880+guardrex@users.noreply.github.com>
Date: Tue, 20 Jul 2021 04:13:27 -0500
Subject: [PATCH 2/5] Updates

---
 aspnetcore/blazor/components/data-binding.md | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/aspnetcore/blazor/components/data-binding.md b/aspnetcore/blazor/components/data-binding.md
index 101c9b54a8d4..31584d9f3dd4 100644
--- a/aspnetcore/blazor/components/data-binding.md
+++ b/aspnetcore/blazor/components/data-binding.md
@@ -92,10 +92,11 @@ Binding supports [`multiple`](https://developer.mozilla.org/docs/Web/HTML/Attrib
     <label>
         Select one or more cars: 
         <select @onchange="SelectedCarsChanged" multiple>
-            <option value="volvo">Volvo</option>
-            <option value="saab">Saab</option>
-            <option value="opel">Opel</option>
             <option value="audi">Audi</option>
+            <option value="jeep">Jeep</option>
+            <option value="opel">Opel</option>
+            <option value="saab">Saab</option>
+            <option value="volvo">Volvo</option>
         </select>
     </label>
 </p>
@@ -108,9 +109,10 @@ Binding supports [`multiple`](https://developer.mozilla.org/docs/Web/HTML/Attrib
     <label>
         Select one or more cities: 
         <select @bind="SelectedCities" multiple>
-            <option value="@("\"sf\"")">San Francisco</option>
+            <option value="@("\"bal\"")">Baltimore</option>
             <option value="@("\"la\"")">Los Angeles</option>
             <option value="@("\"pdx\"")">Portland</option>
+            <option value="@("\"sf\"")">San Francisco</option>
             <option value="@("\"sea\"")">Seattle</option>
         </select>
     </label>
@@ -122,7 +124,7 @@ Binding supports [`multiple`](https://developer.mozilla.org/docs/Web/HTML/Attrib
 
 @code {
     public string[] SelectedCars { get; set; } = new string[] { };
-    public string[] SelectedCities { get; set; } = new[] { "\"sf\"", "\"sea\"" };
+    public string[] SelectedCities { get; set; } = new[] { "\"bal\"", "\"sea\"" };
 
     void SelectedCarsChanged(ChangeEventArgs e)
     {

From b7746c905c027d655729026eee0cb5b399857f20 Mon Sep 17 00:00:00 2001
From: Luke Latham <1622880+guardrex@users.noreply.github.com>
Date: Wed, 21 Jul 2021 21:20:13 -0500
Subject: [PATCH 3/5] Update aspnetcore/blazor/components/data-binding.md

Co-authored-by: Mackinnon Buck <mackinnon.buck@gmail.com>
---
 aspnetcore/blazor/components/data-binding.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/aspnetcore/blazor/components/data-binding.md b/aspnetcore/blazor/components/data-binding.md
index 31584d9f3dd4..3f271e05bdb0 100644
--- a/aspnetcore/blazor/components/data-binding.md
+++ b/aspnetcore/blazor/components/data-binding.md
@@ -109,11 +109,11 @@ Binding supports [`multiple`](https://developer.mozilla.org/docs/Web/HTML/Attrib
     <label>
         Select one or more cities: 
         <select @bind="SelectedCities" multiple>
-            <option value="@("\"bal\"")">Baltimore</option>
-            <option value="@("\"la\"")">Los Angeles</option>
-            <option value="@("\"pdx\"")">Portland</option>
-            <option value="@("\"sf\"")">San Francisco</option>
-            <option value="@("\"sea\"")">Seattle</option>
+            <option value="bal">Baltimore</option>
+            <option value="la">Los Angeles</option>
+            <option value="pdx">Portland</option>
+            <option value="sf">San Francisco</option>
+            <option value="sea">Seattle</option>
         </select>
     </label>
 </p>

From d2d57531fe1d5e6971fd52fc694bdb5a0cb5ec08 Mon Sep 17 00:00:00 2001
From: Luke Latham <1622880+guardrex@users.noreply.github.com>
Date: Wed, 21 Jul 2021 21:20:56 -0500
Subject: [PATCH 4/5] Update aspnetcore/blazor/components/data-binding.md

Co-authored-by: Mackinnon Buck <mackinnon.buck@gmail.com>
---
 aspnetcore/blazor/components/data-binding.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aspnetcore/blazor/components/data-binding.md b/aspnetcore/blazor/components/data-binding.md
index 3f271e05bdb0..9367aed9bf99 100644
--- a/aspnetcore/blazor/components/data-binding.md
+++ b/aspnetcore/blazor/components/data-binding.md
@@ -124,7 +124,7 @@ Binding supports [`multiple`](https://developer.mozilla.org/docs/Web/HTML/Attrib
 
 @code {
     public string[] SelectedCars { get; set; } = new string[] { };
-    public string[] SelectedCities { get; set; } = new[] { "\"bal\"", "\"sea\"" };
+    public string[] SelectedCities { get; set; } = new[] { "bal", "sea" };
 
     void SelectedCarsChanged(ChangeEventArgs e)
     {

From 12309be4967589e00246843487b7d8679aca6d5a Mon Sep 17 00:00:00 2001
From: guardrex <1622880+guardrex@users.noreply.github.com>
Date: Wed, 28 Jul 2021 05:43:05 -0500
Subject: [PATCH 5/5] Note feature for Preview 7 (will be reverted later)

---
 aspnetcore/blazor/components/data-binding.md | 2 ++
 aspnetcore/blazor/forms-validation.md        | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/aspnetcore/blazor/components/data-binding.md b/aspnetcore/blazor/components/data-binding.md
index 9367aed9bf99..e73ebbce9584 100644
--- a/aspnetcore/blazor/components/data-binding.md
+++ b/aspnetcore/blazor/components/data-binding.md
@@ -79,6 +79,8 @@ Razor attribute binding is case sensitive:
 
 ## Multiple option selection with `<input>` elements
 
+*This feature applies to ASP.NET Core 6.0 Preview 7 or later. ASP.NET Core 6.0 is scheduled for release later this year.*
+
 Binding supports [`multiple`](https://developer.mozilla.org/docs/Web/HTML/Attributes/multiple) option selection with `<input>` elements. The [`@onchange`](xref:mvc/views/razor#onevent) event provides an array of the selected elements via [event arguments (`ChangeEventArgs`)](xref:blazor/components/event-handling#event-arguments). The value must be bound to an array type.
 
 `Pages/BindMultipleInput.razor`:
diff --git a/aspnetcore/blazor/forms-validation.md b/aspnetcore/blazor/forms-validation.md
index 269905316cd4..587f6b021819 100644
--- a/aspnetcore/blazor/forms-validation.md
+++ b/aspnetcore/blazor/forms-validation.md
@@ -255,6 +255,8 @@ In the following example:
 
 ## Multiple option selection with the `InputSelect` component
 
+*This feature applies to ASP.NET Core 6.0 Preview 7 or later. ASP.NET Core 6.0 is scheduled for release later this year.*
+
 Binding supports [`multiple`](https://developer.mozilla.org/docs/Web/HTML/Attributes/multiple) option selection with the <xref:Microsoft.AspNetCore.Components.Forms.InputSelect%601> component. The [`@onchange`](xref:mvc/views/razor#onevent) event provides an array of the selected options via [event arguments (`ChangeEventArgs`)](xref:blazor/components/event-handling#event-arguments). The value must be bound to an array type, and binding to an array type makes the [`multiple`](https://developer.mozilla.org/docs/Web/HTML/Attributes/multiple) attribute optional on the <xref:Microsoft.AspNetCore.Components.Forms.InputSelect%601> tag.
 
 In the following example, the user must select at least two starship classifications but no more than three classifications.