Cascading DropDown Lists with jQuery MVC with ajax map
Cascading DropDown Lists with jQuery MVC AJAX world map
Cshtml@Html.DropDownList("ddlCountry", new SelectList(ViewBag.Country, "Value", "Text"), "-- Select --") @Html.DropDownList("ddlState", Enumerable.Empty<SelectListItem>(), "-- Select --") <div> <div id="vmap"> </div> </div>js
$(function () { $('#ddlCountry').on('change', function () { var countryCode = $(this).val(); var code = countryCode.toLowerCase(); var obj = {} obj[code] = '#F00'; $('#vmap').vectorMap('set', 'colors', obj); $.get('/Home/GetStateList', { countryCode: countryCode }, function (data) { //console.log(data); $('#ddlState').empty(); $('#ddlState').append($('<option>', { value: '', text: '-- Select --' })); for (var i = 0; i < data.length; i++) { var obj = data[i]; var val = obj['Value']; var text = obj['Text']; $('#ddlState').append($('<option>', { value: val, text: text })); } }); }); });Controller Action
private XDocument ReadXML() { XDocument xDoc = new XDocument(); xDoc = XDocument.Load(HttpContext.Server.MapPath("~/App_Data/LocationsXML_Prod.XML")); return xDoc; } public JsonResult GetStateList(string countryCode) { IList_result = new List (); IEnumerable defaults = ReadXML().Descendants("CountryOrRegion"); var nodes = from e in defaults where e.Attribute("Code").Value.Equals(countryCode) from element in e.Elements() select element; foreach (var node in nodes) { _result.Add(new SelectListItem { Value = (string)node.Attribute("Code"), Text = (string)node.Attribute("Name"), }); } return Json(_result, JsonRequestBehavior.AllowGet); }
Cascading DropDown Lists with jQuery MVC with ajax map
Reviewed by Bhaumik Patel
on
6:53 PM
Rating: