Bind cascading dropdown by ajax/json in MVC application

An Asp.net MVC developer can use this code to bind cascading drop down by ajax/json . Let’s say we have country drop down. When user selects country, states of selected country will be filled by json. (See below image)

First dropdown bind by retaining view bag by controller and for second drop down we can use JavaScript/Jquery to fill value based on selected country.

Below code used on cshtml page:

<div class="editor-label">
                @Html.LabelFor(m => m.Country)
            </div>
            <div class="editor-field">
              @Html.DropDownListFor(model => model.Country, new SelectList(Model.Country, "Value", "Text"), "Select Contry", new { onchange = "CountryChange()" })                                                                                                                   
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.State)
            </div>
            <div class="editor-field">
                @Html.DropDownList("state","Select State")
            </div>

We have used “CountryChange()” javascript function to fetch and fill data in state dropdown based on country change. Below is the JavaScript function implementation.

<script language="JavaScript" type="text/JavaScript">
    function CountryChange () {
        var url = '@Url.Content("~/Account/GetState")';

        var ddlsource = "#Country";
        var ddltarget = "#State";

        if ($(ddlsource).val() != "") {
            $.ajaxSetup({ cache: false });
            $.getJSON(url, { Sel_Country: $(ddlsource).val() }, function (data) {

                $(ddltarget).empty();

                $("#State").append("<option  value=''>Select State</option>");

                $.each(data, function (index, optionData) {
                    $("#State").append("<option value='" + optionData.Value + "'>" + optionData.Text + "</option>");
                });
            });
        }
        else {
            $("#State").empty();
            $("#State").append("<option value=''>Select State</option>");
        }
    }
</script>

Here json url specified “~/Account/GetState” is method “GetState” available in “Account” controller to retrieve data and pass data in json format.

public JsonResult GetState (string Sel_Country)
        {

            CountryService db = new CountryService ();
            JsonResult result = new JsonResult();
            var vStateList = db.GetStateList(Convert.ToInt64(Sel_Country));
            result.Data = vStateList.ToList();
            result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
            return result;
        }

Based on this approach developer can fill dropdown or fetch any kind of server side data and fill in the page by Jquery without postback.

Feel free to write your questions in comments.

Enjoy Programming!!
Amit Patel