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:
By using the above code we can easily understand how to use WebGrid and populate data in WebGrid in MVC application.
Leave Comment