In this article, I am explaining how to use WebGrid helper in our Razor view page of an ASP.NET MVC 3 application.

The below code block is showing our Model class:
using System.Collections.Generic;
 
namespace WebGridMVC.Models
{
    public class Employee
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public double Salary { get; set; }     
    }
}

 The below code block is showing our Controller class:

using System.Collections.Generic;
using System.Web.Mvc;
using WebGridMVC.Models;
namespace WebGridMVC.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            var empoyees = new List<Employee>
            {
                new Employee { FirstName="Rohit", LastName="Kesharwani",  
                               Salary=45000},
                new Employee { FirstName="Rahul", LastName="Singh",
                               Salary=25000},
                new Employee { FirstName="Rehan", LastName="Ahmad",
                               Salary=25000},
                new Employee { FirstName="Nomita", LastName="Chowdhury",
                               Salary=35000},
                new Employee { FirstName="Rawnak", LastName="Kesharwani",
                               Salary=125000}
            };
            return View(empoyees);
        }
    }
}
Let us create a view page using Razor syntax:
 @model IEnumerable<WebGridMVC.Models.Employee>
 
<html>
<head>
    <title>Index</title>
    <style type="text/css">
       .webGrid { margin: 4px; border-collapse: collapse; width: 300px; }
       .header { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
        .webGrid th, .webGrid td { border: 1px solid #C0C0C0; padding: 5px; }
        .alt { background-color: #E8E8E8; color: #000; }
        .person { width: 200px; font-weight:bold;}
    </style>
</head>
<body>
    @{
        var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5);
        grid.Pager(WebGridPagerModes.NextPrevious);
        @grid.GetHtml(tableStyle: "webGrid",
                headerStyle: "header",
                alternatingRowStyle: "alt",
                columns: grid.Columns(
                    grid.Column("FirstName", "FirstName", canSort: true,
                    format:@<b>@item.FirstName</b>, style: "person"),
                    grid.Column("LastName", "LastName", canSort: true),
                    grid.Column("Salary","Salary",canSort:true)
        ));       
    }
</body>
</html>


When we run our application, an output will show as below:

WebGrid control in ASP.NET MVC

By using the above code we can easily understand how to use WebGrid and populate data in WebGrid in MVC application.

  Modified On Nov-25-2017 01:03:58 AM

Leave Comment