Bind (Populate) ng-grid from Database using AngularJS in ASP.Net

Last Reply 5 days ago By dharmendr

Posted 6 days ago

How to use ng-grid in angularjs in asp.net to bind data from database.

Posted 5 days ago

Hi rani,

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>ng-grid</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <link rel="stylesheet" href="//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/ng-grid.css" />
    <script type="text/javascript" src="//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/build/ng-grid.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['ngGrid']);
        app.controller('MyController', function ($scope, $http) {
            $http.post("Default.aspx/GetEmployees", { headers: { 'Content-Type': 'application/json'} })
            .then(function (response) {
                $scope.Employees = response.data.d;
            }, function error(response) {
                alert(response.responseText);
            });
            $scope.GridOptions = {
                data: 'Employees',
                enablePinning: false,
                columnDefs: [{ field: "Id",width: 50, pinned: true },
                            { field: "Name", width: 150 },
                            { field: "City", width: 100 },
                            { field: "Country", width: 100}]
            };
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div ng-app="MyApp" ng-controller="MyController">
        <div ng-grid="GridOptions" style="width: 400px; height: 500px">
        </div>
    </div>
    </form>
</body>
</html>

Namespaces

C#

using System.Configuration;
using System.Data.SqlClient;
using System.Web.Services;

VB.Net

Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Web.Services

Code

C#

[WebMethod]
public static List<Employee> GetEmployees()
{
    List<Employee> employees = new List<Employee>();
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    string query = "SELECT EmployeeID,FirstName,LastName,City,Country FROM Employees";
    using (SqlConnection con = new SqlConnection(conString))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            cmd.Connection = con;
            con.Open();
            SqlDataReader sdr = cmd.ExecuteReader();
            while (sdr.Read())
            {
                employees.Add(new Employee
                {
                    Id = Convert.ToInt32(sdr["EmployeeID"]),
                    Name = sdr["FirstName"].ToString() + " " + sdr["LastName"].ToString(),
                    City = sdr["City"].ToString(),
                    Country = sdr["Country"].ToString(),
                });
            }
            con.Close();
        }
    }

    return employees;
}

public class Employee
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
}

VB.Net

<WebMethod()>
Public Shared Function GetEmployees() As List(Of Employee)
    Dim employees As List(Of Employee) = New List(Of Employee)()
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim query As String = "SELECT EmployeeID,FirstName,LastName,City,Country FROM Employees"
    Using con As SqlConnection = New SqlConnection(conString)
        Using cmd As SqlCommand = New SqlCommand(query)
            cmd.Connection = con
            con.Open()
            Dim sdr As SqlDataReader = cmd.ExecuteReader()
            While sdr.Read()
                employees.Add(New Employee With {
                    .Id = Convert.ToInt32(sdr("EmployeeID")),
                    .Name = sdr("FirstName").ToString() & " " + sdr("LastName").ToString(),
                    .City = sdr("City").ToString(),
                    .Country = sdr("Country").ToString()
                })
            End While
            con.Close()
        End Using
    End Using
    Return employees
End Function

Public Class Employee
    Public Property Id As Integer
    Public Property Name As String
    Public Property City As String
    Public Property Country As String
End Class

Screenshot

For more details refer below link.

https://www.c-sharpcorner.com/UploadFile/dev4634/using-ng-grid-in-angular-ui-pages/