28/8/2019 AngularJs Table with Bootstrap 4 in ASP.

NET Web Forms - Codingvila

AngularJs Table with Bootstrap 4 in ASP.NET Web Forms

Codingvila watch_later Saturday, 8 December 2018 comment 1 Comment

Introduction

In this article i am going to explain how you can use angular js table with bootstrap 4 in asp.net web form, and also show you how you can display records in tabular format using angular js and bootstrap 4 in asp.net as well as how you can
create master page and use created master page within all child page in asp.net.

AngularJs Table with Bootstrap 4 in ASP.NET Web Forms

In my previous article i explained how you can upload file using Angular Js and also explained basic CURD operation with WEB API Using AngularJs in Asp.Net MVC Application.

When you working with any data driven web applications sometime as per client requirement you need to fetch data from database using stored procedure/inline sql statement or any json data and display all the records in grid, here grid is
just like table nothing else. here i'll show you how you can create simple html table and display record in html table instead of data grid.

Toady, while i working on my project i got requirement to create report for employee using angular js and based on report give yearly reward to employee based on month wise employee performance. where i need to use Angular Js Table
and i think this requirement i should share with you with an example, this may helps you to build a web page in asp.net using Angular Js.

Hear i will change something from my actual requirement and show you only basic columns of employee table with sample data for demonstration and just show how you can create and use Angular Js Table and how you can use
bootstrap 4 in your web application.

Requirement

1) Create Web Form in Asp.Net.

2) Create and Design Master Page and Use This Page in Every Child Page for Default Page Layout As Per Master Page.
3) Create/Design and Write as Script For module, data for employee data and angular controller for Employee Details.
4) Create aspx Page With Master layout for Display Employee Basic Detail.

https://coding-vila.blogspot.com/2018/12/angularjs-table-with-bootstrap-4-in-asp-dot-net-web-forms.html 1/8
28/8/2019 AngularJs Table with Bootstrap 4 in ASP.NET Web Forms - Codingvila

Implementation

Let's Create a basic demonstration to archive given requirement, So you need to follow some steps described as below.

Step 1 : Open Your Visual Studio 2013.

Step 2 : Click on top menu "File" >> "New" >> "Web Site".

Create New Website

Step 3 : Now You can see popup on your screen shown as below where select your language and select Asp.net Web Forms Site then choose path where you want to save your project and press OK.

https://coding-vila.blogspot.com/2018/12/angularjs-table-with-bootstrap-4-in-asp-dot-net-web-forms.html 2/8
28/8/2019 AngularJs Table with Bootstrap 4 in ASP.NET Web Forms - Codingvila

Add caption

Step 4 : After that Just Remove/modify other forms as per your need, hear i 'll remove all the forms instead of Default.aspx and site.master form.

Step 5 : Create Folder within script folder with name "App".

App Folder

Step 6 : Write Script file for module within "App" Folder

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

Step 7 : Write Script file for Employee data within "App" Folder

https://coding-vila.blogspot.com/2018/12/angularjs-table-with-bootstrap-4-in-asp-dot-net-web-forms.html 3/8
28/8/2019 AngularJs Table with Bootstrap 4 in ASP.NET Web Forms - Codingvila
app.value('EmployeeData', [
{ EmpCode: 18001, EmpName: 'Nikunj Satasiya', Joining: '05-05-2017', Department: 'Information Technology', Designation: 'Sr.Software Engineer', Salary: '42000' },
{ EmpCode: 18002, EmpName: 'Hiren Dobariya', Joining: '01-01-2017', Department: 'Information Technology', Designation: 'Sr.Software Engineer', Salary: '49000' },
{ EmpCode: 18003, EmpName: 'Vivek Ghadiya', Joining: '07-03-2017', Department: 'Information Technology', Designation: 'Web Developer', Salary: '22000' },
{ EmpCode: 18004, EmpName: 'Pratik Pansuriya', Joining: '12-08-2017', Department: 'Information Technology', Designation: 'Web Designer', Salary: '22000' },
{ EmpCode: 18005, EmpName: 'Sneha Patel', Joining: '09-04-2018', Department: 'Sales', Designation: 'Sr.Sales Executive', Salary: '33000' },
{ EmpCode: 18006, EmpName: 'Kishan Borad', Joining: '08-09-2012', Department: 'Information Technology', Designation: 'Software Engineer', Salary: '18000' },
{ EmpCode: 18007, EmpName: 'Vishwa Patel', Joining: '08-12-2013', Department: 'Technical Support', Designation: 'Support Executive', Salary: '25000' },
{ EmpCode: 18008, EmpName: 'Sarah Demola', Joining: '24-05-2017', Department: 'Technical Support', Designation: 'Support Executive', Salary: '25000' },
{ EmpCode: 18009, EmpName: 'Shruti Patel', Joining: '08-04-2014', Department: 'Network Security', Designation: 'Network Engineer', Salary: '17000' },
{ EmpCode: 18010, EmpName: 'Krishna Desai ', Joining: '15-09-2017', Department: 'Sales', Designation: 'Sr.Sales Executive', Salary: '36000' },
{ EmpCode: 18011, EmpName: 'Pravin Patel', Joining: '18-12-2018', Department: 'Sales', Designation: 'Sales Executive', Salary: '22000' },
{ EmpCode: 18012, EmpName: 'Milan Lathiya', Joining: '21-02-2016', Department: 'Technical Support', Designation: 'Support Executive', Salary: '29000' },
{ EmpCode: 18013, EmpName: 'Jigar Patel', Joining: '25-09-2017', Department: 'Network Security', Designation: 'Sr.Network Engineer', Salary: '39000' },
{ EmpCode: 18014, EmpName: 'Jhon Martin', Joining: '13-06-2015', Department: 'Information Technology', Designation: 'Sr.Web Developer', Salary: '40000' },
{ EmpCode: 18015, EmpName: 'Vikash Modi', Joining: '27-11-2017', Department: 'Network Security', Designation: 'Network Engineer', Salary: '21000' }
]);

Step 8 : Write Script file for angular controller within "App" Folder.

app.controller('EmployeeController', function ($scope, EmployeeData) {

$scope.EmployeeData = EmployeeData;
});

Anguler Js Script

Step 9 : Now, I'll design master page for default layout as per given requirement, hear you can design/modify your own layouts as per your need using CSS(cascading style sheet) or css class of bootstrap 4.

Here i will use bootstrap 4 for design my layout so first i will open my master page and link following CSS before end <head> tag.

CSS

<link href="Content/bootstrap.css" rel="stylesheet" type="text/css" />

<link href="Content/Site.css" rel="stylesheet" type="text/css" />

Master Page
Site.Master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="AngularJs_NikunjSatasiya.Site" %>

https://coding-vila.blogspot.com/2018/12/angularjs-table-with-bootstrap-4-in-asp-dot-net-web-forms.html 4/8
28/8/2019 AngularJs Table with Bootstrap 4 in ASP.NET Web Forms - Codingvila

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<link href="Content/bootstrap.css" rel="stylesheet" type="text/css" />

<link href="Content/Site.css" rel="stylesheet" type="text/css" />

<asp:ContentPlaceHolder ID="HeadContent" runat="server">

</asp:ContentPlaceHolder>
<style>
body
{
color:#223c88;
}
.blue{
background-color:#223c88;
}
a
{
color:white;
}
a:hover
{
color:white;
}
li a:hover{
background-color:#ffffff;
color:#223c88;
}
</style>
</head>
<body>
<div class="navbar nav blue" >
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">NSolutions</a>
</div>
<div class="navbar-collapse collapse navbar-inverse-collapse">
<ul class="nav navbar-nav" >
<li class="active" ><a href="#">Home</a></li>
<li><a href="#">Employee</a></li>
<li><a href="#">Department</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Payroll</a></li>
<li><a href="#">Request</a></li>
<li><a href="#">Utility</a></li>
<li><a href="#">Reports</a></li>
</ul>
</div>
https://coding-vila.blogspot.com/2018/12/angularjs-table-with-bootstrap-4-in-asp-dot-net-web-forms.html 5/8
28/8/2019 AngularJs Table with Bootstrap 4 in ASP.NET Web Forms - Codingvila

</div>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<script src="scripts/jquery-1.9.1.js"></script>
<script src="scripts/bootstrap.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-resource.min.js"></script>
<script src="scripts/app/app.js"></script>
<script src="scripts/app/data.js"></script>
<script src="scripts/app/EmployeeController.js"></script>
</body>
</html>

If You analysed this master page then there i have linked my CSS and also assign reference of created module, data and angular controller as well as required script of AngularJs before end <body> tag..

AngularJS Script

<script src="scripts/jquery-1.9.1.js"></script>
<script src="scripts/bootstrap.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-resource.min.js"></script>
<script src="scripts/app/app.js"></script>
<script src="scripts/app/data.js"></script>
<script src="scripts/app/EmployeeController.js"></script>

There where you can see ContentPlaceHolder that is used to define a content region for a master page, signal master page may can have one or more ContentPlaceHolder controls.

Step 10 :Now, we will design our Default.aspx page, hear in between ContentPlaceHolder i will write following code to design html table using AngularJS and Bootstrap 4.

Default.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJs_NikunjSatasiya.Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div class="container" ng-controller="EmployeeController" ng-app="app">

<table class="table table-hover">

<thead>
<tr>
<th scope="col">Employee Code</th>
<th scope="col">Employee Name</th>
<th scope="col">Joining Date</th>
<th scope="col">Department</th>

https://coding-vila.blogspot.com/2018/12/angularjs-table-with-bootstrap-4-in-asp-dot-net-web-forms.html 6/8
28/8/2019 AngularJs Table with Bootstrap 4 in ASP.NET Web Forms - Codingvila

<th scope="col">Designation</th>
<th scope="col">Salary</th>
</tr>
</thead>

<tr ng-repeat="student in EmployeeData">

<th scope="row">{{student.EmpCode}} </th>
<td>{{student.EmpName}}
</td>
<td>{{student.Joining}}
</td>
<td>{{student.Department}}
</td>
<td>{{student.Designation}}
</td>
<td>{{student.Salary}}
</td>
</tr>
</table>
</div>
</asp:Content>

If You analysed this aspx page then i have created table and to display records of employee i have used directive ng-repeat and ng-repeat directive is perfect for displaying a html table. i have also used directive ng-app and it's described
as the root element of the AngularJS application as well as i also used directive ng-controller and that defins a controller in AngularJs Application there where ng-controller="EmployeeController" is an AngularJS directive. In AngularJS
controller invoke with a $scope object where $scope is application object.

Hear you also can use order by as per your need, you just need to use following code.

<table class="table table-hover">

<thead>
<tr>
<th scope="col">Employee Code</th>
<th scope="col">Employee Name</th>
<th scope="col">Joining Date</th>
<th scope="col">Department</th>
<th scope="col">Designation</th>
<th scope="col">Salary</th>
</tr>
</thead>

<tr ng-repeat="student in EmployeeData | orderBy : 'EmpCode'">

<th scope="row">{{student.EmpCode}} </th>
<td>{{student.EmpName}}
</td>
<td>{{student.Joining}}
</td>
<td>{{student.Department}}
</td>
<td>{{student.Designation}}
</td>
<td>{{student.Salary}}

https://coding-vila.blogspot.com/2018/12/angularjs-table-with-bootstrap-4-in-asp-dot-net-web-forms.html 7/8
28/8/2019 AngularJs Table with Bootstrap 4 in ASP.NET Web Forms - Codingvila

</td>
</tr>
</table>

If you wants to display all the records with uppercase filter then you can do you just need to follow this rule.

<table class="table table-hover">

<thead>
<tr>
<th scope="col">Employee Code</th>
<th scope="col">Employee Name</th>
<th scope="col">Joining Date</th>
<th scope="col">Department</th>
<th scope="col">Designation</th>
<th scope="col">Salary</th>
</tr>
</thead>

<tr ng-repeat="student in EmployeeData | orderBy : 'EmpCode'">

<th scope="row">{{student.EmpCode}} </th>
<td>{{student.EmpName | uppercase }}
</td>
<td>{{student.Joining}}
</td>
<td>{{student.Department}}
</td>
<td>{{student.Designation}}
</td>
<td>{{student.Salary}}
</td>
</tr>
</table>

https://coding-vila.blogspot.com/2018/12/angularjs-table-with-bootstrap-4-in-asp-dot-net-web-forms.html 8/8