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();
            url: "/Controller/Action/" + value,
            type: "GET",
            success: function (data) {
                $.each(data, function (index, option) {

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.

Click to rate this post!
[Total: 0 Average: 0]

Related posts

Leave a Reply

Your email address will not be published. Required fields are marked *

Go up

Below we inform you of the use we make of the data we collect while browsing our pages. You can change your preferences at any time by accessing the link to the Privacy Area that you will find at the bottom of our main page. More Information