Introduction

In this post, I would like to explain Part 4 - How to Retrieve and Display tabular data with AngularJS and ASP.NET MVC application.
This is our 4th Post about AngularJS. Here I have explained a little about AngularJS and What we will learn in this section part by part. In Part2 of this post we seen how Display model as single data, but the question is how do we display model that is an array? In this part (Part 4) I am going to explain how to Retrieve and Display tabular data (List of Data / Array of data) with AngularJS and ASP.NET MVC application.

Steps :

Step-1: Create table into the database.

Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.

Step-2: Update Entity Data Model.

Go to Solution Explorer > Open your Entity Data Model (here "MyModel.edmx")> Right Click On Blank area for Get Context Menu > Update Model From Database... > A popup window will come (Entity Data Model Wizard) > Select Tables > Finish.

Step-3: Add new action into your controller (here in the Data Controller) for Fetch Data (List of Data / Array of data) and return as JsonResult from Database.

Here I have added "GetEmployeeList" Action into "DataController". Please write this following code

             public JsonResult GetEmployeeList()
            {
                List<Employee> Employee = new List<Employee>();
                using (MyDatabaseEntities dc = new MyDatabaseEntities())
                {
                    Employee = dc.Employees.OrderBy(a => a.FirstName).ToList();
                }

                return new JsonResult { Data = Employee, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
            }
        

Step-4: Add a new js File for add a new AngularJS controller and a Factory

Go to Solution Explorer > Right Click on folder (where you want to saved your AngularJS controller files, here I have created a folder named "AngularController"  under Scripts Folder) > Add > Select Javascript file > Enter name > Add.

Write following code in this file.

            angular.module('MyApp') // extending from previously created angular module in the First Part
            .controller('Part4Controller', function ($scope, EmployeeService) { // explained in Part 2 about controller
                $scope.Employees = null;
                EmployeeService.GetEmployeeList().then(function (d) {
                    $scope.Employees = d.data; //Success callback
                }, function (error) {
                    alert('Error!'); // Failed Callback
                });
            })
            .factory('EmployeeService', function ($http) { // I have explained about factory in the Part 2

                var fac = {};
                fac.GetEmployeeList = function () {
                    return $http.get('/Data/GetEmployeeList')
                }
                return fac;
            });               
        

Step-5: Add new action into your controller (here in the HomeController) for Get the View for Show Tabuler Data.

Here I have added "Part4" Action into "Home" Controller. Please write this following code

            public ActionResult Part4() // Retrive & Display Tabuler Data
            {
                return View();
            }
        

Step-6: Add view for the Action & design.

Right Click on Action Method (here right click on Part4 action) > Add View... > Enter View Name > Select View Engine (Razor) > Add.
Complete View

            @{
                ViewBag.Title = "Part4";
            }
            @* I will add some css for looks good *@
            <style>
                .tableData {
                    border-left:solid 1px #D8C3C3;
                    border-top:solid 1px #D8C3C3;
                }
                    .tableData tr {
                    }
                    .tableData td,.tableData th {
                        border-right:solid 1px #D8C3C3;
                        border-bottom:solid 1px #D8C3C3;
                        text-align:left;
                        padding:5px;
                    }
                    .tableData td {
                    }
                    .tableData th {
                        background-color:#FAFAFA;
                        padding:7px 5px;
                        border-bottom-color:#9C9C9C;
                    }
                .odd {
                    background-color:#f3f3f3;
                }
                .even {
                    background-color:#ffffff;
                }
            </style>
            <h2>Part4</h2>
            <div ng-controller="Part4Controller">
                <table class="tableData" width="80%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <th>Employee ID</th>
                        <th>Employee Name</th>
                        <th>Hire Date</th>
                        <th>Address</th>
                        <th>City</th>
                        <th>Postal Code</th>
                    </tr>
                    <tr ng-repeat="e in Employees" ng-class-odd="'odd'" ng-class-even="'even'">
                        <td>{{e.EmployeeID}}</td>
                        <td>{{e.FirstName}} {{e.LastName}}</td>
                        <td>{{e.HireDate.slice(6, -2) | date: 'dd-MM-yyyy'}}</td> <!-- As this is a Date field, we have to format-->
                        <td>{{e.Address}}</td>
                        <td>{{e.City}}</td>
                        <td>{{e.PostalCode}}</td>
                    </tr>
                </table>
            </div>

            @section scripts{
                <script src="~/Scripts/AngularController/Part4Controller.js"></script>
            }

        

Here you can see I have used

• ng-class-odd and ng-class-even: ng-class-odd and ng-class-even is same as ngClass but they work in conjunction with ngRepeat. ng-class-odd apply class on odd items and ng-class-even apply class on even items.

Step-7: Run Application.