Jquery and ajax not responding for cascading dropdown

Question

I am having Problem with the AJAX and Jquery Response for the DropDown Cascading. I am trying to Change the State as per the Selection of Country list from the dropdown. I think I am having some problem with my Script.

View:

@using (Html.BeginForm("Submit", "FeedBack", FormMethod.Post)){ @Html.ValidationSummary(true) @Html.AntiForgeryToken() <div class="editor-label"> @Html.LabelFor(model => model.countryid, "Country") </div> <div class="editor-field"> @Html.DropDownListFor(model => model.countryid, @ViewBag.CountryID as SelectList, "Select Country") @Html.ValidationMessageFor(model => model.countryid) </div> <div class="editor-label"> @Html.LabelFor(model => model.stateid, "State") </div> <div class="editor-field"> @Html.DropDownListFor(model => model.stateid, @ViewBag.StateID as SelectList, "Select State") @Html.ValidationMessageFor(model => model.stateid) </div> <input type="submit" value="Create" /> } @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryval") <script type="javascript"> $(document).ready(function () { $("#countryid").change(function () { // this will call when Country Dropdown select change var countryid = parseInt($("#cointryid").val()); if (!isNaN(countryid)) { var ddState = $("#stateid"); ddState.empty(); // this line is for clear all items from State dropdown ddState.append($("<option></option").val("").html("Select State")); // Here I will call Controller Action via Jquery to load State for selected Country $.ajax({ url: "@Url.Action("GetStates", "Feedback")", type: "GET", data: { countryid: countryid }, dataType: "json", success: function (data) { $.each(data, function (i, item) { ddState.append( $("<option></option>").val(item.stateid).html(item.statename) ); }); }, error: function () { alert("Error!"); } }); } }); });

Controller:

public class FeedBackController : Controller { CountryStateDB db= new CountryStateDB(); public ActionResult Submit() { List<Country> allCountries = new List<Country>(); List<State> allStates = new List<State>(); allCountries = db.Countries.OrderBy(a => a.countryname).ToList(); ViewBag.CountryID = new SelectList(allCountries, "countryid", "countryname"); ViewBag.StateID = new SelectList(allStates, "stateid", "statename"); return View(); } [HttpPost] [ValidateAntiForgeryToken]//// this is for prevent CSRF Attack(cross site Request Attack) public ActionResult Submit(FeedBack fb) { List<Country> allCountry = new List<Country>(); List<State> allState = new List<State>(); allCountry = db.Countries.OrderBy(a => a.countryname).ToList(); if (fb != null && fb.countryid > 0) { allState = db.States.Where(a => a.countryid.Equals(fb.countryid)).OrderBy(a => a.statename).ToList(); } ViewBag.CountryID = new SelectList(allCountry, "countryid", "countryname", fb.countryid); ViewBag.StateID = new SelectList(allState, "stateid", "statename", fb.stateid); if (ModelState.IsValid) { db.FeedBacks.Add(fb); db.SaveChanges(); ModelState.Clear(); fb = null; ViewBag.Message = "Successfully Submitted"; } else { ViewBag.Message = "Failed! Please try again"; } return View(fb); } [HttpGet] public JsonResult GetStates(string countryid = "") { List<State> allstate= new List<State>(); int id = 0; if (int.TryParse(countryid, out id)) { allstate = db.States.Where(a => a.countryid.Equals(id)).OrderBy(a => a.statename).ToList(); } if (Request.IsAjaxRequest()) { return new JsonResult { Data = allstate, JsonRequestBehavior = JsonRequestBehavior.AllowGet }; } else { return new JsonResult { Data = "Not Valid Request", JsonRequestBehavior = JsonRequestBehavior.AllowGet }; } } }

Rohan Kumar · Accepted Answer · 2014-04-03 05:58:16Z

1

Its countryid not cointryid try this,

$("#countryid").change(function () { // this will call when Country Dropdown select change var countryid = parseInt(this.value); // use this.value of $(this).val()

answered Apr 3, 2014 at 5:58

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3405577 Over a year ago

Thanx for the reply. I corrected the countryid. the script file is not being hit at all.

Neel · Accepted Answer · 2014-04-03 06:30:11Z

You have spelling mistake near "cointryid " please correct it to "CountryId"

And I guess you want to make cascading dropdown list for that try below code..

Script :-

$(document).ready(function () { $("#CountryId").change(function () { $("#StateId").empty(); $.post("/Home/GetState/", { id: $(this).val() }, function (response) { // $("#StatId").append("<option value=''></option>"); $.each(response, function (index, data) { $("#StateId").append( data.Text); }); }); }); $("#StateId").change(function () { $("#CityId").empty(); $.post("/Home/GetCity/", { id: $(this).val() }, function (response) { $("#CityId").append("<option value=''></option>"); $.each(response, function (index, data) { $("#CityId").append("<option value=" + data.Value + ">" + data.Text + "</option>"); }); }); }); });

Controller :-

 public ActionResult Index() { var countryList = db.Countries.ToList(); ViewBag.CountryId = new SelectList(db.Countries, "CountryId", "CountryName"); ViewBag.StateId = new SelectList(db.States, "StateId", "StateName"); ViewBag.CityId = new SelectList(db.Cities, "CityId", "CityName"); return View(); } public JsonResult GetState(int id) { JsonResult result = new JsonResult(); var statelist = (from s in db.States where s.CountryId == id select s).ToList(); var selectlist = new SelectList(statelist, "StateId", "StateName"); result.Data = selectlist; result.JsonRequestBehavior = JsonRequestBehavior.AllowGet; return result; } public JsonResult GetCity(int id) { JsonResult result = new JsonResult(); var dt = db.Cities.Where(y => y.StateId == id); List<SelectListItem> mydata = new List<SelectListItem>(); foreach (var c in dt) { mydata.Add(new SelectListItem() { Text = c.CityName, Value = c.CityId.ToString() }); } result.Data = mydata; result.JsonRequestBehavior = JsonRequestBehavior.AllowGet; return result; }

Thanx for the Reply. But Its not working. I cannot hit the script in it.

Jeyhun Rahimov · Accepted Answer · 2014-04-03 07:47:27Z

Try this:

@Html.DropDownListFor(model => model.countryid, @ViewBag.CountryID as SelectList, "Select Country", new { @id="countryid" }) @Html.DropDownListFor(model => model.stateid, @ViewBag.StateID as SelectList, "Select State", new { @id="stateid" }) <script type="text/javascript"> $(function () { $("#countryId").change( function () { loadLevelTwo(this); }); loadLevelTwo($("#countryId")); }); function loadLevelTwo(selectList) { var selectedId = $(selectList).val(); $.ajax( { url: "@Url.Action("GetStates", "Controller")", type: "GET", data: { countryid: selectedId }, success: function (data) { $("#stateid").html($(data).html()); }, }); } </script>

Collectives™ on Stack Overflow

Jquery and ajax not responding for cascading dropdown

3 Answers 3

1 Comment

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Related