WebGrid Example in MVC ASP NET

MVC WebGrid let you render in tabular data. It provides the custom column formatting, paging and sorting similar to asp.net web form grid. So here is basic example of binding WebGrid

So here I am created basic MVC4 Web Application in visual studio 2013. Model folder I have created the “Employee Class”

public class Employee

    {

        public int id { get; set; }

        public string Name { get; set; }

        public bool IsActive { get; set; }

        public string Address { get; set; }

        public decimal Salary { get; set; }

    }

In Home controller I have created action method “Index”

public class HomeController : Controller

    {

        public ActionResult Index()

        {

            ViewBag.Message = "ASP.NET MVC application.";

            List<Employee> emp = new List<Employee>

        {

            new Employee(){id=1,  Name = "Neel", Salary=8, IsActive= true,Address="Usa" },

            new Employee(){id=2, Name = "Sharma", Salary=2 , IsActive= false,Address="India"  },

            new Employee(){id=3, Name = "Trick", Salary=14,  IsActive= true,Address="UK"  }

        };

            return View(emp);

        }

}

Here index action method return list type employee. So next step we have bind the grid in view. So I have right click on index controller and add strongly type “employee” index view as shown below

@model IEnumerable<MvcApplication1.Models.Employee>

@{

    ViewBag.Title = "Home Page";

}

@{

    var grid = new WebGrid(Model);

}

@grid.GetHtml(columns: grid.Columns(

grid.Column("Name", header: "Employee Name", canSort: true),

grid.Column("Salary", header: "Salary", canSort: true, format: @<text>@item.Salary.ToString("0.00")  </text>),

grid.Column("IsActive",header:"Status",canSort:true, format:@<text> @if (item.IsActive == true)

{ <input class="check-box" id="chk_@item.id" checked="checked" name="chk_@item.id" type="checkbox" value="@item.Id" />}

else

{<input class="check-box" id="chk_@item.id" name="chk_@item.id" type="checkbox" value="@item.Id" />}  </text>)

             ))

So run this example you have seen this type output as shown given below figure