Web Grid helper in a MVC 4Razor application using ADO.NET Entity Data Model

Hi friends, in this article I will explain about How to use Web Grid helper in a MVC 4 Razor application using ADO.NET Entity Data Model.
I already explained in the previous articles about  Export Data from Database Table to Excel File in MVC ASP.NET, MVC Jquery UI accordion expand/collaspe all in ASP.NET and How to Upload and delete Uploaded file in MVC

First we need to understand what a Web Grid Helper in MVC is.

Using the WebGrid helper is an easier way to display data.

The WebGrid helper:

• Automatically sets up an HTML table to display data
• Supports different options for formatting
• Supports paging through data
• Supports Sorting by clicking on column headings

Table SQL Script

CREATE TABLE USERS (   User_id int IDENTITY (1, 1),   UserName varchar(100),   Gender varchar(10),   Address varchar(200) ) INSERT INTO USERS (UserName, Gender, Address)   VALUES ('Kishore', 'Male', 'XXXXXXXX') INSERT INTO USERS (UserName, Gender, Address)   VALUES ('Satyam', 'Male', 'XXXXXXXX') INSERT INTO USERS (UserName, Gender, Address)   VALUES ('Rithvika', 'Female', 'XXXXXXXX') INSERT INTO USERS (UserName, Gender, Address)   VALUES ('Manika', 'Female', 'XXXXXXXX') INSERT INTO USERS (UserName, Gender, Address)   VALUES ('SambhaShiva', 'Male', 'XXXXXXXX')

Create ADO.NET Entity Data Model and take one table name as USERS as shown in the below figure.

The User.edmx is as shown in the below figure.

Model(UserModel.cs):

using System; using System.Collections; using System.Collections.Generic; using System.Linq; using System.Web; namespace Mvc4WebGridADO.Models {     public class UserModel:IDisposable     {         private readonly TestEntities userEntity = new TestEntities();         public IEnumerable GetUser()         {             return userEntity.USERS.ToList();         }         public void Dispose()         {             userEntity.Dispose();         }     } }

Controller(UserController.cs):

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using Mvc4WebGridADO.Models; namespace Mvc4WebGridADO.Controllers {     public class UserController : Controller     {         public ActionResult GetAllUsers()         {             var userData = new UserModel().GetUser();             return View(userData);         }     } }

View(GetAllUsers.cs):

@model IEnumerable<Mvc4WebGridADO.USER> @{     ViewBag.Title = "Display User Data";     WebGrid grid = new WebGrid(Model); } <style type="text/css">     .webGrid     {         margin: 4px;         border-collapse: collapse;         width: 500px;         font-family:Tahoma;     }     .grid-header     {         background-color: #990000;         font-weight: bold;         color: White !important;     }     .webGrid th a     {         color: White;         text-decoration: none;     }     .webGrid th, .webGrid td     {         border: 1px solid black;         padding: 5px;     }     .alt     {         background-color: #F4EFEF;     }      .webGrid th a:hover     {         text-decoration: underline;     }     .to-the-right     {         text-align: right;     } </style> <h2>     Display User Data</h2> @grid.GetHtml( tableStyle: "webGrid", fillEmptyRows: true, alternatingRowStyle: "alt", headerStyle: "grid-header", footerStyle: "foot-grid", mode: WebGridPagerModes.All, firstText: "<< First", previousText: " < Previous", nextText: "Next >", lastText: "Last >>", caption: "User Data", emptyRowCellValue: null, columns: new[]{     grid.Column("User_ID",header:"User ID",style:"to-the-right"),     grid.Column("UserName"),     grid.Column("Gender"),     grid.Column("Address") } )

The output of the above code as shown in the below figure.

When you click on page no 3 then it displays 3rd page.

You can download the code by clicking on the below Download image.