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

First, create an application named WebgridOrGridview.
Create a Class file in Models folder Employee.cs.
1. using System;
2. using System.Collections.Generic;
3. using System.Linq;
4. using System.Web;
5. namespace WebgridOrGridview.Models {
6. public class Employee {
7. public string FirstName {
8. get;
9. set;
10. }
11. public string LastName {
12. get;
13. set;
14. }
15. public double Salary {
16. get;
17. set;
18. }
19. public static List < Employee > GetList() {
20. List < Employee > Employees = new List < Employee > {
21. new Employee {
22. FirstName = "Satyaprakash1", LastName = "Samantaray1", Salary = 45000
23. },
24. new Employee {
25. FirstName = "Satyaprakash2", LastName = "Samantaray2", Salary = 25000
26. },
27. new Employee {
28. FirstName = "Satyaprakash3", LastName = "Samantaray3", Salary = 25000
29. },
30. new Employee {
31. FirstName = "Satyaprakash4", LastName = "Samantaray4", Salary = 35000
32. },
33. new Employee {
34. FirstName = "Satyaprakash5", LastName = "Samantaray5", Salary = 65000
35. },
36. new Employee {
37. FirstName = "Satyaprakash6", LastName = "Samantaray6", Salary = 75000
38. },
39. new Employee {
40. FirstName = "Satyaprakash7", LastName = "Samantaray7", Salary = 85000
41. },
42. new Employee {
43. FirstName = "Satyaprakash8", LastName = "Samantaray8", Salary = 95000
44. },
45. };
46. return Employees;
47. }
48. }
49. }
Here, I have added some static data which can be shown in rows of WebGrid.
Create a Controller named HomeController.cs.
1. using System;
2. using System.Collections.Generic;
3. using System.Linq;
4. using System.Web;
5. using System.Web.Mvc;
6. using WebgridOrGridview.Models;
7. namespace WebgridOrGridview.Controllers {
8. public class HomeController: Controller {
9. public ActionResult show() {
10. var empoyees = Employee.GetList(); //Reference of Model Class File.
11. return View(empoyees);
12. }
13. }
14. }

Add a View in Views folder named show.cshtml.
1. @ * @model IEnumerable < WebgridOrGridview.Models.Employee > * @
2. @ {
3. Layout = null;
4. }
5. @ {
6. var grid = new WebGrid(source: Model, defaultSort: "FirstName", rowsPerPage: 3);
7. } < h2 style = "color:blue" > Web Grid In MVC4 < /h2> < style type = "text/css" >
8. /*Here we will add css for style webgrid*/
9. .webgrid - table {
10. font - family: "Trebuchet MS", Arial, Helvetica, sans - serif;
11. font - size: 1.2e m;
12. width: 100 % ;
13. display: table;
14. border - collapse: separate;
15. border: solid 1 px blue;
16. background - color: white;
17. }.webgrid - table td, th {
18. border: 1 px solid blue;
19. padding: 3 px 7 px 2 px;
20. }.webgrid - header {
21. background - color: yellow;
22. color: red;
23. padding - bottom: 4 px;
24. padding - top: 5 px;
25. text - align: left;
26. }
27. /*.webgrid-footer {
29. }*/
30. .webgrid - row - style {
31. padding: 3 px 7 px 2 px;
32. }.webgrid - alternating - row {
33. background - color: pink;
34. padding: 3 px 7 px 2 px;
35. } /*for alteranating row style*/ < /style> < div id = "grid" > @grid.GetHtml(tableStyle: "webgrid-table", headerStyle: "webgrid-header",
36. //footerStyle: "webgrid-footer",
37. 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
38. columns: grid.Columns(grid.Column("FirstName"), grid.Column("LastName"), grid.Column("Salary")
39. //grid.Column(header: "Action",format:@<text>@Html.ActionLink("Modify","") | @Html.ActionLink("Detail", "")| @Html.ActionLink("Remove", "")</text>) @*format: @<text>[email protected]</text>*@ @*Format of currency*@
40. )) < /div>

In show.chtml, add one Class that references WebGrid.
1. @ {
2. var grid = new WebGrid(source: Model, defaultSort: "FirstName", rowsPerPage: 3);
3. }
4. //We can add Max No. of pages in webgrid when the page loads
To get this WebGrid reference, we have to add some assembly / DLL reference in "References" folder i.e. System.Web.Helpers.dll.
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".

Then, the Metadata definition file for this WebGrid will be shown.
1. #region Assembly System.Web.Helpers.dll, v2 .0 .0 .0
2. // C:\Users\Satya\Desktop\Satyaa\Training Task\Mvc Apps\WebgridOrGridview\packages\Microsoft.AspNet.WebPages.2.0.30506.0\lib\net40\
3. System.Web.Helpers.dll
4. # endregion
i.e. WebGrid[from metadata]

Then, add some code RouteConfig.cs file for Action Method name, as we mentioned in Controller section.
1. using System;
2. using System.Collections.Generic;
3. using System.Linq;
4. using System.Web;
5. using System.Web.Mvc;
6. using System.Web.Routing;
7. namespace WebgridOrGridview {
8. public class RouteConfig {
9. public static void RegisterRoutes(RouteCollection routes) {
10. routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
11. routes.MapRoute(name: "Default", url: "{controller}/{action}/{id}", defaults: new {
12. controller = "Home", action = "show", id = UrlParameter.Optional
13. });
14. }
15. }
16. }

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.

5 Comments

Join the conversation! Your thoughts help the community grow.

Nikul Vyas7y ago
Hello Mr. Satyaprakash, this is a good article to follow, however, what if I don't want to be dependent on model. I have created a function that returns the list<string> type of data. The format of string is id=1; displayName=abc; age=22; where the data on left hand side is heading and right side Is values for the rows. Is there a way to bind the string list to WebGrid datasource? I have posted the link to the thread here: https://forums.asp.net/p/2156469/6265409.aspx?Loading+the+PowerShell+AD+Group+Details+from+PSObject+into+WebGrid+
- Satyaprakash Samantaray7y ago
  Sure. Let u know
Syed Ali8y ago
Thank you for the article. I am getting the following message: Inheritance security rules violated by type: 'System.Web.Helpers.WebGridRenderer'. Derived types must either match the security accessibility of the base type or be less accessible.
- Satyaprakash Samantaray8y ago
  Check webgrid reference file properly in your project
- Syed Ali8y ago
  Thank you for the response. After i updated my System.Web.Helpers.dll to version 3.0.0.0 and also copied its xml file in the reference folder, it's working for me now.