How To Get Data Using Angular in ASP.NET

In this post we will discuss how to get data from the SQL server database using angular js in asp.net. We will learn some angular directives in this blog.

Introduction

In this post we will discuss how to get data from the SQL server database using Angular JS in asp.net. We will learn some Angular directives in this blog.

AngularJS has a set of built-in directives which offers functionality to your applications.

• ng-app: This directive initializes an AngularJS application
• ng-module: This directive binds the value of HTML controls (input, select, textarea) to application data.
• ng-controller: Defines the controller object for an application
• ng-repeat: Defines a template for each data in a collection.
• ng-src: Specifies the src attribute for the <img> element.
• Filter: Selects a subset of items from array and returns it as a new array
• Currency filter: Format a number to a currency format.

Step 1

Create a database in the SQL server of your choice.

CREATE TABLE [dbo].[Employee](
    [ID] [int] IDENTITY(1,1) NOT NULL,
    [Name] [nvarchar](50) NULL,
    [Position] [nvarchar](50) NULL,
    [Office] [nvarchar](50) NULL,
    [Salary] [int] NULL,
    [Profile_Image] [nvarchar](50) NULL,
 CONSTRAINT [PK__Employee] 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]
)

CREATE procedure [dbo].[spGetAllEmployee]
as
begin
select ID,Name,Position,Office,Salary,Profile_Image from [dbo].[Employee]
end

Step 2

Create an empty project in visual studio of your choice. Add connection in webconfig file. Change data source and database.

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

Add the below script in webconfig file to work with get request and avoid internal server error.

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

Step 3

Create class -- right click, select new item, choose class, and  give the name employees

public class Employees
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public string Position { get; set; }
        public string Office { get; set; }
        public int Salary { get; set; }
        public string Profile_Image { get; set; }
    }

Step 4

Create web service -- right click, select new item, choose web service asmx, and give it a meaningful name

Add namespace

using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;

Create web method to call data 

[WebMethod]
        public void GetAllEmployees()
        {
            List<Employees> employeeList = new List<Employees>();
            string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
            using (SqlConnection con = new SqlConnection(CS))
            {
                SqlCommand cmd = new SqlCommand("spGetAllEmployee", con);
                cmd.CommandType = CommandType.StoredProcedure;
                con.Open();
                SqlDataReader rdr = cmd.ExecuteReader();

                while (rdr.Read())
                {
                    Employees emp = new Employees();
                    emp.ID = Convert.ToInt32(rdr["ID"]);
                    emp.Name = rdr["Name"].ToString();
                    emp.Position= rdr["Position"].ToString();
                    emp.Office= rdr["Office"].ToString();
                    emp.Salary= Convert.ToInt32(rdr["Salary"]);
                    emp.Profile_Image= rdr["Profile_Image"].ToString();

                    employeeList.Add(emp);
                }
            }

            JavaScriptSerializer js = new JavaScriptSerializer();
            Context.Response.Write(js.Serialize(employeeList));
        }

Step 5

Create web form with meaningful name and an images folder to add some images.

Add script and style in head section.

<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://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>

Write Angular script to call web service.

<script type="text/javascript">
        var app = angular
        .module("myModule", [])
        .controller("myController", function ($scope, $http) {

            $http.get("EmployeeService.asmx/GetAllEmployees")
                 .then(function (response) {
                     $scope.employees = response.data;
                 });
        })
</script>

Design html

<body ng-app="myModule">
    <form id="form1" runat="server">
        <div class="container" ng-controller="myController">
            <h3 class="text-center">How to GetData using Angular JS in ASP.NET</h3>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Search:</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fa fa-search"></i></span>
                            </div>
                            <input type="text" class="form-control " placeholder="Search employees" ng-model="searchText" />
                        </div>
                    </div>
                </div>
            </div>
            <table class="table table-bordered table-striped">
                <thead class="bg-dark text-white text-uppercase">
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Salary</th>
                        <th>Profile Picture</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="emplopye in employees|filter:searchText">
                        <td>{{emplopye.ID}}</td>
                        <td>{{emplopye.Name}}</td>
                        <td>{{emplopye.Position}}</td>
                        <td>{{emplopye.Office}}</td>
                        <td>{{emplopye.Salary| currency}}</td>
                        <td>
                            <img ng-src="{{emplopye.Profile_Image}}" class="img-thumbnail" style="width: 50px; height: 50px;" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </form>
</body>

Complete web page code

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Employee</title>
    <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://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>
    <script type="text/javascript">
        var app = angular
        .module("myModule", [])
        .controller("myController", function ($scope, $http) {

            $http.get("EmployeeService.asmx/GetAllEmployees")
                 .then(function (response) {
                     $scope.employees = response.data;
                 });
        })
    </script>
</head>
<body ng-app="myModule">
    <form id="form1" runat="server">
        <div class="container" ng-controller="myController">
            <h3 class="text-center">How to GetData using Angular JS in ASP.NET</h3>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Search:</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fa fa-search"></i></span>
                            </div>
                            <input type="text" class="form-control " placeholder="Search employees" ng-model="searchText" />
                        </div>
                    </div>
                </div>
            </div>
            <table class="table table-bordered table-striped">
                <thead class="bg-dark text-white text-uppercase">
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Salary</th>
                        <th>Profile Picture</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="emplopye in employees|filter:searchText">
                        <td>{{emplopye.ID}}</td>
                        <td>{{emplopye.Name}}</td>
                        <td>{{emplopye.Position}}</td>
                        <td>{{emplopye.Office}}</td>
                        <td>{{emplopye.Salary| currency}}</td>
                        <td>
                            <img ng-src="{{emplopye.Profile_Image}}" class="img-thumbnail" style="width: 50px; height: 50px;" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </form>
</body>
</html>

Step 5

Run project ctr+F5

Final output on bowser: