In ASP.NET MVC, a Dropdown (DropDownList) is used to display multiple options to the user in a simple way. The user can select one value from the list.

In this blog, we will learn:

1. What is Dropdown in MVC?

A dropdown is created using Html Helper:

@Html.DropDownListFor()

It binds with a model property and displays a list of items.

We can also use jQuery to handle events like change, load data dynamically, etc.

2. Static Dropdown (Manual Data)

Step 1: Create Model

public class Student
{
    public int Id { get; set; }
    public string Gender { get; set; }
}

Step 2: Controller Code

public ActionResult Create()
{
    List<SelectListItem> genderList = new List<SelectListItem>()
    {
        new SelectListItem{ Text = "Male", Value = "Male" },
        new SelectListItem{ Text = "Female", Value = "Female" },
        new SelectListItem{ Text = "Other", Value = "Other" }
    };

    ViewBag.GenderList = genderList;

    return View();
}

Step 3: View Code

@model Student

@Html.LabelFor(m => m.Gender)
@Html.DropDownListFor(m => m.Gender, 
    ViewBag.GenderList as List<SelectListItem>, 
    "-- Select Gender --", 
    new { @class = "form-control", id="ddlGender" })

jQuery Example

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function () {
        $("#ddlGender").change(function () {
            var selectedValue = $(this).val();
            alert("Selected Gender: " + selectedValue);
        });
    });
</script>

Explanation

3. Dynamic Dropdown (From Database using jQuery AJAX)

Now we fetch data from the database using jQuery.

Step 1: Controller (Get Data)

public JsonResult GetDepartments()
{
    using (MyDbContext db = new MyDbContext())
    {
        var data = db.Departments.Select(d => new
        {
            d.Id,
            d.Name
        }).ToList();

        return Json(data, JsonRequestBehavior.AllowGet);
    }
}

Step 2: View

<select id="ddlDepartment" class="form-control">
    <option value="">-- Select Department --</option>
</select>

Step 3: jQuery AJAX

<script>
    $(document).ready(function () {

        $.ajax({
            url: '/Home/GetDepartments',
            type: 'GET',
            success: function (data) {

                $.each(data, function (i, item) {
                    $("#ddlDepartment").append(
                        '<option value="' + item.Id + '">' + item.Name + '</option>'
                    );
                });

            }
        });

    });
</script>

Explanation

4. Strongly Typed Dropdown with jQuery

We can still use a strongly typed dropdown and handle it with jQuery.

View

@model StudentViewModel

@Html.DropDownListFor(m => m.DepartmentId,
    Model.Departments,
    "-- Select Department --",
    new { @class = "form-control", id="ddlDept" })

jQuery

<script>
    $("#ddlDept").change(function () {
        var id = $(this).val();
        console.log("Selected Department Id: " + id);
    });
</script>

5. Custom Dropdown (Static + Dynamic using jQuery)

View

<select id="ddlCustom" class="form-control">
    <option value="0">Select All</option>
</select>

jQuery

<script>
    $(document).ready(function () {

        $.ajax({
            url: '/Home/GetDepartments',
            type: 'GET',
            success: function (data) {

                $.each(data, function (i, item) {
                    $("#ddlCustom").append(
                        '<option value="' + item.Id + '">' + item.Name + '</option>'
                    );
                });

            }
        });

    });
</script>

Explanation

6. Set Selected Value using jQuery

$("#ddlDepartment").val("2");

OR

$("#ddlDepartment option[value='2']").prop("selected", true);

7. Important Points

8. Common Mistakes

9. Conclusion

Dropdown in ASP.NET MVC becomes more powerful with jQuery.

You learned: