diff --git a/aspnetcore/blazor/components/data-binding.md b/aspnetcore/blazor/components/data-binding.md index 73437b17c98e..e73ebbce9584 100644 --- a/aspnetcore/blazor/components/data-binding.md +++ b/aspnetcore/blazor/components/data-binding.md @@ -75,6 +75,94 @@ 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 `` 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 `` 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" + +

Bind Multiple inputExample

+ +

+ +

+ +

+ Selected Cars: @string.Join(", ", SelectedCars) +

+ +

+ +

+ + + Selected Cities: @string.Join(", ", SelectedCities) + + +@code { + public string[] SelectedCars { get; set; } = new string[] { }; + public string[] SelectedCities { get; set; } = new[] { "bal", "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 `` element options to C# object `null` values + +There's no sensible way to represent a ``'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 `` 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 +413,5 @@ For an alternative approach suited to sharing data in memory and across componen * * [Binding to radio buttons in a form](xref:blazor/forms-validation#radio-buttons) -* [Binding `` element options to C# object `null` values - -There's no sensible way to represent a ``'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 `` to a null value (dotnet/aspnetcore #23221)](https://github.com/dotnet/aspnetcore/pull/23221). - -::: moniker-end - ## Validation Summary and Validation Message components The 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):