In this article I will explain with an example, how to populate (bind) DropDownList using
AngularJS AJAX and
JSON in ASP.Net MVC.
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
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.
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]()
Namespaces
You will need to import the following namespace.
Controller
The Controller consists of following Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
Action method for handling POST operation
This Action method handles the call made from the
AngularJS AJAX function from the View.
Note: The following Action method handles POST call and will return
JSON object and hence the return type is set to JsonResult.
Initially, the records from the
Customers table are fetched using
Entity Framework and stored in a Generic List collection of the
SelectListItem class object.
Note: The Generic List collection of the SelectListItem class objects is used since it allows reducing the size of the object by only storing the Value and Text i.e. CustomerID and the ContactName respectively for each Contact.
Finally, the Generic List collection of the
SelectListItem class object is returned to the View in
JSON format.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult AjaxMethod()
{
NorthwindEntities entities = new NorthwindEntities();
List<SelectListItem> customers = (from customer in entities.Customers.Take(10)
select new SelectListItem
{
Value = customer.CustomerID,
Text = customer.ContactName
}).ToList();
return Json(customers);
}
}
View
HTML Markup
Inside the View, the following script file is inherited.
1. angular.min.js
The HTML of the View consists of following elements:
div – For applying ng-app and ng-controller
AngularJS directives.
DropDownList – For displaying records.
The first option element of HTML DropDownList element (SELECT) is used to set the DefaultLabel.
The second option element of HTML DropDownList element (SELECT) has been assigned with the following
AngularJS directive.
ng-repeat – For repeating the element based on the length of the collection.
Inside the
AngularJS Controller, first the
DefaultLabel variable is set.
Then, the
$http service is used to make an
AJAX call to the Controller’s Action method. The
$http service has following properties and event handlers.
Properties
1. method – The method type of HTTP Request i.e. GET or POST. Here it is set to POST.
2. url – URL of the Controller’s Action method.
3.
dataType - The format of the data i.e. XML or
JSON. Here it is set as
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 Handlers
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 with records.
@{
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.5.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',
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]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Downloads
