In this article I will explain with an example, how to populate (bind) DropDownList using
AngularJS AJAX and
JSON in ASP.Net Core.
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
Database Context
Once the
Entity Framework is configured and connected to the database table, the Database Context will look as shown below.
using Microsoft.EntityFrameworkCore;
namespace DropDownList_AngularJS_Core_MVC
{
public class DBCtx : DbContext
{
public DBCtx(DbContextOptions<DBCtx> options) : base(options)
{
}
public DbSet<CustomerModel> Customers{get; set;}
}
}
Model
The Model class consists of the following properties.
public class CustomerModel
{
[Key]
public string CustomerId { get; set; }
public string ContactName { get; set; }
}
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
{
private DBCtx Context { get; set; }
public HomeController(DBCtx context)
{
this.Context = context;
}
public IActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult AjaxMethod()
{
List<SelectListItem> customers = this.Context.Customers.Take(10)
.Select(customer => new SelectListItem
{
Value = customer.CustomerID,
Text = customer.ContactName
}).ToList();
return Json(customers);
}
}
View
Inside the View, the following JS file is inherited.
1. angular.min.js
The HTML of the View consists of:
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 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.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 Core]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Downloads
