Populate Dropdown List Based on Selection in ASP.NET-MVC

In ASP.NET-MVC, it is often necessary to populate a dropdown list based on the selection of another dropdown list. This can be achieved using jQuery and AJAX.

First, create the initial dropdown list in your view using the HTML helper method.

@Html.DropDownListFor(m => m.FirstDropdownValue, Model.FirstDropdownList, "Select an option")

Next, create the second dropdown list with an empty options list.

@Html.DropDownListFor(m => m.SecondDropdownValue, new SelectList(Enumerable.Empty<SelectListItem>()), "Select an option")

Then, add a jQuery function to detect when the first dropdown has been changed and send an AJAX request to the server to retrieve the options for the second dropdown.

$(document).ready(function () {
    $("#FirstDropdownValue").change(function () {
        var value = $(this).val();
        $.ajax({
            url: "/Controller/Action/" + value,
            type: "GET",
            success: function (data) {
                $("#SecondDropdownValue").empty();
                $.each(data, function (index, option) {
                    $("#SecondDropdownValue").append("" + option.Text + "");
                });
            }
        });
    });
});

Finally, create a controller action that returns the options for the second dropdown based on the selected value of the first dropdown.

public ActionResult Action(int id)
{
    var options = _repository.GetOptionsForSecondDropdown(id);
    return Json(options, JsonRequestBehavior.AllowGet);
}

In summary, by using jQuery and AJAX, it is possible to dynamically populate a dropdown list based on the selection of another dropdown list in ASP.NET-MVC.