ASP.NET MVC Dropdown (Static + Dynamic from Database)

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:

Static dropdown (manual values)
Dynamic dropdown (data from database)
Custom dropdown (static + dynamic together)
jQuery with dropdown (change event, AJAX)
Proper syntax with examples
Easy explanation step-by-step

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

Text = what user sees
Value = what gets saved
ViewBag = used to pass data from controller to view
jQuery change() event triggers when user selects value

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

jQuery ajax() calls controller method
Data comes in JSON format
$.each() loop adds options dynamically
No page reload required

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

First option is static (Select All)
Remaining options come from the database
Combined using jQuery

6. Set Selected Value using jQuery

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

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

7. Important Points

Use jQuery for dynamic behavior
Use AJAX to load data without refresh
Always return JSON from controller
Use id attribute for jQuery selection

8. Common Mistakes

❌ Wrong URL in AJAX
❌ Not including jQuery file
❌ Forgetting JsonRequestBehavior.AllowGet
❌ Not using correct id in jQuery

9. Conclusion

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

You learned:

Static dropdown (manual)
Dynamic dropdown (database using AJAX)
Strongly typed dropdown
Custom dropdown (static + dynamic)
jQuery events and AJAX usage