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",
                new Employee { FirstName="Rahul", LastName="Singh",
                new Employee { FirstName="Rehan", LastName="Ahmad",
                new Employee { FirstName="Nomita", LastName="Chowdhury",
                new Employee { FirstName="Rawnak", LastName="Kesharwani",
            return View(empoyees);
Let us create a view page using Razor syntax:
 @model IEnumerable<WebGridMVC.Models.Employee>

    <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;}
        var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5);
        @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),

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 Mar-23-2018 02:09:45 AM

Leave Comment