Angular

Show Data in Grid Format Using AngularJS and WEB API

Introduction

This article explains how to show data in grid format using AngularJs and the Web API.

Step 1

I first added some references for supporting AngularJs and BootStrap to this application as in the following:

  1. <head>  
  2.   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">  
  3.     <script src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>  
  4.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>  
  5.     <script src="JavaScript1.js"></script>      
  6.   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
  7. </head> 

Then I worked on the HTML code that will create the Grid.

  1. <div ng-controller="TestCtrl" ng-init="firstCall()">  
  2.   
  3.     <div class="table-responsive com-table">  
  4.   
  5.         <table class="table table-bordered table-hover table-striped">  
  6.             <thead>  
  7.                 <tr>  
  8.                     <th width="5%">Customer ID</th>  
  9.                     <th width="15%">Customer Name</th>  
  10.                     <th width="15%">Email</th>  
  11.                     <th width="20%">Mobile No.</th>  
  12.                     <th width="25%">Address</th>  
  13.                     <th width="20%">Registration Date</th>  
  14.   
  15.                 </tr>  
  16.             </thead>  
  17.             <tbody>  
  18.   
  19.                 <tr ng-repeat="CU in CustomerList">  
  20.                     <td width="5%">{{CU.CustomerId}}</td>  
  21.                     <td width="15%">{{CU.Name}}</td>  
  22.                     <td width="15%">{{CU.Email}}</td>  
  23.                     <td width="20%">{{CU.PhoneNumber}}</td>  
  24.                     <td width="25%">{{CU.Address}}</td>  
  25.                     <td width="20%">{{CU.Date}}</td>  
  26.                 </tr>  
  27.             </tbody>  
  28.         </table>  
  29.   
  30.         <div class="collapse" >  
  31.             <div class="well">  
  32.             </div>  
  33.   
  34.         </div>  
  35.     </div>  
  36. /div> 

In the first div you can see that I had called the controller and one more thing is written along with that, ng-init="". What this ng-init does is it will call a specific function when initializing the controller for the first time. In simple words a function will be called automatically as soon as the page is loaded.

After that you can see that I had added a simple table of HTML, but this simple table is not so simple because ng-repeat will make this work as a grid. ng-repeat works like a foreach() for Angular, ng-repeat passes the data in an object and then we can use this object to bind specific properties to each li or tr tag.

That much is enough to create a simple grid.

Step 2

After working on the HTML page it's time to move on to the Angular code. So for this I added a JavaScript page and on that page this code is written:

  1. var TestCtrl = function ($scope, $http) {  
  2.     $scope.firstCall = function () {  
  3.   
  4.         $http({  
  5.             url: "NewRoute/getDataForAngularGrid",  
  6.             dataType: 'json',  
  7.             method: 'GET',  
  8.             data: '',  
  9.             headers: {  
  10.                 "Content-Type": "application/json"  
  11.             }  
  12.         }).success(function (response) {  
  13.             debugger;  
  14.             $scope.CustomerList = response;  
  15.         })  
  16.            .error(function (error) {  
  17.                alert(error);  
  18.            });  
  19.     }  
  20. } 

You can see that first of all a controller is created and in that controller a single function is created, this is the same function that will be called on initialization.

In this function a call is made to the Web API method named "getDataForAngularGrid".

If everything is right, in other words if the call is made to the Web API, then the success function will be executed and in that success function I am sending data to a scope named "CustomerList". This is the same scope that is used to bind the values in the table.

Step 3

After this I worked on the Web API.

Here I created a method whose name is "getDataForAngularGrid", in this method I simply made a call to the SQL Server and fetched my data from a specific table.

  1. namespace WebApplication2.Controllers  
  2. {  
  3.     [RoutePrefix("NewRoute")]  
  4.     public class NewController : ApiController  
  5.     {  
  6.         public class GetAll  
  7.         {  
  8.             public int CustomerId { get; set; }  
  9.             public string Name { get; set; }  
  10.             public string Address { get; set; }  
  11.             public string Email { get; set; }  
  12.             public string PhoneNumber { get; set; }  
  13.             public string Date { get; set; }  
  14.         }  
  15.   
  16.         [Route("getDataForAngularGrid")]  
  17.         [HttpGet]  
  18.         public List<GetAll> getDataForAngularGrid(HttpRequestMessage request)  
  19.         {  
  20.             DataTable dt = new DataTable();  
  21.             List<GetAll> list = new List<GetAll>();  
  22.             try  
  23.             {  
  24.                 SqlConnection con = new SqlConnection("YourConnection");  
  25.                 con.Open();  
  26.                 var query = "SP_getAllData";  
  27.                 SqlCommand com = new SqlCommand(query, con); //creating SqlCommand object    
  28.                 com.CommandType = CommandType.StoredProcedure;  
  29.                 com.ExecuteNonQuery();  
  30.                 con.Close();  
  31.                 SqlDataAdapter adptr = new SqlDataAdapter(com);  
  32.                 adptr.Fill(dt);  
  33.                 for (int i = 0; i < dt.Rows.Count; i++)  
  34.                 {  
  35.                     GetAll GetAll = new GetAll();  
  36.                     GetAll.CustomerId = Convert.ToInt32(dt.Rows[i]["customerid"]);  
  37.                     GetAll.Name = dt.Rows[i]["name"].ToString();  
  38.                     GetAll.Address = dt.Rows[i]["address"].ToString();  
  39.                     GetAll.Email = dt.Rows[i]["email"].ToString();  
  40.                     GetAll.PhoneNumber = dt.Rows[i]["phno"].ToString();  
  41.                     GetAll.Date = dt.Rows[i]["date"].ToString();  
  42.                     list.Add(GetAll);  
  43.                 }  
  44.             }  
  45.             catch (Exception e)  
  46.             {  
  47.             }  
  48.             return list;  
  49.         }  
  50.     }  
  51. } 

Here you can see that I had fetched the data and then I had sent this data back to the controller using a list of the class.

Now our coding part is completed and we can execute it to check the output.

Output

On running the application call will directly go to the Web API.

AngularJS Grid

From here data will be sent to the Angular Success function.

AngularJS Grid

After this all the data will be shown in grid format.

AngularJS Grid

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs