How to implement a cascading dropdown menu using InputSelect in Blazor?
Nov 23, 2020
Blazor,
ASP .NET Core Blazor,
Blazor FAQ,
cascading dropdown using inputSelect blazor,
927 Views
This code will help you to understand how to implement a cascading dropdown menu using InputSelect in Blazor.
In the cascading DropDown menu, the value of first DropDown list depends on the value of the second DropDownList. In the following example, a country is selected from the countries dropdown menu, and respective states will be loaded in the state dropdown menu.
<EditForm Model="@model">
<label>Country: </label>
<InputSelect @bind-Value="@model.Country">
<option value="1">Australia</option>
<option value="2">United States</option>
</InputSelect>
<label> State: </label>
<InputSelect @bind-Value="@model.State">
@if (model.Country == "1" || model.Country == null)
{
<option value="101">New York</option>
<option value="102">Virginia</option>
<option value="103">Washington</option>
}
else if (model.Country == "2")
{
<option value="104">Queensland</option>
<option value="105">Tasmania</option>
<option value="106">Victoria</option>
}
</InputSelect>
</EditForm>
@code {
public Models model = new Models();
public class Models
{
public string Country { get; set; }
public string State { get; set; }
}
}

