Display Data from Database in HTML Table using AngularJS in ASP.Net

Last Reply 11 months ago By dharmendr

Posted 11 months ago

fetch data in asp.net Using Angular JS not working

in this code data not display on my borwser.. a data is load in my DataTable in C# but data not display on browser..

please help me how to solve this problem. i am fresher..

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <!--<script src="../JS/angular.min.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="../JS/jquery-3.3.1.min.js"></script>    
</head>
<body>
    <div ng-app="myApp" ng-controller="empDetails">
        <table>
            <tr ng-repeat="obj in names">
                <td>{{ obj.EmployeeID }}</td>
                <td>{{ obj.FirstName }}</td>
                <td>{{ obj.LastName }}</td>
                <td>{{ obj.MobileNo }}</td>
                <td>{{ obj.Area }}</td>
            </tr>
        </table>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('empDetails', function ($scope, $http) {
            $http.get("../Jquery_Examples/display_Data.aspx")
            .then(function (response) { $scope.names = response.data.records; });
        });
    </script>
</body>
</html>

//-----------C# code-----------------

this method call in pageLoad.

private void bindGrid()
{
    conn = new SqlConnection(getConnection);
    dtEmployee = new DataTable();
    try
    {
        conn.Open();
        string query = "select EmployeeID, FirstName, LastName,  MobileNo, Area from CRMEmployee where EmployeeID between 1 AND 20";
        adapter = new SqlDataAdapter(query, conn);
        adapter.Fill(dtEmployee);
        grdemp.DataSource = dtEmployee;
        grdemp.DataBind();
        ViewState("employeeData") = dtEmployee;
    }
    catch (Exception ex)
    {
        Response.Write(ex.Message.ToString());
    }
    finally
    {
        if (conn.State == ConnectionState.Open)
            conn.Close();
    }
}

 

Posted 11 months ago

Hi RahurkarP,

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
    var app = angular.module('myApp', []);
    app.controller('empDetails', function ($scope, $http, $window) {
        $http.post("Default.aspx/bindGrid", { headers: { 'Content-Type': 'application/json'} })
        .then(function (response) {
            $scope.names = eval(response.data.d);
        }, function error(response) {
            alert(response.responseText);
        });
    });
</script>
<div ng-app="myApp" ng-controller="empDetails">
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>City</th>
                <th>Country</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="obj in names">
                <td>{{ obj.EmployeeId }}</td>
                <td>{{ obj.FirstName }}</td>
                <td>{{ obj.LastName }}</td>
                <td>{{ obj.City }}</td>
                <td>{{ obj.Country }}</td>
            </tr>
        </tbody>
    </table>
</div>

Namespaces

C#

using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;

VB.Net

Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Web.Script.Serialization
Imports System.Web.Services

Code

C#

[WebMethod]
public static string bindGrid()
{
    List<object> employees = new List<object>();
    string sql = "SELECT EmployeeID,FirstName,LastName,City,Country FROM Employees";
    using (SqlConnection conn = new SqlConnection())
    {
        conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlCommand cmd = new SqlCommand(sql))
        {
            cmd.Connection = conn;
            conn.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    employees.Add(new
                    {
                        EmployeeId = sdr["EmployeeID"],
                        FirstName = sdr["FirstName"],
                        LastName = sdr["LastName"],
                        City = sdr["City"],
                        Country = sdr["Country"]
                    });
                }
            }
            conn.Close();
        }
        return (new JavaScriptSerializer().Serialize(employees));
    }
}

VB.Net

<WebMethod()>
Public Shared Function bindGrid() As String
    Dim employees As List(Of Object) = New List(Of Object)()
    Dim sql As String = "SELECT EmployeeID,FirstName,LastName,City,Country FROM Employees"
    Using conn As SqlConnection = New SqlConnection()
        conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using cmd As SqlCommand = New SqlCommand(sql)
            cmd.Connection = conn
            conn.Open()
            Using sdr As SqlDataReader = cmd.ExecuteReader()
                While sdr.Read()
                    employees.Add(New With { _
                    .EmployeeId = sdr("EmployeeID"),
                    .FirstName = sdr("FirstName"),
                    .LastName = sdr("LastName"),
                    .City = sdr("City"),
                    .Country = sdr("Country")
                })
                End While
            End Using
            conn.Close()
        End Using

        Return (New JavaScriptSerializer().Serialize(employees))
    End Using
End Function

Screenshot