Introduction:
This article explain you to display the data in table using ng-repeat using WebAPI and AngularJS.
Description:
ng-repeat directive can be used to draw table easily. Below code is used of ng-repeat directive to draw a table.
To implement this we need to write the code like as shown below
HTML Java Script CSS:
Index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angular JS</title>
<link href="css/master.css" rel="stylesheet" />
<link href="css/collapsemenu.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="scripts-common/jquery-2.1.4.js"></script>
<script src="scripts-angular/angular.js"></script>
<script src="scripts-angular/angular-route.js"></script>
<!--ng-progress-->
<script src="scripts-ngprogress/build/ngprogress.js"></script>
<link href="scripts-ngprogress/ngProgress.css" rel="stylesheet" />
<script src="scripts-ctrls/ng-main-ctrl.js"></script>
<script src="scripts-ctrls/ng-menu.js"></script>
<script src="scripts-ctrls/employeeCtrl.js"></script>
<script type="text/javascript">
var flag = 0;
$(document).ready(function () {
$('#containerview').css('height', ($(window).height() - 30) + 'px');
$('#containerview').css('width', ($(window).width() - 170) + 'px');
$('#containernavigation').css('height', ($(window).height() - 30) + 'px');
});
var slidedMenuId = "";
function expand(menuid) {
if (slidedMenuId != menuid) {
$(".collapsemenu").slideUp(400);
$('#' + menuid).slideDown(400);
slidedMenuId = menuid;
}
else {
$(".collapsemenu").slideUp(400);
$('#' + menuid).slideUp(400);
slidedMenuId = "";
}
}
</script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
"use strict";
$('#containernavigation').perfectScrollbar();
});
</script>
<base href="/" />
</head>
<body>
<div class="header">
<div class="header_left">
</div>
<div class="header_middle">
</div>
<div class="header_right">
<div class="header_userinfo_left">
</div>
<div class="header_userinfo_right">
<div class="notification">
</div>
<div class="userphoto_panel">
</div>
<div class="logout">
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div ng-app="myApp" ng-controller="mainController">
<div id="sliderNavigation" style="border: 0px solid #000;">
<div class="page_container_left font" style="border: 0px solid #000;" id="containernavigation">
<div id="admin_menu" runat="server">
<div id="setting_tab" runat="server" clientidmode="Static" class="collapse_button collapse_button_gradient" onmouseover="this.className='collapse_button collapse_button_gradient_hover'" onmouseout="this.className='collapse_button collapse_button_gradient'" onclick="expand('setting_menu')">
<a class="setting_tab">Setting</a>
</div>
<div id="setting_menu" class="collapsemenu">
<a class="collapsemenu_item" href="#/Home">Home</a>
<a class="collapsemenu_item" href="#About">About</a>
<a class="collapsemenu_item" href="#Contact">Contact</a>
<a class="collapsemenu_item" href="#ManageEmployee">Employee Details</a>
</div>
<div id="home_tab" runat="server" clientidmode="Static" class="collapse_button collapse_button_gradient" onmouseover="this.className='collapse_button collapse_button_gradient_hover'" onmouseout="this.className='collapse_button collapse_button_gradient'" onclick="expand('home_menu')">
<a class="setting_tab">Home</a>
</div>
<div id="home_menu" class="collapsemenu">
<a class="collapsemenu_item" href="#/Home">Home</a>
<a class="collapsemenu_item" href="#About">About</a>
<a class="collapsemenu_item" href="#Contact">Contact</a>
</div>
<div id="about_tab" runat="server" clientidmode="Static" class="collapse_button collapse_button_gradient" onmouseover="this.className='collapse_button collapse_button_gradient_hover'" onmouseout="this.className='collapse_button collapse_button_gradient'" onclick="expand('about_menu')">
<a class="setting_tab">About</a>
</div>
<div id="about_menu" class="collapsemenu">
<a class="collapsemenu_item" href="#/Home">Home</a>
<a class="collapsemenu_item" href="#About">About</a>
<a class="collapsemenu_item" href="#Contact">Contact</a>
</div>
</div>
</div>
<%--Container Pages--%>
<div style="border: 0px solid #000;" id="containerview" class="page_container font">
<div class="col-lg-12 ">
<div class="pagetittle">
: :
<p ng-bind="pagetitle"></p>
</div>
</div>
<div class="col-lg-12 ">
<div ng-view class="content">
</div>
</div>
</div>
</div>
</div>
<div class="footer">
© 2016 www.logicspark.in All Rights Reserved. The content is copyrighted to Muhammad Asif.
</div>
</body>
</html>
Employee.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Manage Employee</title>
<style type="text/css">
table, th, td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<div ng-controller="employeeController" ng-init="fetchdata()">
<table style="width: 100%;" border="1">
<tr>
<th>Id</th>
<th>Name</th>
<th>Gender</th>
<th>Dept</th>
<th>Salary</th>
</tr>
<tr ng-repeat="items in griddata">
<td>{{items.Id}}</td>
<td>{{items.Name}}</td>
<td>{{items.Gender}}</td>
<td>{{items.DeptId}}</td>
<td>{{items.Salary}}</td>
</tr>
</table>
</div>
</body>
</html>
employee controller.js
myApp.controller("employeeController", function ($scope, $http, $log) {
$scope.title = 'Fetch data using AngularJS and WebAPI';
$scope.griddata;
$scope.fetchdata = function () {
$http({
method: 'GET',
url: '../api/EmployeeDetails/GetEmployees',
}).then(successCallback, errorCallback).finally(function () { });
};
var successCallback = function (response) {
$scope.griddata = response.data;
};
var errorCallback = function (response) {
$scope.error = response.data;
};
});
Web API
using AngularJSCURD.Models;
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Script.Serialization;
namespace AngularJSCURD.Controllers
{
public class EmployeeDetailsController : ApiController
{
string strConnectionString = ConfigurationManager.ConnectionStrings["DBConnectionString"].ConnectionString;
string strSQLQuery = "";
[HttpGet]
public List<Employee> GetEmployees()
{
IDataReader objIDataReader;
strSQLQuery = "SELECT * FROM tblEmployees";
List<Employee> objEmployeeList = new List<Employee>();
using (SqlConnection con = new SqlConnection(strConnectionString))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = strSQLQuery;
cmd.Connection = con;
con.Open();
objIDataReader = cmd.ExecuteReader();
while (objIDataReader.Read())
{
Employee objEmployee = new Employee();
objEmployee.Id = Convert.ToInt32(objIDataReader["Id"]);
objEmployee.Name = objIDataReader["Name"].ToString();
objEmployee.Gender = objIDataReader["Gender"].ToString();
objEmployee.DeptId = Convert.ToInt32(objIDataReader["DeptId"]);
objEmployee.Salary = Convert.ToInt32(objIDataReader["Salary"]);
objEmployeeList.Add(objEmployee);
}
}
}
return objEmployeeList;
}
}
}
DEMO
No comments:
Post a Comment