AngularJs Table with Bootstrap 4 in ASP.NET Web Forms

watch_later 7/31/2022

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 a master page and use created master page within all child page in asp.net.


AngularJs Table with Bootstrap 4 in ASP.NET Web Forms
AngularJs Table with Bootstrap 4 in ASP.NET Web Forms

In my previous article, I explained how you can upload files using Angular Js and also explained basic CRUD operations with WEB API Using AngularJs in Asp.Net MVC Application.

When you working with any data-driven web applications sometimes as per client requirements you need to fetch data from the database using stored procedure/inline SQL statement or any JSON data and display all the records in a grid, here grid is just like a table nothing else. here I'll show you how you can create a simple HTML table and display the record in an HTML table instead of the data grid.

Today, while I working on my project I got a requirement to create a report for employees using angular js and based on the report give yearly rewards to employees on monthly 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 help you to build a web page in asp.net using Angular Js. 

Here I will change something from my actual requirement and show you only basic columns of the 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.

You May Like To Read

MVC Angular CRUD Operation Using WEB API 2 With Stored Procedure

AngularJS File Upload in ASP.NET using C# and VB.NET

Read CSV File In ASP.NET With Example C# and VB.NET

SQL Server Create and Execute Dynamic Stored Procedure

Requirement 

  • Create a Web Form in Asp.Net.
  • Create and Design Master Page and Use This Page in Every Child Page for Default Page Layout As Per Master Page.
  • Create/Design and Write as Script For module, data for employee data, and angular controller for Employee Details.
  • Create aspx Page With a Master layout to Display Employee Basic details.

Implementation

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

Step 1: Open Your Visual Studio.

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

Create New Website
Create New Website

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

Asp.net Web Forms Site
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 a Folder within the script folder with the name "App".

App Folder
App Folder

Step 6: Write a script file for a module within the "App" Folder

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

Step 7: Write a Script file for Employee data within the "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 a Script file for an angular controller within the "App" Folder.

app.controller('EmployeeController'function ($scope, EmployeeData) {
    $scope.EmployeeData = EmployeeData;
});
Anguler Js Script
Angular Js Script

Step 9: Now, I'll design the master page for the default layout as per the 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 to design my layout so first I will open my master page and link the following CSS be the ore 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 analyzed this master page then there I have linked my CSS and also assign the reference to a created module, data, and angular controller as well as the required script of AngularJs before the 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 have one or more ContentPlaceHolder controls.

Step 10: Now, we will design our Default. aspx page, hear in between ContentPlaceHolder I will write the following code to design an 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 analyzed this aspx page then I have created a table and to display records of employees I have used the directive ng-repeat and the ng-repeat directive is perfect for displaying an 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 which defines a controller in AngularJs Application there where ng-controller="EmployeeController" is an AngularJS directive. In AngularJS controller invoke a $scope object where $scope is the application object.

Here you also can use order by as per your need, you just need to use the 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 want to display all the records with an 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 explains AngularJs table with bootstrap 4 in asp.net web form as well as the use of master page in asp.net web application.

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.

Thank you for your valuable time, to read this article, If you like this article, please share this article and post your valuable comments.

Once, you post your comment, we will review your posted comment and publish it. It may take a time around 24 business working hours.

Sometimes I not able to give detailed level explanation for your questions or comments, if you want detailed explanation, your can mansion your contact email id along with your question or you can do select given checkbox "Notify me" the time of write comment. So we can drop mail to you.

If you have any questions regarding this article/blog you can contact us on info.codingvila@gmail.com

sentiment_satisfied Emoticon