Blazor Binding Support Multiple Options For - 'Select' HTML Element Or 'InpuSelect' Blazor Component[.NET 6.0 Feature]
In this article, we will explore the blazor application binding support multiple options for the 'Select' or 'InputSelect' which is .NET 6.0 feature.
Create A .Net6 Blazor WebAssembly Application:
To implement our demo let's create a .NET6 Blazor WebAssembly application. To work with .Net6 application's most recommended editors are 'Visual Studio 2022', 'Visual Studio Editor(.NET CLI commands)'. For this demo, I'm using Visual Studio Editor(Using .NET CLI command).
CLI command For Minimal API Project
dotnet new blazorwasm -o Your_Project_Name
dotnet new blazorwasm -o Your_Project_Name
Multiple Option Selection For HTML Select Element:
Now let's develop a small sample for the multiple option selection of the HTML 'Select' element. To enable multiple options selection for the 'Select' element key configurations are like 'Select' element should be decorated with the 'multiple' HTML attribute and its binding property should be an array type.
Let's create a blazor page component like 'Page1.razor'.
Page1.razor:(HTML Part)
@page "/page1" <p> <label> Select one or more colors: </label> <select @bind="colorsSelected" multiple> <option value="white">White</option> <option value="red">Red</option> <option value="yellow">Yellow</option> <option value="blue">Blue</option> <option value="black">Black</option> </select> </p> <p> <ul> @foreach (var item in colorsSelected) { <li>@item</li> } </ul> </p>
- (Line: 7) The 'select' element is decorated with a 'multiple' HTML attribute which is a key configuration. The '@bind' assigned with a variable like 'colorsSelected' should be an array type.
- (Line: 17-20) Rendering the selected multiple options.
@code { string[] colorsSelected = new[] { "white", "black" }; }
- The 'colorsSelected' is the binding property of the 'select' element.
Multiple Option Selection For InputSelect Blazor Component:
Another way to get multiple option selection abilities is by using the 'InputSelect' blazor component. So key configuration to make our 'InputSelect' as multi-selection is by assigning its binding property as an array type. By using 'InputSelect' we have the ability to apply validation on the option selected with the help of blazor validations.
So let's write one more sample using the 'InputSelect' component and also we will apply validation to it.
So let's create a model like 'Color'.
Color.cs:
using System.ComponentModel.DataAnnotations public class Color { public Color() { SelectedColors = new string[]{}; } [Required, MinLength(2), MaxLength(3)] public string[] SelectedColors { get; set; } }
- The 'SelectedColors' is an array type property that will be used for Blazor form field binding. Here we applied set validation rules like 'Required', 'MinLength', 'MaxLength'. Here 'MinLength' and 'MaxLength' check for the count of array type.
Page2.razor:(HTML Part)
@page "/page2" <EditForm EditContext="@editContext" OnValidSubmit="@HandleValidSubmit"> <DataAnnotationsValidator /> <ValidationSummary /> <p> <label> Select classifications (Minimum: 2, Maximum: 3): <InputSelect @bind-Value="color.SelectedColors"> <option value="white">White</option> <option value="red">Red</option> <option value="yellow">Yellow</option> <option value="blue">Blue</option> <option value="black">Black</option> </InputSelect> </label> </p> <button type="submit">Submit</button> </EditForm>
- (Line: 10) The 'color.SelectedColors' is an array type that makes our 'InputSelect' a multi-selector.
- (Line: 4) Added the 'DataAnnotationValidator' component to fire up our form modal validations.
@code { EditContext editContext; private Color color = new(); protected override void OnInitialized() { editContext = new(color); } private void HandleValidSubmit() { // logic for saving form data } }
Support Me!
Buy Me A Coffee
PayPal Me
Video Session:
Wrapping Up:
Hopefully, I think this article delivered some useful information on multiple option selection by the 'InputSelect' in the Blazor application. I love to have your feedback, suggestions, and better techniques in the comment section below.
Comments
Post a Comment