In this tutorial, we are going to learn about Web Grid in ASP.NET MVC.

After completing this tutorial you will be able to understand:

  • What is Web Grid in ASP.NET MVC?
  • How to create an example using Web Grid in ASP.NET MVC.

Introduction:

Reporting is very mandatory part of any web application. In ASP.NET Web Form development we chose GridView, DataList or Repeater control for showing data. But we don’t have any build in controls in ASP.NET MVC. In this way, Web Grid does almost same work of GridView. WebGrid is lightweight for showing tabular data in ASP.NET MVC.

Web Grid

An example of Web Grid in ASP.NET MVC:

Step 1- Open SQL Server.

Step 2- Create Database using following script.

CREATE DATABASE WebGridDemo

Step 3- Create a table with the name Employee using following script.

USE WebGridDemo

Create TABLE dbo.Employee

(

ID INT PRIMARY KEY,

Name NVARCHAR(100),

Address NVARCHAR(150),

ContactNo NVARCHAR(20)

)

Step 4- Insert few records into Employee.

INSERT INTO dbo.Employee (ID,Name,Address,ContactNo) VALUES(1,'Ansh','New Delhi','0000000000')
INSERT INTO dbo.Employee (ID,Name,Address,ContactNo) VALUES(2,'Vikrant','Mumbai','0000000000')
INSERT INTO dbo.Employee (ID,Name,Address,ContactNo) VALUES(3,'Nikhil','Mumbai','0000000000')
INSERT INTO dbo.Employee (ID,Name,Address,ContactNo) VALUES(4,'Sohail','Pune','0000000000')
INSERT INTO dbo.Employee (ID,Name,Address,ContactNo) VALUES(5,'Dheerak','Allahabad','0000000000')
INSERT INTO dbo.Employee (ID,Name,Address,ContactNo) VALUES(6,'Vivke','Nagpur','0000000000')
INSERT INTO dbo.Employee (ID,Name,Address,ContactNo) VALUES(7,'Karan','Noida','0000000000')
INSERT INTO dbo.Employee (ID,Name,Address,ContactNo) VALUES(8,'Manish','Mumbai','0000000000')
INSERT INTO dbo.Employee (ID,Name,Address,ContactNo) VALUES(9,'Vishal','Gwalior','0000000000')
INSERT INTO dbo.Employee (ID,Name,Address,ContactNo) VALUES(10,'Parag','Mumbai','0000000000')
INSERT INTO dbo.Employee (ID,Name,Address,ContactNo) VALUES(11,'Arvind','Mumbai','0000000000')

Step 5- Open Visual Studio and Create an ASP.NET MVC application with the name WebGridDemo. Click OK.

Web Grid

Step 6- Choose an empty template and Click on the OK button.

Your ASP.NET MVC application will look like this.

Web Grid

Step 7- Right Click on the Model folder and create a class with the name Employee.

Step 8- Replace your Employee Model code with the code below.

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

namespace WebGridDemo.Models
{
 public class Employee
 {
 public int ID { get; set; }
 public string Name { get; set; }
 public string Address { get; set; }
 public string ContactNo { get; set; }
 }
}

Step 9- Add the connection string to after Configuration tag in web.config.

<configuration>
<connectionStrings>
<add name="dbCon" connectionString="Data Source=DESKTOP-9VC12LL\SQLEXPRESS;Initial Catalog=WebGridDemo;Integrated Security=true;" providerName="System.Data.SqlClient"/>
</connectionStrings>

Your web.config file will look like this.

Web Grid

Step 10- Right Click on the Controller folder and add a Controller with the name Home.

Step 11- Your Home Controller will have this default code.

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

namespace WebGridDemo.Controllers
{
 public class HomeController : Controller
 {
 //
 // GET: /Home/

public ActionResult Index()
 {
 return View();
 }

}
}

Step 12- Replace your Index action method code with the following code.

public ActionResult Index()
 {
 List<Employee> lstEmployee = new List<Employee>();

try
 {

Employee objEmployee = null;

using (SqlConnection dbCon = new SqlConnection(ConfigurationManager.ConnectionStrings["dbCon"].ConnectionString))
 {

using (SqlCommand cmdGetEmployee = new SqlCommand("Select * From Employee", dbCon))
 {

if (dbCon.State == ConnectionState.Closed)
 dbCon.Open();

using(SqlDataReader drGetEmployee = cmdGetEmployee.ExecuteReader())
 {
 while (drGetEmployee.Read())
 {

objEmployee = new Employee();

objEmployee.ID = drGetEmployee.GetInt32(0);

objEmployee.Name = drGetEmployee.GetString(1);

objEmployee.Address = drGetEmployee.GetString(2);

objEmployee.ContactNo = drGetEmployee.GetString(3);

lstEmployee.Add(objEmployee);
 }
 }
 }
 }
 }

catch (Exception ex)

{ }

return View(lstEmployee);
 }



The complete code for Home Controller is as follow:

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebGridDemo.Models;

namespace WebGridDemo.Controllers
{
 public class HomeController : Controller
 {
 //
 // GET: /Home/

public ActionResult Index()
 {
 List<Employee> lstEmployee = new List<Employee>();

try
 {

Employee objEmployee = null;

using (SqlConnection dbCon = new SqlConnection(ConfigurationManager.ConnectionStrings["dbCon"].ConnectionString))
 {

using (SqlCommand cmdGetEmployee = new SqlCommand("Select * From Employee", dbCon))
 {

if (dbCon.State == ConnectionState.Closed)
 dbCon.Open();

using(SqlDataReader drGetEmployee = cmdGetEmployee.ExecuteReader())
 {
 while (drGetEmployee.Read())
 {

objEmployee = new Employee();

objEmployee.ID = drGetEmployee.GetInt32(0);

objEmployee.Name = drGetEmployee.GetString(1);

objEmployee.Address = drGetEmployee.GetString(2);

objEmployee.ContactNo = drGetEmployee.GetString(3);

lstEmployee.Add(objEmployee);
 }
 }
 }
 }
 }

catch (Exception ex)

{ }

return View(lstEmployee);
 }

}
}

Step 13- Right Click on the Index action method and add a View with the name Index.

Step 14- Write following code in Index.cshtml file.

 

@{

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>Web Grid Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
.webGrid {
margin: 4px;
border-collapse: collapse;
width: 500px;
background-color: #FCFCFC;
}

.header {
background-color: #C1D4E6;
font-weight: bold;
color: #FFF;
}

.webGrid th, .webGrid td {
border: 1px solid #C0C0C0;
padding: 5px;
}

.alt {
background-color: #E4E9F5;
color: #000;
}

.gridHead a:hover {
text-decoration: underline;
}

.address {
width: auto;
}

.select {
background-color: #389DF5;
}
</style>

</head>

<body>

@{

WebGridDemo.Models.Employee objEmployee = new WebGridDemo.Models.Employee();

}

@{

var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent");

grid.Pager(WebGridPagerModes.NextPrevious);}

<div id="gridContent">

@grid.GetHtml(tableStyle: "webGrid",

headerStyle: "header",

alternatingRowStyle: "alt",

selectedRowStyle: "select",

columns: grid.Columns(

grid.Column("ID", format: (item) => item.GetSelectLink(Convert.ToString( item.ID))),

grid.Column("Name", "Name"),

grid.Column("Address", "Address", style: "address"),

grid.Column("ContactNo", "ContactNo")

))

@if (grid.HasSelection)
{

objEmployee = (WebGridDemo.Models.Employee)grid.Rows[grid.SelectedIndex].Value;

<b>Id</b> @objEmployee.ID<br />

<b>Name</b> @objEmployee.Name<br />

<b>Address</b> @objEmployee.Address<br />

<b>Contact</b> @objEmployee.ContactNo<br />

}

</div>

</body>

</html>

Run the application and  check the output:

Web Grid

Hope you are now clear about how to show data in ASP.NET MVC.

You can download complete source code of the application from here.

You must also follow the related links:

Thank You

Leave a Comment