Blazor Inputselect onchange event doesnot work

Question

Here I am using blazor server app and trying to populate city dropdownlist according to change in country dropdownlist using @onchange="countyClicked" event and bind the dropdown with the model.

Now the problem is that the onchange event doesnot work and the city dropdownlist does not get populated on onchange of country dropdownlist.

Below is my component html for dropdownlist


   
   @foreach (var item in Countries)
   {
      
   }



   @foreach (var city in Cities)
   {
      
   }







public void countyClicked(ChangeEventArgs args)
{
   var getCountryId = args.Value.ToString();
   int.TryParse(getCountryId, out int countryId);
   Cities = mainService.GetAllCityByCountryId(countryId);
}

enet · Accepted Answer

Note: @onchange is a compiler directive used with Html elements. It is not applicable to Razor components. The InputSelect component, however, uses the change event internally.

The following code sample demonstrates how you should populate your two InputSelect components, how they interact with each other, and how they interact with the rest of the form. Note also that I use validation to force the user to select a country and then a city, without which the form cannot be "submitted." Copy the code into your Index page and test.

Index.razor

@page "/"


@using System.ComponentModel.DataAnnotations;


    

    
        Enter your Name: 
        
        
        

    
    
        Select your country: 
        
            
            @foreach (var country in countryList)
            {
                
            }
        
        
    
    @if (cityList != null && cityList.Any())
    {
    
        Select your city: 
        
            
            @foreach (var city in cityList)
            {
                
            }
        
        
    
    }
    
        
    



@code
    {

    private EditContext EditContext;
    private Person person = new Person() { };

    private List countryList = new List
    {
        new Country
        {
            ID = 1, Name="USA",
            Cities = new List {  new City { ID = 1, Name = "City1" },
                        new City { ID = 2, Name = "City2" } }
        },
        new Country
        {
            ID =2, Name="Germany",
            Cities =  new List {  new City { ID = 3, Name = "City3" },
                        new City { ID = 4, Name = "City4" } }
        },
       new Country {ID =3, Name="France",
            Cities = new List  {  new City { ID = 5, Name = "City5" },
                        new City { ID =6, Name = "City6" } } },
       new Country {ID =4, Name="UK",
           Cities = new List  {
                       new City { ID = 7, Name = "City7" },
                       new City { ID =8, Name = "City8" },
                       new City { ID = 9, Name = "City9" },
                       new City { ID = 10, Name = "City10" }} },
       new Country {ID =5, Name="Russia",
           Cities =  new List  {  new City { ID = 11, Name = "City11" } }}
    };


    private IQueryable cityList;

    private void HandleValidSubmit()
    {
        Console.WriteLine("Submitting");
    }
    protected override void OnInitialized()
    {
        EditContext = new EditContext(person);

        base.OnInitialized();
    }


    private void SelectCities(int? id)
    {
        person.CityID = null;

        cityList = (from country in countryList
                    where country.ID == id
                    from city in country.Cities
                    select city).AsQueryable();
    }

    public class Country
    {
        public int ID { get; set; }
        public string Name { get; set; }

        public List Cities { get; set; }
    }

    public class City
    {
        public int ID { get; set; }
        public string Name { get; set; }


    }

    public class Person
    {
        public int ID { get; set; }

        [Required]
        public string Name { get; set; }

        [Required(ErrorMessage ="Please, select your country.")]
        public int? CountryID { get; set; }
        [Required(ErrorMessage = "Please, select your city.")]
        public int? CityID { get; set; }

    }

}

UPDATE:

ValueChanged="@((int? args) => { person.CountryID = args; SelectCities(args); })" do

ValueChanged is defined in the InputSelect component's class as an EventCallback. When you select an item in the select element, the `change` event is triggered. In JavaScript you can access the newly selected value through the event object. In Blazor (JSInterop is behind the scene), you code is passed the selected value in the parameter args (int? args), and your code should assign it to the bound filed (person.CountryID). This is equivalent to what you were trying to do by using `@onchange="countyClicked"`, which is correct when you use html element, but the InputSelect is a component, not html element.

SelectCities(args) is a method that is called when you select a value in the Country InputSelect, whose parameter is the selected value; that is, the id of the selected country; and whose role is to filter the cities according to country selected.

Read the question When to use ValueChanged and ValueExpression in Blazor? and my answer Read my answer here See my answer here and here

Blazor Inputselect onchange event doesnot work

Answers (2)

Index.razor

Related Questions