How To Display Employee Details Using Angular In ASP.NET

Introduction

In this article, I will demonstrate how to display employee details using AngularJS in ASP.NET. I will upload the employee details using bootstrap 4 modal and insert them into a SQL database table and retrieve those using AngularJS and ASP.NET Web Service.

Step 1:Open SQL Server 2014 and create a database table.

CREATE TABLE [dbo].[EmployeeDetails](
[ID] [int] IDENTITY(1,1) NOT NULL,
[Name] [nvarchar](50) NULL,
[Position] [nvarchar](50) NULL,
[Office] [nvarchar](50) NULL,
[Profile_Picture] [nvarchar](50) NULL,
CONSTRAINT [PK_EmployeeDetails] PRIMARY KEY CLUSTERED
(
[ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
CREATE ALTER procedure [dbo].[spAddEmployeeDetails]
(
@Name nvarchar(50),
@Position nvarchar(50),
@Office nvarchar(50),
@Profile_Picture nvarchar(50)
)
as
begin
insert into [dbo].[EmployeeDetails](Name,Position,Office,Profile_Picture)
values(@Name,@Position,@Office,@Profile_Picture)
end
CREATE procedure [dbo].[spGetEmployeeDetails]
as
begin
select ID,Name,Position,Office,Profile_Picture from [dbo].[EmployeeDetails]
end

Step 2:Open Visual Studio 2015, click on New Project, and create an empty web application project.

Screenshot for creating new project 1

ASP.NET

After clicking on New Project, one window will appear. Select Web from the left panel, choose ASP.NET Web Application, give it a meaningful name for your project, then click on OK as shown in the below screenshot.

Screenshot for creating new project 2

After clicking on OK, one more window will appear. Choose Empty, check on Web Forms checkbox, and click on OK.

Screenshot for creating new project 3

Step 3: Double-click on webconfig file to add database connection.

<connectionStrings>
<add name="DBCS" connectionString="data source=DESKTOP-M021QJH\SQLEXPRESS; database=SampleDB; integrated security=true;"/>
</connectionStrings>

Add the following code to get data.

<system.web>
<webServices>
<protocols>
<add name="HttpGet"/>
</protocols>
</webServices>
</system.web>

Step 4: Right-click on Models folder, select Add, then choose a class and click.

Add C# class screenshot 1

After that, a window will appear. Choose class as shown in the below image. Give it the name EmployeeDetails and click on Add.

Add C# class screenshot 2

Write the following class.

namespace DisplayEmployeeDetails_Demo.Models
{
public class EmployeeDetails
{
public int ID { get; set; }
public string Name { get; set; }
public string Position { get; set; }
public string Office { get; set; }
public Nullable<int>Experience{ get; set; }
public string Profile_Picture { get; set; }
}
}

Step 5: Right click on the project, select Add, then choose a new item and click on it.

Screenshot for Web Service 1

After that, a window will appear. Choose Web Service (ASMX). Give it a name as EmployeeService and click on Add.

Screenshot for Web Service 2

Add namespace

using DisplayEmployeeDetails_Demo.Models;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;

Write the following code in web service

Write following code in web service
[WebMethod]
public void GetEmployeeDetails()
{
List<EmployeeDetails> employeeList = new List<EmployeeDetails>();
string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
using (SqlConnection con = new SqlConnection(CS))
{
SqlCommand cmd = new SqlCommand("spGetEmployeeDetails", con);
cmd.CommandType = CommandType.StoredProcedure;
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
EmployeeDetails emp = new EmployeeDetails();
emp.ID = Convert.ToInt32(rdr["ID"]);
emp.Name = rdr["Name"].ToString();
emp.Position = rdr["Position"].ToString();
emp.Office = rdr["Office"].ToString();
emp.Profile_Picture = rdr["Profile_Picture"].ToString();
employeeList.Add(emp);
}
}
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(employeeList));
}

Complete web service code

using DisplayEmployeeDetails_Demo.Models;
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;
namespace DisplayEmployeeDetails_Demo
{
/// <summary>
/// Summary description for EmployeeService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
// [System.Web.Script.Services.ScriptService]
public class EmployeeService : System.Web.Services.WebService
{
[WebMethod]
public void GetEmployeeDetails()
{
List<EmployeeDetails> employeeList = new List<EmployeeDetails>();
string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
using (SqlConnection con = new SqlConnection(CS))
{
SqlCommand cmd = new SqlCommand("spGetEmployeeDetails", con);
cmd.CommandType = CommandType.StoredProcedure;
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
EmployeeDetails emp = new EmployeeDetails();
emp.ID = Convert.ToInt32(rdr["ID"]);
emp.Name = rdr["Name"].ToString();
emp.Position = rdr["Position"].ToString();
emp.Office = rdr["Office"].ToString();
emp.Profile_Picture = rdr["Profile_Picture"].ToString();
employeeList.Add(emp);
}
}
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(employeeList));
}
}
}

Step 6: Right click on the project, select Add, then choose Web Form and click on it.

Screenshot adding web form 1

After that, one window will appear. Give it the name EmployeeList and click on OK.

Screenshot adding web form 2

Add the following CDN link for style and script.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="EmployeeCard.css" rel="stylesheet" />

Write the script to retrieve data from the database.

<script type="text/javascript">
var app = angular
.module("myModule", [])
.controller("myController", function ($scope, $http) {
$http.get("EmployeeService.asmx/GetEmployeeDetails")
.then(function (response) {
$scope.employees = response.data;
});
})
</script>

Design web form

<body ng-controller="myController">
<form id="form1" runat="server">
<div class="container py-4">
<div class="card">
<div class="card-header bg-primary text-white">
<h5 class="card-title text-uppercase">Employee Details</h5>
</div>
<div class="card-body">
<button type="button" class="btn btn-primary rounded-0" data-toggle="modal" data-target="#myModal">
<i class="fa fa-plus-circle"></i>Add New
</button>
<div class="modal" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Employee Details</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Name:</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user"></i></span>
</div>
<asp:TextBox ID="txtName" CssClass="form-control" runat="server"></asp:TextBox>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Position:</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-suitcase"></i></span>
</div>
<asp:TextBox ID="txtPosition" CssClass="form-control" runat="server"></asp:TextBox>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Office:</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-building"></i></span>
</div>
<asp:TextBox ID="txtOffice" CssClass="form-control" runat="server"></asp:TextBox>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Profile Picture:</label>
<div class="custom-file">
<asp:FileUpload ID="ProfileFileUpload" CssClass="custom-file-input" runat="server" />
<label class="custom-file-label"></label>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<asp:Button ID="btnSubmit" CssClass="btn btn-primary rounded-0" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
<button type="button" class="btn btn-danger rounded-0" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6" ng-repeat="emplopye in employees">
<div class="our-team">
<div class="pic">
<img ng-src="{{emplopye.Profile_Picture}}" />
</div>
<h3 class="title">{{emplopye.Name}}</h3>
<span class="post">{{emplopye.Position}}</span>
<span class="post">{{emplopye.Office}}</span>
<ul class="social">
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-google-plus"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</form>
</body>

Step 7: Right click on project, select add, then choose stylesheet. Give it the name EmployeeCard.

.our-team{
padding: 20px 15px 30px;
background: #fff;
text-align: center;
border: 1px solid #1b1e21;
margin-top: 10px;
margin-bottom: 10px;
box-shadow: 1px 1px 1px #212529;
border-radius: 3px;
}
.our-team .pic{
display: inline-block;
width: 100%;
height: 100%;
background: #fff;
padding: 10px;
margin-bottom: 25px;
transition: all 0.5s ease 0s;
}
.our-team:hover .pic{
background: #17bebb;
border-radius: 50%;
}
.pic img{
width: 100%;
height: auto;
border-radius: 50%;
}
.our-team .title{
display: block;
font-size: 16px;
font-weight: 600;
color: #2e282a;
text-transform: uppercase;
margin: 0 0 7px 0;
}
.our-team .post{
display: block;
font-size: 15px;
color: #17bebb;
text-transform: capitalize;
margin-bottom: 10px;
}
.our-team .social{
padding: 0;
margin: 0;
list-style: none;
}
.our-team .social li{
display: inline-block;
margin-right: 5px;
}
.our-team .social li a{
display: block;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
font-size: 15px;
color: #17bebb;
border: 1px solid #17bebb;
transition: all 0.5s ease 0s;
}
.our-team:hover .social li a{
background: #17bebb;
color: #fff;
}
@media only screen and (max-width: 990px){
.our-team{ margin-bottom: 30px; }
}

Step 8: Double-click on the Submit button and write the following C# code.

Add namespace

using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.IO;

Complete code for C# backend

using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.IO;
namespace DisplayEmployeeDetails_Demo
{
public partial class EmployeesList : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ClearTexBox();
}
}
private void ClearTexBox()
{
txtName.Text = string.Empty;
txtPosition.Text = string.Empty;
txtOffice.Text = string.Empty;
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
if (ProfileFileUpload.PostedFile!=null)
{
string FileName = Path.GetFileName(ProfileFileUpload.PostedFile.FileName);
ProfileFileUpload.SaveAs(Server.MapPath("/images" + FileName));
string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
using (SqlConnection con = new SqlConnection(CS))
{
SqlCommand cmd = new SqlCommand("spAddEmployeeDetails",con);
cmd.CommandType = CommandType.StoredProcedure;
con.Open();
cmd.Parameters.AddWithValue("@Name",txtName.Text.Trim());
cmd.Parameters.AddWithValue("@Position",txtPosition.Text.Trim());
cmd.Parameters.AddWithValue("@Office",txtOffice.Text.Trim());
cmd.Parameters.AddWithValue("@Profile_Picture","images" + FileName);
cmd.ExecuteNonQuery();
ClearTexBox();
}
}
}
}
}

Step 9: Run the project by pressing ctrl+F5.

Screenshot 1

Screenshot 2

Conclusion

In this article, I have explained how we can display employee list with their respective data. I hope this is useful for you.

1 Comment

Join the conversation! Your thoughts help the community grow.

Subhashkumar Yadav8y ago
Hi can you explain this code <script type="text/javascript"> var app = angular .module("myModule", []) .controller("myController", function ($scope, $http) { $http.get("EmployeeService.asmx/GetEmployeeDetails") .then(function (response) { $scope.employees = response.data; }); }) </script>