Introduction
This article describes the WebGrid helper in the ASP.NET Web API. The Web Grid used in HTML table elements show the data in the Web page elements. It creates an environment for presenting the tabular data. The WebGrid supports server-side paging and it enables the custom formatting, such as column formatting, sorting the data, defining how muany rows are displayed in one page (paging) on the tabular data.
Various properties of Web Grid used in this application are the following:
- canPage: This property is for paging in the application.
- rowsPerPage: This property is for defining the number of rows in one page.
- canSort: This property allow the user to sort the table data by clicking on the column heading.
Other properties that are used in the WebGrid:
- DefaultSort: By using this property we define how the data can be sort, we provide the name of the column for sorting the data.
- Source: It defines where the data comes from.
Now I will show an example of the WebGrid.
Step 1
Create an Web API application:
-
Start Visual Studio 2012.
-
From the start window select "New Project".
-
In the Template Window select "Installed" -> "Visual C#" -> "Web".
-
Select "ASP.NET MVC 4 Web Application" and click on "OK"
![grid.jpg]()
- From the "MVC4 Project" window select "Web API".
![grid1.jpg]()
Step 2
Create a Model class "Customer.cs".
- In the "Solution Explorer".
- Right-click on the "Model folder" -> "Add" -> "Class".
![grid2.jpg]()
- Select "Class" and click on the "OK" button.
Add the following code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace WebGridApp.Models
{
public class Customer
{
public string Name { get;set; }
public string Address { get; set; }
public double M_salary { get; set; }
}
}
Step 3
Open the "HomeController":
- In the "SolutionExplorer".
- Select "Controller folder" -> "HomeController".
![grid3.jpg]()
Add this code to this controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebGridApp.Models;
namespace WebGridApp.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
var customers= new List<Customer>
{
new Customer { Name="Rohit",Address="Delhi", M_salary=40000},
new Customer{ Name="Rahul", Address="Kanpu", M_salary=35000},
new Customer { Name="Rehan", Address="Luckmow", M_salary=55000},
new Customer { Name="Namrata", Address="Agra", M_salary=35000},
new Customer { Name="Shivani", Address="Chennai", M_salary=67000},
new Customer { Name="Rohit",Address="Noida", M_salary=78000},
new Customer{ Name="Smith", Address="Gaziabad",M_salary=67000},
new Customer { Name="Manya", Address="Merath",M_salary=100000},
new Customer { Name="Shalini", Address="Mumbai",M_salary=130000},
new Customer { Name="Priyam", Address="Gujrat", M_salary=90000}
};
return View(customers);
}
}
}
Step 4
Create the "Index.cshtml" file as in the following:
![grid4.jpg]()
Add this code:
@model IEnumerable<WebGridApp.Models.Customer>
<html>
<head>
<title>Index</title>
<style type="text/css">
.Grid { margin: 3px; border-collapse: collapse; width: 400px; }
.center { background-color: #A8E8E8; font-weight: bolder; color: #ffd800; }
.Grid th, .Grid td { border: 2px solid #ffd800; padding: 6px; }
.na { background-color: #E8E8E8; color: #f00; }
.tech{ width: 200px; font-weight:bolder;}
</style>
</head>
<body>
@{
var page = new WebGrid(Model, canPage: true, rowsPerPage: 4);
page.Pager(WebGridPagerModes.NextPrevious);
@page.GetHtml(tableStyle: "Grid",
headerStyle: "center",
alternatingRowStyle: "na",
columns: page.Columns(
page.Column("Name", "Name", canSort: true,
format:@<b>@item.Name</b>, style: "tech"),
page.Column("Address", "Address", canSort: true),
page.Column("M_salary","M_salary",canSort:true)
));
}
</body>
</html>
Step 5
Execute the application by pressing "F5". The output divides into 3 pages. We can check click on "1,2,3" pages.
![p.jpg]()
![p1.jpg]()
Click on the column heading "Name". The data will be sorted by name.
![p2.jpg]()
Click on the column heading "Address". The data will be sorted by Address.
![p3.jpg]()
Click on the column heading "M_salary". The data will be sorted by M-salary.
![p4.jpg]()