Hello readers, In this session we will see a basic usage of ng-grid in ASP.NET MVC.  This example will demonstrate you to Display records in a grid using ng-grid Angular Js.

After completing this tutorial what you’ll learn?

  • Basic usage of ng-grid in ASP.NET MVC to display records.

What you’ll do?

  • Create an ASP.NET MVC application that will use ng-grid to Display Record.

Basic usage of ng-grid in ASP.NET MVC:

We are already familiar with Jquery Data Table from our previous session to display records in the tabular format. Here we will see how can we display records in the tabular format using a different approach called ng-grid.

Required JS files:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.js"></script>

Required CSS files:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.css">

Example:

Create an ASP.NET MVC application called nggridDemo. Choose an empty template and proceed.

1- Create a Database and Table

CREATE DATABASE Debugonweb

USE [Debugonweb]
GO

/****** Object: Table [dbo].[Employee] Script Date: 08-10-2018 22:59:53 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

SET ANSI_PADDING ON
GO

CREATE TABLE [dbo].[Employee](
[EmployeeID] [bigint] IDENTITY(1,1) NOT NULL,
[EmployeeName] [varchar](50) NULL,
[Gender] [varchar](10) NULL,
[Address] [varchar](50) NULL,
[State] [varchar](50) NULL,
[City] [varchar](50) NULL,
[Status] [varchar](20) NULL,
CONSTRAINT [PK__Employee__3214EC274AA9A371] PRIMARY KEY CLUSTERED
(
[EmployeeID] 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

SET ANSI_PADDING OFF
GO

2- Insert Dummy Data

USE [Debugonweb]
GO
SET IDENTITY_INSERT [dbo].[Employee] ON

GO
INSERT [dbo].[Employee] ([EmployeeID], [EmployeeName], [Gender], [Address], [State], [City], [Status]) VALUES (1, N'Vinod', N'Male', N'Varanasi', N'UP', N'Varanasi', N'Active')
GO
INSERT [dbo].[Employee] ([EmployeeID], [EmployeeName], [Gender], [Address], [State], [City], [Status]) VALUES (2, N'Manoj', N'Male', N'Varanasi', N'UP', N'Varanasi', N'Active')
GO
INSERT [dbo].[Employee] ([EmployeeID], [EmployeeName], [Gender], [Address], [State], [City], [Status]) VALUES (3, N'Ansh', N'Male', N'Varanasi', N'UP', N'Varanasi', N'Active')
GO
INSERT [dbo].[Employee] ([EmployeeID], [EmployeeName], [Gender], [Address], [State], [City], [Status]) VALUES (4, N'Ritesh', N'Male', N'Varanasi', N'UP', N'Varanasi', N'Active')
GO
INSERT [dbo].[Employee] ([EmployeeID], [EmployeeName], [Gender], [Address], [State], [City], [Status]) VALUES (5, N'Vishwas', N'Male', N'Varanasi', N'UP', N'Varanasi', N'Active')
GO
INSERT [dbo].[Employee] ([EmployeeID], [EmployeeName], [Gender], [Address], [State], [City], [Status]) VALUES (6, N'Ansh', N'Male', N'Varanasi', N'UP', N'Varanasi', N'Active')
GO
INSERT [dbo].[Employee] ([EmployeeID], [EmployeeName], [Gender], [Address], [State], [City], [Status]) VALUES (7, N'Varali', N'Male', N'Varanasi', N'UP', N'Varanasi', N'Active')
GO
INSERT [dbo].[Employee] ([EmployeeID], [EmployeeName], [Gender], [Address], [State], [City], [Status]) VALUES (8, N'Nitin', N'Male', N'Varanasi', N'UP', N'Varanasi', N'Active')
GO
INSERT [dbo].[Employee] ([EmployeeID], [EmployeeName], [Gender], [Address], [State], [City], [Status]) VALUES (9, N'Vikas', N'Male', N'Varanasi', N'UP', N'Varanasi', N'Active')
GO
INSERT [dbo].[Employee] ([EmployeeID], [EmployeeName], [Gender], [Address], [State], [City], [Status]) VALUES (10, N'Ritwik', N'Male', N'Varanasi', N'UP', N'Varanasi', N'Active')
GO
INSERT [dbo].[Employee] ([EmployeeID], [EmployeeName], [Gender], [Address], [State], [City], [Status]) VALUES (11, N'Arohi', N'Male', N'Varanasi', N'UP', N'Varanasi', N'Active')
GO
INSERT [dbo].[Employee] ([EmployeeID], [EmployeeName], [Gender], [Address], [State], [City], [Status]) VALUES (12, N'Ketan', N'Male', N'Varanasi', N'UP', N'Varanasi', N'Active')
GO
SET IDENTITY_INSERT [dbo].[Employee] OFF
GO

Create ASP.NET MVC application:

Step 1: Create an ASP.NET MVC application called nggridDemo. Choose an empty template and proceed.

Step 2- I am using Entity Framework for fetching records from SQL Server so we need to Install the Entity Framework. Goto Tool > Library Package Manager > Manage NuGet Packages For Solutions.

Step 3- Right Click on the Model folder and Create a class with the name Employee and write the following code in Employee class.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations.Schema;
using System.ComponentModel.DataAnnotations;
namespace nggridDemo.Models
{
[Table("Employee")]
public class Employee
{
[Key]
public Int64 EmployeeID { get; set; }
public string EmployeeName { get; set; }
public string Gender { get; set; }
public string Address { get; set; }
public string State { get; set; }
public string City { get; set; }
public string Status { get; set; }

}
}

Step 4-  Right Click on the Model Folder and Create a Class EmployeeDbContext and write the following code in EmployeeDbContext class.

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;

namespace nggridDemo.Models
{
public class EmployeeDbContext : DbContext
{
public DbSet<Employee> Employee { get; set; }
protected override void OnModelCreating(DbModelBuilder modelBuilder)
{
Database.SetInitializer<EmployeeDbContext>(null);
base.OnModelCreating(modelBuilder);
}
}
}

Step 5- Add the following Connection String in the web.config class with the name EmployeeDbContext.

<connectionStrings>
<add name="EmployeeDbContext" connectionString="data source=DESKTOP-CN5IQI9\SQLEXPRESS;Initial Catalog=Debugonweb;integrated security=True;" providerName="System.Data.SqlClient" />

</connectionStrings>

Step 6- Right Click on the Controller folder and Create a Controller with the name HomeController.

using nggridDemo.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace nggridDemo.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
EmployeeDbContext objEmployeeDbContext = new EmployeeDbContext();
public ActionResult Index()
{

return View();
}
public JsonResult GetEmployeeData()
{
List<Employee> lstEmployees = objEmployeeDbContext.Employee.ToList();
return Json(lstEmployees,JsonRequestBehavior.AllowGet);
}

}
}

Step 7-  Right Click on the Index Action method and add a View with the name Index.

@{
ViewBag.Title = "Index";
Layout = null;
}

<html>
<head>
<title>
ng-grid Example
</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.css">
<style type="text/css">
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 100%;
height: 180px;
}
.ng1539702915996 .colt0 {
width:100%;
}

</style>
</head>

<body ng-app="ngGridApp">
<div ng-controller="NgGridController">
<div class="gridStyle" ng-grid="gridOptions"></div>
</div>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.js"></script>
<script type="text/javascript">
var app = angular.module('ngGridApp', ['ngGrid']);

app.controller('NgGridController',
function ($scope,$http) {
var resp = $http({
method: "get",
url: "/Home/GetEmployeeData",
data: null
});
resp.then(function (res) {

$scope.data =res.data;
 
 
}, function (err) {

alert(err);
});
$scope.gridOptions = { data: 'data' };


}
);
</script>
</body>

</html>

Output:

ng-grid

View More:

Conclusion:

I hope this is a useful topic for you to learn. Please don’t hesitate to comment for any technical help. Your feedback and suggestions are always welcome.

Leave a Comment