In this article I will explain with an example, how to populate (bind) DropDownList using jQuery AJAX and JSON in ASP.Net MVC Razor.
The ASP.Net DropDownList items (options) will be populated by fetching data from database using Entity Framework in JSON format by calling Controller from View using jQuery AJAX in ASP.Net MVC Razor.
 
 
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
Download and install Northwind Database
 
 
Creating an Entity Data Model
The very first step is to create an ASP.Net MVC Application and connect it to the Northwind Database using Entity Framework. For more details please refer my article ASP.Net MVC: Simple Entity Framework Tutorial with example.
Following is the Entity Data Model of the Customers Table of the Northwind Database which will be used later in this project.
Populate (Bind) DropDownList using jQuery AJAX and JSON in ASP.Net MVC
 
 
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
 
Action method for handling jQuery AJAX operation
This Action method handles the call made from the jQuery AJAX function from the View.
Note: The following Action method handles AJAX calls and hence the return type is set to JsonResult. For more details, please refer my article ASP.Net MVC: Call Controller Method from View using jQuery AJAX.
 
Initially the records from the Customers table is fetched using Entity Framework, then a Generic List collection of the SelectListItem class objects is generated.
Note: The Generic List collection of the SelectListItem class objects is used since it allows to reduce the size of the object by only storing the CustomerID and the ContactName values for each Contact.
 
Finally the populated Generic List collection of the SelectListItem class objects is returned to the View in JSON format.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public JsonResult AjaxMethod()
    {
        List<SelectListItem> customers = new List<SelectListItem>();
        NorthwindEntities entities = new NorthwindEntities();
        for (int i = 0; i < 10; i++)
        {
            customers.Add(new SelectListItem
            {
                Value = entities.Customers.ToList()[i].CustomerID,
                Text = entities.Customers.ToList()[i].ContactName
            });
        }
 
        return Json(customers);
    }
}
 
 
View
The View consists of an HTML DropDownList element (SELECT).
Inside the jQuery document ready event handler, a jQuery AJAX call is made to the Controller using the jQuery AJAX function. The URL for the jQuery AJAX call is set to the Controller’s action method i.e. /Home/AjaxMethod.
Inside the Success event handler of the jQuery AJAX function, first the ASP.Net DropDownList is referenced and a default Item (Option) is added to it.
Then a jQuery each loop is executed over the JSON array and one by one each item is added as an Option element to the DropDownList.
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <select id="ddlCustomers"></select>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var ddlCustomers = $("#ddlCustomers");
            ddlCustomers.empty().append('<option selected="selected" value="0" disabled = "disabled">Loading.....</option>');
            $.ajax({
                type: "POST",
                url: "/Home/AjaxMethod",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    ddlCustomers.empty().append('<option selected="selected" value="0">Please select</option>');
                    $.each(response, function () {
                        ddlCustomers.append($("<option></option>").val(this['Value']).html(this['Text']));
                    });
                },
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });
        });
    </script>
</body>
</html>
 
 
Screenshot
Populate (Bind) DropDownList using jQuery AJAX and JSON in ASP.Net MVC
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Downloads
DropDownList_AJAX_MVC.zip