locked
How to Create Cascading Dropdown In Blazor Server RRS feed

  • Question

  • User2041008840 posted

    Hello,

    I want to build cascading dropdownlist for Country State City 
    any solution on it

    Wednesday, March 18, 2020 5:12 PM

All replies

  • User475983607 posted

    Hello,

    I want to build cascading dropdownlist for Country State City 
    any solution on it

    Have 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 Server

    Thursday, 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 { getset; }
        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