InputRadioGroup built-in razor component was introduced from .Net5. This built-in component can be used either in the Blazor Server application or the Blazor WebAssembly application.
Pages/Index.razor:
Create A Blazor WebAssembly Sample Application:
Let's create a sample Blazor WebAssembly application in which we are going to implement some samples to understand the InputRadioGroup component. For application development can begin with any type of IDE but the most recommended are Visual Studio 2019(Version 16.8.* only latest can build the .net5 application) or Visual Studio Code.
InputRadioGroup Implementation:
Now let's implement a sample to understand the InputRadioGroup.
Let's create a form model for binding values.
Models/Vehicle.cs:
namespace Radio_Group_Sample.Models { public class Vehicle { public string Name { get; set; } } }
- Here we created a simple model that will be used by the blazor form component 'EditForm'. The property 'Name' will be used by the InputRadioGroup component.
Pages/Index.razor:(Html Part)
@page "/" <div> <h4> vehicle Selected - @vehicle.Name </h4> <EditForm Model="vehicle"> <InputRadioGroup @bind-Value="vehicle.Name"> @foreach (var option in rdOptions) { <InputRadio Value="option" /> @option <br /> } </InputRadioGroup> </EditForm> </div>
- (Line: 6-11) The 'InputRadioGroup' component rendered. It's been configured by form model binding with property 'Name' this will carry the radio buttons data.
- (Line: 7-10) Looping the radio group options by using the 'InputRadio' component which is the child of InputRadioGroup component.
@code{ Vehicle vehicle = new Vehicle(){ Name = "auto" // default value }; List<string> rdOptions = new List<string> { "car", "bus", "auto" }; }
Nested InputRadioGroup:
Now let's create a sample that contains the nested InputRadioGroup component.
Let's create a form model of data binding.
Models/Gadget.cs:
namespace Radio_Group_Sample.Models { public class Gadget { public string Device {get;set;} public string RAMSpace{get; set;} public string Color{get;set;} } }Now let's update our Index.razor page with the nested InputRadioGroup component.
Pages/Index.razor:(Html Part)
@page "/" <div> <h4> Gadget Type - @gadget.Device </h4> <h4> RAM Space - @gadget.RAMSpace</h4> <h4> Color - @gadget.Color</h4> <EditForm Model="gadget"> <InputRadioGroup @bind-Value="gadget.Device"> @foreach (var option in gadgetOptions) { <InputRadio Value="option" /> @option <br /> } </InputRadioGroup> <br/> <span>Select Specs</span> <br/> <InputRadioGroup Name="ram" @bind-Value="gadget.RAMSpace"> <InputRadioGroup Name="color" @bind-Value="gadget.Color"> <InputRadio Name="ram" Value="@("4GB")" /> 4 GB <InputRadio Name="color" Value="@("Red")" />Red <br /> <InputRadio Name="ram" Value="@("8GB")" />8 GB <InputRadio Name="color" Value="@("Black")" /> Black <br /> </InputRadioGroup> </InputRadioGroup> </EditForm> </div>
- (Line: 17&18) Added nested InputRadioGroup components.
- For nested gets mapped their radio options using the 'Name' property.
@code{ Gadget gadget = new Gadget(); List<string> gadgetOptions = new List<string>{"Mobile", "Laptop"}; }
Apply Validation:
InputRadioGroup also supports the in-built form validation using the DataAnnotations.
First, let's add the DataAnnotation attributes to the form model
Model/Gadget.cs:
using System.ComponentModel.DataAnnotations; [Required(ErrorMessage="Ram should be selected")] public string RAMSpace{get; set;}
- Here we applied the required validation for the 'RAMSpace'.
Pages/Index.razor:
<EditForm Model="gadget"> <DataAnnotationsValidator /> <ValidationSummary /> <!-- code hidden for display purpose --> <button type="submit" class="btn btn-primary">submit</button> </EditForm>
- The 'DataAnnotationValidator' component enables the validation of the form.
- The 'ValidationSummary' component returns the error message summary.
- Button added to submit the form. After clicking the button only the form checks for validation.
Support Me!
Buy Me A Coffee
PayPal Me
Wrapping Up:
Hopefully, I think this article delivered some useful information about the InputRadioGroup Component in Blazor Application. I love to have your feedback, suggestions, and better techniques in the comment section below.
Comments
Post a Comment