ASP.NET MVC4 with Razor - Filtering dropdownlist by value selected from another dropdownlist

问题

I have to filter the options of a dropdownlist by value selected from another dropdown. In my database I have a table with all countries and a table with all cities of the world with a FK to the respective country.

Here is a part of my view and my page:

And my controller methods (the GET method of the page, the loading of all countries and the loading of all cities of a country): (I removed the image)

I have to handle the "onchange" event of the first dropdownlist to modify all the options of the second (calling the LoadCities method in my controller and passing the value of the selected item of first drop) but I have no idea about how to do it.

Thank you for your help!!

UDPADE

Thank @Shyju for your advices but it still does not working. I am a student and I don't know much about the topic, here are the results: You can see that the Content-Length is 0, in fact the response panel is empty. Why the type is xml? What is "X-Requested-With"? How can I fix it?

回答1:

Use the onchange method (client side) of the first select and fill up seconds' options with an AJAX call.

回答2:

You can listen to the change event on the first dropdown(Country), read the value of the selected option and make an ajax call to your server to get the cities for that country.

$(function(){

  $("#Country").change(function(){

     var countryId = $(this).val();
     var url = "@Url.Action("LoadCities,"Country")"+countryId;

     $.getJSON(url,function(data){

         var options="";
         $.each(data,function(a,b){
           options+="<option value='"+ b.Value +"'>" + b.Text + "</option>";
         });        
         $("#City").html(options);
     });

  });

});

Now your LoadCities should return the list of citites as Json.

public ActionResult GetCities(int id)
{
   // I am hard coding a bunch of cities for demo. 
   // You may replace with your code which reads from your db table.
   var dummyCities = new List<SelectListItem>
   {
     new SelectListItem { Value="1", Text="Detroit"},
     new SelectListItem { Value="2", Text="Ann Arbor"},
     new SelectListItem { Value="3", Text="Austin"}
   };
   return Json(dummyCities,JsonRequestBehaviour.AllowGet);
}

回答3:

use javascript or jquery OnChange method. and pass the 1st dropdown Id and use ajax to call the method by passing dropdown Id.

来源：https://stackoverflow.com/questions/36812426/asp-net-mvc4-with-razor-filtering-dropdownlist-by-value-selected-from-another