---
title: "WebGrid in ASP.NET MVC4"  
description: "In this blog I'll introduce WebGrid and show how it can be used in ASP.NET MVC 4, WebGrid is a Predefine tool it's look like tabular format, in this a"  
author: "Vijay Shukla"  
published: 2013-09-25  
updated: 2014-09-18  
canonical: https://www.mindstick.com/blog/584/webgrid-in-asp-dot-net-mvc4  
category: "asp.net mvc"  
tags: ["asp.net mvc"]  
reading_time: 3 minutes  

---

# WebGrid in ASP.NET MVC4

In this blog I'll introduce [WebGrid](https://www.mindstick.com/articles/767/webgrid-control-in-asp-dot-net-mvc) and show how it can be used in [ASP.NET MVC](https://www.mindstick.com/forum/155798/what-is-caching-in-asp-dot-net-mvc) 4, WebGrid is a Predefine tool it's look like [tabular format](https://www.mindstick.com/forum/34668/how-to-embed-tabular-format-data-in-outlook-using-asp-dot-net-mvc), in this [application](https://www.mindstick.com/articles/12824/calculator-application-in-android) I’m using the Razor [view engine](https://www.mindstick.com/forum/155781/what-is-razor-view-engine-in-asp-dot-net-mvc).\

##### Getting Started with WebGrid

To demonstrate a [simple](https://yourviews.mindstick.com/story/1469/5-simple-ways-to-stay-fit-amp-healthy) example of WebGrid, I’ve creating an ASP.NET MVC action and add [values](https://www.mindstick.com/forum/327/sum-textbox-values) in a list which is [student](https://www.mindstick.com/articles/157138/student-loan-default-wage-garnishment-and-student-loan) types and pass to the view. My HomeController class has the following action:

```
public ActionResult Index()        {
            List<Student> listStudent = new List<Student>();            listStudent.Add(new Student { StudentID = 1001, StudentName = "Jhon", IsSportsMan = false });
            listStudent.Add(new Student { StudentID = 1002, StudentName = "Spelondar", IsSportsMan = true });
            listStudent.Add(new Student { StudentID = 1003, StudentName = "Alex", IsSportsMan = false });
            listStudent.Add(new Student { StudentID = 1004, StudentName = "Screws", IsSportsMan = true });
            listStudent.Add(new Student { StudentID = 1005, StudentName = "Bekam", IsSportsMan = false });
            listStudent.Add(new Student { StudentID = 1006, StudentName = "Rox", IsSportsMan = true });
            listStudent.Add(new Student { StudentID = 1007, StudentName = "Fezuiz", IsSportsMan = false });
            listStudent.Add(new Student { StudentID = 1008, StudentName = "Raxo", IsSportsMan = true });
            listStudent.Add(new Student { StudentID = 1009, StudentName = "Jeetu", IsSportsMan = false });
            listStudent.Add(new Student { StudentID = 1010, StudentName = "Jay", IsSportsMan = true });
            return View(listStudent);
        }
```

##### StudentClass

```
public class Student    {        public int StudentID { get; set; }        public string StudentName { get; set; }        public bool IsSportsMan { get; set; }
    }
```

\

The List view includes the following Razor code, which renders the grid shown:

```
@model IEnumerable<WebGridMvc.Models.Student>@{
    WebGrid studentGrid = new WebGrid(Model);    Func<bool, MvcHtmlString> func =    (b) => b ? MvcHtmlString.Create("checked=\"checked\"") : MvcHtmlString.Empty;
}@studentGrid.GetHtml(columns:  studentGrid.Columns(studentGrid.Column("StudentID", format: @<text>@item.StudentID</text>),studentGrid.Column("StudentName", format: @<text>@item.StudentName</text>),studentGrid.Column("IsSportsMan", format: @<text><input name="IsSportsMan" type="checkbox" @func(item.IsSportsMan) /></text>)
))
```

##### Output: -

![WebGrid in ASP.NET MVC4](https://www.mindstick.com/blogs/7576f43a-98f5-48be-9a88-9755787c39d0/images/50e48c9c-ae83-416d-a611-589d31631e73.png)

Note: - if I use in WebGrid constructor rowsPerPage: 5 then shows our grid in paging like below: -

\

##

![WebGrid in ASP.NET MVC4](https://www.mindstick.com/blogs/7576f43a-98f5-48be-9a88-9755787c39d0/images/18bc8f70-a126-49c0-917e-81b9206e0118.png)

---

Original Source: https://www.mindstick.com/blog/584/webgrid-in-asp-dot-net-mvc4

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.