Index

--- title: "WebGrid Control in ASP.NET MVC" description: "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 ou" author: "Chris Anderson" published: 2011-10-07 updated: 2020-03-04 canonical: https://www.mindstick.com/articles/767/webgrid-control-in-asp-dot-net-mvc category: "asp.net mvc" tags: ["asp.net mvc"] reading_time: 3 minutes --- # WebGrid Control in ASP.NET MVC In this [article](https://yourviews.mindstick.com/view/81489/kashmir-now-after-an-year-of-abrogation-of-article-370), I am explaining how to use [WebGrid](https://www.mindstick.com/forum/34092/how-to-implement-a-webgrid-in-asp-dot-net-mvc) helper in our [Razor view](https://www.mindstick.com/forum/155820/how-to-generate-textbox-control-using-htmlhelper-in-razor-view) page of an [ASP.NET MVC](https://www.mindstick.com/articles/1571/start-with-asp-dot-net-mvc-4) 3 [application](https://www.mindstick.com/articles/12824/calculator-application-in-android).\ ##### 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](https://www.mindstick.com/blog/273/passing-values-from-controller-to-view-in-asp-dot-net-mvc) [class](https://www.mindstick.com/blog/165/generic-class-in-c-sharp): ``` 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 { 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 Index @{ 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:@@item.FirstName, style: "person"), grid.Column("LastName", "LastName", canSort: true), grid.Column("Salary","Salary",canSort:true) )); } ``` When we run our application, an [output](https://www.mindstick.com/interview/34427/explain-the-output-in-angular) will show as below:\ ![WebGrid control in ASP.NET MVC](https://www.mindstick.com/mindstickarticle/25289a23-a3df-4863-9c0c-a4ec4dae1477/images/ec35a607-254f-4d03-870c-5a2013285fa8.png) By using the above code we can easily understand how to use WebGrid and populate data in WebGrid in MVC application. --- Original Source: https://www.mindstick.com/articles/767/webgrid-control-in-asp-dot-net-mvc Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.