In this article I will explain with an example, how to populate (bind) DropDownList using AngularJS 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 AngularJS AJAX in ASP.Net MVC Razor.
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
Creating an Entity Data Model
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 AngularJS 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 AngularJS AJAX operation
This Action method handles the call made from the AngularJS AJAX function from the View.
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 HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
The HTML DIV consists of an HTML DropDownList element (SELECT).
The $http service is used to make an AJAX call to the Controller’s Action method. The $http service has following properties and methods.
Properties
1. method – The method type of HTTP Request i.e. GET or POST.
2. url – URL of the Controller’s Action method.
3. dataType - The format of the data i.e. XML or JSON.
4. data – The parameters to be sent to the Controller's Action method.
5. headers - List of headers to be specified for the HTTP Request.
Event Handler
1. success – This event handler is triggered once the AJAX call is successfully executed.
2. error – This event handler is triggered when the AJAX call encounters an error.
The response from the AJAX call is received in JSON format inside the Success event handler of the $http service and is assigned to the Customers variable which is later used to populate the DropDownList using the ng-repeat directive.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $http, $window) {
$scope.DefaultLabel = "Loading.....";
var post = $http({
method: "POST",
url: "/Home/AjaxMethod",
dataType: 'json',
data: {},
headers: { "Content-Type": "application/json" }
});
post.success(function (data, status) {
$scope.DefaultLabel = "Please Select";
$scope.Customers = data;
});
post.error(function (data, status) {
$window.alert(data.Message);
});
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<select>
<option value="0"label="{{DefaultLabel}}"></option>
<option ng-repeat="customer in Customers" value="{{customer.Value}}">
{{customer.Text}}
</option>
</select>
</div>
</body>
</html>
Screenshot
![Populate (Bind) DropDownList using AngularJS AJAX and JSON in ASP.Net MVC]()
Downloads
