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.

  1. CREATE TABLE [dbo].[EmployeeDetails](
  2. [ID] [int] IDENTITY(1,1) NOT NULL,
  3. [Name] [nvarchar](50) NULL,
  4. [Position] [nvarchar](50) NULL,
  5. [Office] [nvarchar](50) NULL,
  6. [Profile_Picture] [nvarchar](50) NULL,
  7. CONSTRAINT [PK_EmployeeDetails] PRIMARY KEY CLUSTERED
  8. (
  9. [ID] ASC
  10. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
  11. ) ON [PRIMARY]
  13. GO
  15. CREATE ALTER procedure [dbo].[spAddEmployeeDetails]
  16. (
  17. @Name nvarchar(50),
  18. @Position nvarchar(50),
  19. @Office nvarchar(50),
  20. @Profile_Picture nvarchar(50)
  21. )
  22. as
  23. begin
  24. insert into [dbo].[EmployeeDetails](Name,Position,Office,Profile_Picture)
  25. values(@Name,@Position,@Office,@Profile_Picture)
  26. end
  29. CREATE procedure [dbo].[spGetEmployeeDetails]
  30. as
  31. begin
  32. select ID,Name,Position,Office,Profile_Picture from [dbo].[EmployeeDetails]
  33. end
ASP.NET

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

ASP.NET

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

ASP.NET

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

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

Add the following code to get data.

  1. <system.web>
  2. <webServices>
  3. <protocols>
  4. <add name="HttpGet"/>
  5. </protocols>
  6. </webServices>
  7. </system.web>

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

Add C# class screenshot 1

ASP.NET

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

ASP.NET

Write the following class.

  1. namespace DisplayEmployeeDetails_Demo.Models
  2. {
  3. public class EmployeeDetails
  4. {
  5. public int ID { get; set; }
  6. public string Name { get; set; }
  7. public string Position { get; set; }
  8. public string Office { get; set; }
  9. public Nullable<int>Experience{ get; set; }
  10. public string Profile_Picture { get; set; }
  11. }
  12. }

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

Screenshot for Web Service 1

ASP.NET

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

ASP.NET

Add namespace

  1. using DisplayEmployeeDetails_Demo.Models;
  2. using System.Configuration;
  3. using System.Data;
  4. using System.Data.SqlClient;
  5. using System.Web.Script.Serialization;
  6. using System.Web.Services;
Write the following code in web service
  2. Write following code in web service
  3. [WebMethod]
  4. public void GetEmployeeDetails()
  5. {
  6. List<EmployeeDetails> employeeList = new List<EmployeeDetails>();
  7. string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
  8. using (SqlConnection con = new SqlConnection(CS))
  9. {
  10. SqlCommand cmd = new SqlCommand("spGetEmployeeDetails", con);
  11. cmd.CommandType = CommandType.StoredProcedure;
  12. con.Open();
  13. SqlDataReader rdr = cmd.ExecuteReader();
  15. while (rdr.Read())
  16. {
  17. EmployeeDetails emp = new EmployeeDetails();
  18. emp.ID = Convert.ToInt32(rdr["ID"]);
  19. emp.Name = rdr["Name"].ToString();
  20. emp.Position = rdr["Position"].ToString();
  21. emp.Office = rdr["Office"].ToString();
  22. emp.Profile_Picture = rdr["Profile_Picture"].ToString();
  24. employeeList.Add(emp);
  25. }
  26. }
  28. JavaScriptSerializer js = new JavaScriptSerializer();
  29. Context.Response.Write(js.Serialize(employeeList));
  30. }

Complete web service code

  1. using DisplayEmployeeDetails_Demo.Models;
  2. using System;
  3. using System.Collections.Generic;
  4. using System.Configuration;
  5. using System.Data;
  6. using System.Data.SqlClient;
  7. using System.Web.Script.Serialization;
  8. using System.Web.Services;
  10. namespace DisplayEmployeeDetails_Demo
  11. {
  12. /// <summary>
  13. /// Summary description for EmployeeService
  14. /// </summary>
  15. [WebService(Namespace = "http://tempuri.org/")]
  16. [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
  17. [System.ComponentModel.ToolboxItem(false)]
  18. // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
  19. // [System.Web.Script.Services.ScriptService]
  20. public class EmployeeService : System.Web.Services.WebService
  21. {
  23. [WebMethod]
  24. public void GetEmployeeDetails()
  25. {
  26. List<EmployeeDetails> employeeList = new List<EmployeeDetails>();
  27. string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
  28. using (SqlConnection con = new SqlConnection(CS))
  29. {
  30. SqlCommand cmd = new SqlCommand("spGetEmployeeDetails", con);
  31. cmd.CommandType = CommandType.StoredProcedure;
  32. con.Open();
  33. SqlDataReader rdr = cmd.ExecuteReader();
  35. while (rdr.Read())
  36. {
  37. EmployeeDetails emp = new EmployeeDetails();
  38. emp.ID = Convert.ToInt32(rdr["ID"]);
  39. emp.Name = rdr["Name"].ToString();
  40. emp.Position = rdr["Position"].ToString();
  41. emp.Office = rdr["Office"].ToString();
  42. emp.Profile_Picture = rdr["Profile_Picture"].ToString();
  44. employeeList.Add(emp);
  45. }
  46. }
  48. JavaScriptSerializer js = new JavaScriptSerializer();
  49. Context.Response.Write(js.Serialize(employeeList));
  50. }
  51. }
  52. }

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

Screenshot adding web form 1

ASP.NET

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

Screenshot adding web form 2

ASP.NET

Add the following CDN link for style and script.

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

Write the script to retrieve data from the database.

  2. <script type="text/javascript">
  3. var app = angular
  4. .module("myModule", [])
  5. .controller("myController", function ($scope, $http) {
  6. $http.get("EmployeeService.asmx/GetEmployeeDetails")
  7. .then(function (response) {
  8. $scope.employees = response.data;
  9. });
  10. })
  11. </script>

Design web form

  1. <body ng-controller="myController">
  2. <form id="form1" runat="server">
  3. <div class="container py-4">
  4. <div class="card">
  5. <div class="card-header bg-primary text-white">
  6. <h5 class="card-title text-uppercase">Employee Details</h5>
  7. </div>
  8. <div class="card-body">
  9. <button type="button" class="btn btn-primary rounded-0" data-toggle="modal" data-target="#myModal">
  10. <i class="fa fa-plus-circle"></i>Add New
  11. </button>
  12. <div class="modal" id="myModal">
  13. <div class="modal-dialog modal-lg">
  14. <div class="modal-content">
  15. <div class="modal-header">
  16. <h5 class="modal-title">Employee Details</h5>
  17. <button type="button" class="close" data-dismiss="modal">×</button>
  18. </div>
  19. <div class="modal-body">
  20. <div class="row">
  21. <div class="col-md-6">
  22. <div class="form-group">
  23. <label>Name:</label>
  24. <div class="input-group">
  25. <div class="input-group-prepend">
  26. <span class="input-group-text"><i class="fa fa-user"></i></span>
  27. </div>
  28. <asp:TextBox ID="txtName" CssClass="form-control" runat="server"></asp:TextBox>
  29. </div>
  30. </div>
  31. </div>
  32. <div class="col-md-6">
  33. <div class="form-group">
  34. <label>Position:</label>
  35. <div class="input-group">
  36. <div class="input-group-prepend">
  37. <span class="input-group-text"><i class="fa fa-suitcase"></i></span>
  38. </div>
  39. <asp:TextBox ID="txtPosition" CssClass="form-control" runat="server"></asp:TextBox>
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44. <div class="row">
  45. <div class="col-md-6">
  46. <div class="form-group">
  47. <label>Office:</label>
  48. <div class="input-group">
  49. <div class="input-group-prepend">
  50. <span class="input-group-text"><i class="fa fa-building"></i></span>
  51. </div>
  52. <asp:TextBox ID="txtOffice" CssClass="form-control" runat="server"></asp:TextBox>
  53. </div>
  54. </div>
  55. </div>
  56. <div class="col-md-6">
  57. <div class="form-group">
  58. <label>Profile Picture:</label>
  59. <div class="custom-file">
  60. <asp:FileUpload ID="ProfileFileUpload" CssClass="custom-file-input" runat="server" />
  61. <label class="custom-file-label"></label>
  62. </div>
  63. </div>
  64. </div>
  65. </div>
  66. </div>
  67. <div class="modal-footer">
  68. <asp:Button ID="btnSubmit" CssClass="btn btn-primary rounded-0" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
  69. <button type="button" class="btn btn-danger rounded-0" data-dismiss="modal">Close</button>
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. <div class="row">
  75. <div class="col-md-3 col-sm-6" ng-repeat="emplopye in employees">
  76. <div class="our-team">
  77. <div class="pic">
  78. <img ng-src="{{emplopye.Profile_Picture}}" />
  79. </div>
  80. <h3 class="title">{{emplopye.Name}}</h3>
  81. <span class="post">{{emplopye.Position}}</span>
  82. <span class="post">{{emplopye.Office}}</span>
  83. <ul class="social">
  84. <li><a href="#" class="fa fa-facebook"></a></li>
  85. <li><a href="#" class="fa fa-twitter"></a></li>
  86. <li><a href="#" class="fa fa-google-plus"></a></li>
  87. <li><a href="#" class="fa fa-linkedin"></a></li>
  88. </ul>
  89. </div>
  90. </div>
  91. </div>
  92. </div>
  93. </div>
  94. </form>
  95. </body>

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

  1. .our-team{
  2. padding: 20px 15px 30px;
  3. background: #fff;
  4. text-align: center;
  5. border: 1px solid #1b1e21;
  6. margin-top: 10px;
  7. margin-bottom: 10px;
  8. box-shadow: 1px 1px 1px #212529;
  9. border-radius: 3px;
  10. }
  11. .our-team .pic{
  12. display: inline-block;
  13. width: 100%;
  14. height: 100%;
  15. background: #fff;
  16. padding: 10px;
  17. margin-bottom: 25px;
  18. transition: all 0.5s ease 0s;
  19. }
  20. .our-team:hover .pic{
  21. background: #17bebb;
  22. border-radius: 50%;
  23. }
  24. .pic img{
  25. width: 100%;
  26. height: auto;
  27. border-radius: 50%;
  28. }
  29. .our-team .title{
  30. display: block;
  31. font-size: 16px;
  32. font-weight: 600;
  33. color: #2e282a;
  34. text-transform: uppercase;
  35. margin: 0 0 7px 0;
  36. }
  37. .our-team .post{
  38. display: block;
  39. font-size: 15px;
  40. color: #17bebb;
  41. text-transform: capitalize;
  42. margin-bottom: 10px;
  43. }
  44. .our-team .social{
  45. padding: 0;
  46. margin: 0;
  47. list-style: none;
  48. }
  49. .our-team .social li{
  50. display: inline-block;
  51. margin-right: 5px;
  52. }
  53. .our-team .social li a{
  54. display: block;
  55. width: 30px;
  56. height: 30px;
  57. line-height: 30px;
  58. border-radius: 50%;
  59. font-size: 15px;
  60. color: #17bebb;
  61. border: 1px solid #17bebb;
  62. transition: all 0.5s ease 0s;
  63. }
  64. .our-team:hover .social li a{
  65. background: #17bebb;
  66. color: #fff;
  67. }
  68. @media only screen and (max-width: 990px){
  69. .our-team{ margin-bottom: 30px; }
  70. }
Step 8: Double-click on the Submit button and write the following C# code.

Add namespace

  1. using System.Data;
  2. using System.Data.SqlClient;
  3. using System.Configuration;
  4. using System.IO;

Complete code for C# backend

  1. using System;
  2. using System.Data;
  3. using System.Data.SqlClient;
  4. using System.Configuration;
  5. using System.IO;
  7. namespace DisplayEmployeeDetails_Demo
  8. {
  9. public partial class EmployeesList : System.Web.UI.Page
  10. {
  11. protected void Page_Load(object sender, EventArgs e)
  12. {
  13. if (!IsPostBack)
  14. {
  15. ClearTexBox();
  16. }
  17. }
  19. private void ClearTexBox()
  20. {
  21. txtName.Text = string.Empty;
  22. txtPosition.Text = string.Empty;
  23. txtOffice.Text = string.Empty;
  24. }
  26. protected void btnSubmit_Click(object sender, EventArgs e)
  27. {
  28. if (ProfileFileUpload.PostedFile!=null)
  29. {
  30. string FileName = Path.GetFileName(ProfileFileUpload.PostedFile.FileName);
  31. ProfileFileUpload.SaveAs(Server.MapPath("/images" + FileName));
  33. string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
  34. using (SqlConnection con = new SqlConnection(CS))
  35. {
  36. SqlCommand cmd = new SqlCommand("spAddEmployeeDetails",con);
  37. cmd.CommandType = CommandType.StoredProcedure;
  38. con.Open();
  39. cmd.Parameters.AddWithValue("@Name",txtName.Text.Trim());
  40. cmd.Parameters.AddWithValue("@Position",txtPosition.Text.Trim());
  41. cmd.Parameters.AddWithValue("@Office",txtOffice.Text.Trim());
  42. cmd.Parameters.AddWithValue("@Profile_Picture","images" + FileName);
  43. cmd.ExecuteNonQuery();
  44. ClearTexBox();
  45. }
  46. }
  47. }
  48. }
  49. }

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

Screenshot 1

ASP.NET

Screenshot 2

ASP.NET

Conclusion

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