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 application I’m using the Razor view engine.
Getting Started with WebGrid
To demonstrate a simple example of WebGrid, I’ve creating an ASP.NET MVC action and add values in a list which is student 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: -
Note: - if I use in WebGridconstructor rowsPerPage: 5 then shows our grid in paging like below: -
Leave Comment