AngularJs Table with Bootstrap 4 in ASP.NET Web Forms

watch_later Saturday, December 8, 2018
comment 2 Comments

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.

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
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.
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
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
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
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" %>
 
<!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>
    </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>
                    <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}}
                </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>
Step : 11 Run Your Application.

Output


Desktop View

Desktop View
Desktop View

Mobile View

Mobile View
Mobile View


Summary


This article explain AngularJs table with bootstrap 4 in asp.net web form as well as use of master page in asp.net web application.

You May like To Read


Codingvila provides articles and blogs on web and software development for beginners as well as free Academic projects for final year students in Asp.Net, MVC, C#, Vb.Net, SQL Server, Angular Js, Android, PHP, Java, Python, Desktop Software Application and etc.

avatar


Nice blog.That is very interesting; you are a very skilled blogger. I have shared your website in my social networks! A very nice guide.
Web Designers in Hyderabad
web designing companies in Hyderabad

delete June 20, 2019 at 5:17 AM



sentiment_satisfied Emoticon