AngularJs: Display data in tabular format in ASP.NET MVC - ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF snippets and tutorial

AngularJs: Display data in tabular format in ASP.NET MVC

In this article I am going to explain how to display data in tabular format using AngularJs in MVC application.

AngularJs: Display data in tabular format in ASP.NET MVC

I have a table Employee and contain dummy data. I want to show the records in Grid/tabular format.


We use the ng-repeat directive to display data. Follow the below given steps to implement this functionality in your application.

Model Class (Employee.cs):
    public partial class Employee
        public int Id { get; set; }
        public string Name { get; set; }
        public Nullable<int> Phone { get; set; }
        public Nullable<int> Salary { get; set; }
        public string ImagePath { get; set; }
        public string EmailId { get; set; }

Add controller:
Add empty controller to application. Create a json action to get the data.

Complete Code of Controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVC_Project.Models;
namespace MVC_Project.Controllers
    public class AngularController : Controller
        // GET: /Angular/
        DemoEntities1 db = new DemoEntities1();
        public ActionResult Index()
            return View();
        public JsonResult GetEmployees()
            var city = db.Employees.ToList();
             return Json(city, JsonRequestBehavior.AllowGet);          

Add view:
Add view for index action and design the page.

Complete structure of View:
    ViewBag.Title = "MVC-AngualarJs Tutorial";
    table tr td th {
        text-align: center;
    .ng-binding {
        padding: 40px;
     a {
        text-decoration: none;
        color: #2196F3;
     tr:nth-child(odd) {
        background: #b8d1f3;
     tr:nth-child(even) {
        background: #dae5f4;

<h2>MVC-AngualarJs Tutorial :Display data in tabular format Example</h2>
<fieldset style="width:60%">
    <legend>AngualarJs Tutorial :Display data in tabular format Example</legend>

    <div ng-app="mvcapp" ng-controller="AngularController">  
               <th><a href="" ng-click="columnToOrder='id';reverse=!reverse">S.No.</a></th>
               <th class="name">
                   <a href="" ng-click="columnToOrder='Name';reverse=!reverse">Name</a>
               <th class="name">
                   <a href="" ng-click="columnToOrder='Phone';reverse=!reverse">Phone</a>
               <th class="name">
                   <a href="" ng-click="columnToOrder='Salary';reverse=!reverse">Salary</a>
               <th class="name">
                   <a href="">Image</a>
               <th class="name">
                   <a href="" ng-click="columnToOrder='EmailId';reverse=!reverse">Email</a>

           <tr ng-repeat="emp in employees| filter:{Name:empname} |orderBy:columnToOrder:reverse">
               <td>{{emp.Name }}</td>
               <td>{{emp.Phone }}</td>
               <td>{{emp.Salary }}</td>
               <td><img ng-src="{{emp.ImagePath || 'images/image.jpg'}}" width="150" height="150" /></td>
               <td>{{emp.EmailId ||'email not available' }}</td>
        <div ng-show="(employees|filter:empname).length==0" style="color:red;font-weight:bold">No Result Found</div>

    <script src=""></script>
    var angular = angular.module('mvcapp', []);
    angular.controller('AngularController', function ($scope, $http) {     
        function Getallitem()
            $http.get('/Angular/GetEmployees').success(function (data) {
                $scope.employees = data;

Build the application and run. Hope it helps you. 

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.