Cascading DropDown Lists with jQuery MVC with ajax map

Cascading DropDown Lists with jQuery MVC AJAX world map

Cascading DropDown Lists with jQuery MVC with ajax 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 Cascading DropDown Lists with jQuery MVC with ajax map Reviewed by Bhaumik Patel on 6:53 PM Rating: 5