How to get a Json object to drop out?

Question

after you try to do a lot more with cascading, I decided to do it with jQuery.

This is in my cityController

public ActionResult States(int id) { AcademicERP.Models.AcademicERPDataContext dc = new AcademicERPDataContext(); var states = from s in dc.States where s.CountryID == id select s; return Json(states.ToList()); } 

and I'm trying to call him from

city ​​/ create page with script

  var ddlCountry; var ddlStateID; function pageLoad() { ddlStateID = $get("StateID"); ddlCountry = $get("CountryID"); $addHandler(ddlCountry, "change", bindOptions); bindOptions(); } function bindOptions() { ddlStateID.options.length = 0; var CountryID = ddlCountry.value; if (CountryID) { // some logic to call $.getJSON() } 

and I have DD in views

 <%= Html.DropDownList("CountryID") %> <select name="StateID" id="StateID"></select> 

so what will be the getJSON parameter? I mean blog . but does not work.

Answer 1

Like this:

 function bindOptions() { ddlStateID.options.length = 0; var CountryID = ddlCountry.value; if (CountryID) { var url = "/<YOUR CONTROLLER NAME>/States/" + CountryID; $.get(url, function(data) { // do you code to bind the result back to your drop down }); } } 

OR, instead of using pageLoad, I would use it exclusively with jQuery:

 $(document).ready(function() { $("#CountryID").change(function() { var strCountryIDs = ""; $("#CountryID option:selected").each(function() { strCountryIDs += $(this)[0].value; }); var url = "/<YOUR CONTROLLER NAME>/States/" + strCountryIDs; $.getJSON(url, null, function(data) { $("#StateID").empty(); $.each(data, function(index, optionData) { $("#StateID").append("<option value='" + optionData.StateID + "'>" + optionData.StateName + "</option>"); }); }); }); }); 

Something like that...