Basic Implementation Of WebGrid Control In ASP.NET MVC 4.0

In ASP.NET, we use GridView for fetching the data and showing the output. Also, we implement CRUD operationss using GridView. We can do the same implementation in ASP.NET MVC using WebGrid.

In this blog, today, I will show you how to write code in ASP.NET MVC for implementation of WebGrid Control using Static Data. In later sessions, I will show you the process of using GridView Dynamically, that means using SQL Server data source.

Steps for creating WebGrid

1. First, create an application named WebgridOrGridview.
   
   
   
   
2. Create a Class file in Models folder Employee.cs.
   

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Web;
   namespace WebgridOrGridview.Models {
       public class Employee {
           public string FirstName {
               get;
               set;
           }
           public string LastName {
               get;
               set;
           }
           public double Salary {
               get;
               set;
           }
           public static List < Employee > GetList() {
               List < Employee > Employees = new List < Employee > {
                   new Employee {
                       FirstName = "Satyaprakash1", LastName = "Samantaray1", Salary = 45000
                   },
                   new Employee {
                       FirstName = "Satyaprakash2", LastName = "Samantaray2", Salary = 25000
                   },
                   new Employee {
                       FirstName = "Satyaprakash3", LastName = "Samantaray3", Salary = 25000
                   },
                   new Employee {
                       FirstName = "Satyaprakash4", LastName = "Samantaray4", Salary = 35000
                   },
                   new Employee {
                       FirstName = "Satyaprakash5", LastName = "Samantaray5", Salary = 65000
                   },
                   new Employee {
                       FirstName = "Satyaprakash6", LastName = "Samantaray6", Salary = 75000
                   },
                   new Employee {
                       FirstName = "Satyaprakash7", LastName = "Samantaray7", Salary = 85000
                   },
                   new Employee {
                       FirstName = "Satyaprakash8", LastName = "Samantaray8", Salary = 95000
                   },
               };
               return Employees;
           }
       }
   }

   Here, I have added some static data which can be shown in rows of WebGrid.
   
   
   
   
3. Create a Controller named HomeController.cs.
   

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Web;
   using System.Web.Mvc;
   using WebgridOrGridview.Models;
   namespace WebgridOrGridview.Controllers {
       public class HomeController: Controller {
           public ActionResult show() {
               var empoyees = Employee.GetList(); //Reference of Model Class File.
               return View(empoyees);
           }
       }
   }



4. Add a View in Views folder named show.cshtml.
   

   @ * @model IEnumerable < WebgridOrGridview.Models.Employee > * @
   @ {
       Layout = null;
   }
   @ {
       var grid = new WebGrid(source: Model, defaultSort: "FirstName", rowsPerPage: 3);
   } < h2 style = "color:blue" > Web Grid In MVC4 < /h2> < style type = "text/css" >
       /*Here we will add css for style webgrid*/
       .webgrid - table {
           font - family: "Trebuchet MS", Arial, Helvetica, sans - serif;
           font - size: 1.2e m;
           width: 100 % ;
           display: table;
           border - collapse: separate;
           border: solid 1 px blue;
           background - color: white;
       }.webgrid - table td, th {
           border: 1 px solid blue;
           padding: 3 px 7 px 2 px;
       }.webgrid - header {
           background - color: yellow;
           color: red;
           padding - bottom: 4 px;
           padding - top: 5 px;
           text - align: left;
       }
       /*.webgrid-footer {
   
       }*/
       .webgrid - row - style {
           padding: 3 px 7 px 2 px;
       }.webgrid - alternating - row {
           background - color: pink;
           padding: 3 px 7 px 2 px;
       } /*for alteranating row style*/ < /style> < div id = "grid" > @grid.GetHtml(tableStyle: "webgrid-table", headerStyle: "webgrid-header",
           //footerStyle: "webgrid-footer",
           alternatingRowStyle: "webgrid-alternating-row", rowStyle: "webgrid-row-style", mode: WebGridPagerModes.All, firstText: "<< First", previousText: "< Prev", nextText: "Next >", lastText: "Last >>", //add next or prev link in webgrid
           columns: grid.Columns(grid.Column("FirstName"), grid.Column("LastName"), grid.Column("Salary")
               //grid.Column(header: "Action",format:@<text>@Html.ActionLink("Modify","") | @Html.ActionLink("Detail", "")| @Html.ActionLink("Remove", "")</text>) @*format: @<text>[email protected]</text>*@ @*Format of currency*@
           )) < /div>




5. In show.chtml, add one Class that references WebGrid.
   

   @ {
       var grid = new WebGrid(source: Model, defaultSort: "FirstName", rowsPerPage: 3);
   }
   //We can add Max No. of pages in webgrid when the page loads

6. To get this WebGrid reference, we have to add some assembly / DLL reference in "References" folder i.e. System.Web.Helpers.dll.
   
   
   
   
7. Also, we can check this WebGrid Reference mentioned in Show.Cshtml in other way. Right click on WebGrid in show.cshtml and "Go To Definition".




8. Then, the Metadata definition file for this WebGrid will be shown.
   

   #region Assembly System.Web.Helpers.dll, v2 .0 .0 .0
   // C:\Users\Satya\Desktop\Satyaa\Training Task\Mvc Apps\WebgridOrGridview\packages\Microsoft.AspNet.WebPages.2.0.30506.0\lib\net40\
   System.Web.Helpers.dll
   # endregion

   i.e. WebGrid[from metadata]
   
   

9. Then, add some code RouteConfig.cs file for Action Method name, as we mentioned in Controller section.
   

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Web;
   using System.Web.Mvc;
   using System.Web.Routing;
   namespace WebgridOrGridview {
       public class RouteConfig {
           public static void RegisterRoutes(RouteCollection routes) {
               routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
               routes.MapRoute(name: "Default", url: "{controller}/{action}/{id}", defaults: new {
                   controller = "Home", action = "show", id = UrlParameter.Optional
               });
           }
       }
   }

10. The URL will be found when we run this MVC application.

http://localhost:53848/Home/show

Controller Name : Home

Controller Action Method Name : show

Output 1

Output 2

Add pagination in WebGrid in Show.Cshtml.

<div id="grid">
    @grid.GetHtml(
        tableStyle: "webgrid-table",
        headerStyle: "webgrid-header",
        //footerStyle: "webgrid-footer",
        alternatingRowStyle: "webgrid-alternating-row",
        rowStyle: "webgrid-row-style",
        mode: WebGridPagerModes.All,
        firstText: "<< First",
        previousText: "< Prev",
        nextText: "Next >",
        lastText: "Last >>", //add next or prev link in webgrid
        columns: grid.Columns(
            grid.Column("FirstName"),
            grid.Column("LastName"),
            grid.Column("Salary")
            //grid.Column(header: "Action",format:@<text>@Html.ActionLink("Modify","") | @Html.ActionLink("Detail", "")| @Html.ActionLink("Remove", "")</text>)    @*format: @<text>[email protected]</text>*@ @*Format of currency*@
                        )
                    )
</div>

When we go to the next page by Page Check, the URL is changed based on Page No. Index in WebGrid.

When we go to page 1, the URL is changed to >>  http://localhost:53848/Home/show?page=1

When we go to page 2, the URL is changed to >> http://localhost:53848/Home/show?page=2

When we go to page 3, the URL is changed to >> http://localhost:53848/Home/show?page=3

Output

There are 3 columns in WebGrid i.e. FirstName, LastName, and Salary. 

These are all available as link formats in WebGrid. 

columns: grid.Columns(grid.Column("FirstName"), grid.Column("LastName"), grid.Column("Salary")

When we click FirstName link in WebGrid, the URL is changed as Records under this column name, in ascending order.

• http://localhost:53848/Home/show?sort=FirstName&sortdir=ASC

When we click FirstName link again in WebGrid, the URL is changed as Records under this column name, in descending order.

• http://localhost:53848/Home/show?sort=FirstName&sortdir=DESC

Like this, in LastName and Salary Column Values are sorted in ascending and descending order.

• http://localhost:53848/Home/show?sort=LastName&sortdir=ASC




• http://localhost:53848/Home/show?sort=LastName&sortdir=DESC




• http://localhost:53848/Home/show?sort=Salary&sortdir=ASC




• http://localhost:53848/Home/show?sort=Salary&sortdir=DESC

Based on sorting order of Values in one column, the other column values will also be sorted accordingly and automatically.

Like this, we can add WebGrid in ASP.NET MVC and related properties for WebGrid in show.cshtml file.

Happy Coding….

Best Of luck.