Fetch Records In Angular Datatable Using Entity Framework And Bootstrap

Introduction

In this session, I will show you the steps of implementing Angular Datatable in ASP.NET MVC application. There is no need for adding filter data and pagination manually. You can get all these benefits by using Datatable which is open source.

Description

DataTables is a powerful and easy to use jQuery plugin for displaying tabular data with features for Pagination, searching, State saving, Multi-column sorting with data type detection and lots more with ZERO or minimal configuration. For resolving the datatable performance issue like server-side filtering, sorting, and paging features when working with a large amount of data, many Angular grid tools are available.

Note

Before you go through this session I will suggest you visit my previous Datatable session as mentioned below. As I have used the same table structure with the data and same Entity Data Model in both sessions and under the same project I have created both these datatable based applications.

Retrieve records In jQuery Datatable Using Entity Framework and Bootstrap

Steps to be followed,

Step 1

Add required JS, CSS files and 3 image files for sorting icons in the application that are the dependencies of angular-datatables.

You can find these files from the attachment and the structure should look like as mentioned below.

Fetch Records In Angular Datatable Using Entity Framework And Bootstrap

Step 2

Here, I have added a JavaScript file in the "Scripts" folder for adding Angular components (module, controller etc). Right-click on your "Scripts" folder > Add > New Item > select "javascript" file > Enter name (here "myApp.js")> Ok.

Code Ref

var app = angular.module('MyApp', ['datatables']);
app.controller('homeCtrl', ['$scope', '$http', 'DTOptionsBuilder', 'DTColumnBuilder',
function ($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
$scope.dtColumns = [
DTColumnBuilder.newColumn("FirstName", "First Name"),
DTColumnBuilder.newColumn("LastName", "Last Name"),
DTColumnBuilder.newColumn("Age", "Age"),
DTColumnBuilder.newColumn("Address", "Address"),
DTColumnBuilder.newColumn("City", "City"),
DTColumnBuilder.newColumn("State", "State")
]
$scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
url: "/home/getdata",
type: "POST"
})
.withPaginationType('full_numbers')
.withDisplayLength(10);
}])

Code Description

I have included the datatables module in our module (here "MyApp") for implementing datatables in our AngularJS application.

var app = angular.module('MyApp', ['datatables']);

Here, I have defined some function parameters with the controller name.

app.controller('homeCtrl', ['$scope', '$http', 'DTOptionsBuilder', 'DTColumnBuilder',
function ($scope, $http, DTOptionsBuilder, DTColumnBuilder)

I have mentioned the columns of table (Entity Types) as uploaded using enitity data model using scope object. The scope is a JavaScript object which basically binds the "controller" and the "view". One can define member variables in the scope within the controller which can then be accessed by the view.

$scope.dtColumns = [
DTColumnBuilder.newColumn("FirstName", "First Name"),
DTColumnBuilder.newColumn("LastName", "Last Name"),
DTColumnBuilder.newColumn("Age", "Age"),
DTColumnBuilder.newColumn("Address", "Address"),
DTColumnBuilder.newColumn("City", "City"),
DTColumnBuilder.newColumn("State", "State")
]

Here, I have another scope object which specified the controller action method getdata to load data from the backend using Entity data model.

$scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
url: "/home/getdata",
type: "POST"
})

Here, I have mentioned UI pagination type with the no. of records per page.

.withPaginationType('full_numbers')
.withDisplayLength(10);

Step 3

Here, I have added "Angular" Action into "Home" Controller. Please write the following code.

public ActionResult Angular()
{
return View();
}

Step 4

Add another action into your controller for getting data from a database for showing in the datatables.

public ActionResult getData()
{
using (SatyaDBEntities dc = new SatyaDBEntities())
{
return Json(dc.employees.ToList());
}
}

Step 5

Add view for your Action & design for showing the data in the datatables.

Right-click on Action Method (here right-click on Angular action) > Add View... > Enter View Name > Select View Engine (Razor) > Add.

Code Ref

@{
ViewBag.Title = "Angular Datatables";
}
<h2 style="color: blue">Satyaprakash-Angular Datatable Using EF and Bootstrap</h2>
<link href="~/css/bootstrap.css" rel="stylesheet" />
<link href="~/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/jquery.dataTables.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-datatables.js"></script>
<script src="~/Scripts/myApp.js"></script>
<div ng-app="MyApp" class="container">
<div ng-controller="homeCtrl">
<table id="entry-grid" datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-hover"></table>
</div>
</div>

Code Description

For datatable CSS

<link href="~/css/bootstrap.css" rel="stylesheet" />
<link href="~/css/jquery.dataTables.min.css" rel="stylesheet" />

JS for AngularJS and Datatable

<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/jquery.dataTables.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-datatables.js"></script>

JS for our AngularJS module, controller.

<script src="~/Scripts/myApp.js"></script>

Here, in div tag inside HTML element I have added Angular module with controller name.

<div ng-app="MyApp" class="container">
<div ng-controller="homeCtrl">

Then in the table element I have mentioned Angular scope objects, that is dtOptions and dtColumns, with CSS class as described in the earlier step.

<div ng-app="MyApp" class="container">
<div ng-controller="homeCtrl">
<table id="entry-grid" datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-hover"></table>
</div>
</div>

OUTPUT

During Page load initially.

It supports Pagination, searching, State saving, and Multi-column sorting with data type detection.

SUMMARY

Implement the Angular Datatable using MVC and Bootstrap.
Datatable with Bootstrap using Angular DataTables dependencies.
Features of Datatable makes coding easier.
Datatable using Entity Framework.