Asked by:
How to Create Cascading Dropdown In Blazor Server

Question
-
User2041008840 posted
Hello,
I want to build cascading dropdownlist for Country State City
any solution on itWednesday, March 18, 2020 5:12 PM
All replies
-
User475983607 posted
Hello,
I want to build cascading dropdownlist for Country State City
any solution on itHave you tried Google?
https://www.mikesdotnetting.com/article/319/cascading-dropdowns-with-blazor
If you need help it is customary to post your code, explain the expected results, and explain the actual results.
Wednesday, March 18, 2020 5:55 PM -
User2041008840 posted
this is on Blazor WebAssembly. Is it work on Blazor Server too ?
I tried this but UIChangeEvertArge not found in Blazor ServerThursday, March 19, 2020 2:13 AM -
User2041008840 posted
I tried something but its not working I really where is exact problem this I tried by putting breakpoint but no problem in code.
the country data load correctly after changing country it does not load state according to country.
razor<div class="form-group"> <label class="control-label">Country</label> <InputSelect class="form-control" @bind-Value="CountryID" @onchange="@DoStuff"> <option value="0">--select--</option> @foreach (var item in Countries) { <option value="@item.ID">@item.Name</option> } /**/ /**/ /**/ /**/ </InputSelect> </div> <InputText class="form-control" @bind-Value="CountryID" /> <div class="form-group"> <label class="control-label">State</label> <InputSelect class="form-control" @bind-Value="StateID"> @if (States == null || States.Length == 0) { <option value="0">--select--</option> } else { <option value="0">--select--</option> @foreach (var item in States) { <option value="@item.ID">@item.Name</option> } /**/ /**/ /**/ /**/ /**/ /**/ /**/ /**/ } /**/ </InputSelect> </div>
@code { string Name; bool Gender; string Email; string MobileNumber; string Address; string CountryID = "0"; string StateID; int CityID; // string cname; Country[] Countries; State[] States; City[] Cities; public Employee Employee { get; set; } Employee[] employees; protected override async Task OnInitializedAsync() { Employee = new Employee(); await load(); } protected async Task load() { if (Employee.States != null) { // CountryID = Employee.States.CountryID; // await LoadStates(CountryID); } Countries = await CountriesService.GetCountryAsync(); // States = await CountriesService.GetStateByCountryAsync(CountryID); employees = await EmployeesService.GetEmployeesAsync(); } protected async Task Insert() { Employee d = new Employee() { Name = Name, Gender = Gender, Email = Email, MobileNumber = MobileNumber, Address = Address, // CountryID = CountryID, // StateID = StateID, CityID = CityID, }; await EmployeesService.InsertEmployeesAsync(Employee); // NavigationManager.NavigateTo(nameof(Employees)); } //private async Task CountryHasChanged(int value) //{ // Employee.StateID = 0; // CountryID = value; // if (value != 0) // { // await LoadStates(value); // } //} async void DoStuff(ChangeEventArgs e) { // CountryID = e.Value.ToString(); //int val = (int)e.Value.ToString(); if (e.Value != null) { CountryID = e.Value.ToString(); int ID = Convert.ToInt32(CountryID); await LoadStates(CountryID); } else { CountryID = "0"; } if (int.TryParse(e.Value.ToString(), out Int32 id)) { //CountryID = id; // CountryID = id; // Employee.MobileNumber = id.ToString(); } else { // Employee.CountryID = 123; } //Employee.MobileNumber = e.Value.ToString(); //CountryID = Convert.ToInt32(val); //Employee.CountryID = e.Value; } public async Task LoadStates(string countryId) { States = await CountriesService.GetStateByCountryAsync(countryId); } }
Friday, March 20, 2020 5:16 AM