Displaying data in a grid using WebGrid in cshtml

Hi,
In this post i want to write about WebGrid class which is used to render html table content.

I am having a class that contains few properties which is my actual model class and i want to render a list of my model class objects in the form of a grid.
Previously in web forms we used to have GridView but in MVC3 we have something like WebGrid().

Now let us create our model class with few properties.

MyModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;
using System.ComponentModel.DataAnnotations;

namespace MvcApplication2.Models
{
    public class MyModel
    {
       
        public string firstname{set;get;}
        public string lastname{set;get;}
        public string AddressCity { set; get; }
        public string FullName { set; get; }
        public string nicknameFirstNmae { set; get; }

        public string profession { set; get; }
        public string designation { set; get; }
        public string experience { set; get; }

    }
}

Now let us create a controller by name FirstController and it is having a method called Test() that renders a view called myFirstView.cshtml. This view is going to render the grid.

FirstController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.IO;
using System.Web.Mail;

namespace MvcApplication2.Controllers
{
    public class FirstController : Controller
    {
       
        public ActionResult Test()
        {
             Models.MyModel mod = new Models.MyModel();
            Models.MyModel mod1 = new Models.MyModel();
            List<Models.MyModel> lst = new List<Models.MyModel>();
            mod.AddressCity = "Vizag";
            mod.firstname = "Pavan";
            mod.lastname = "Kumar";
            mod.nicknameFirstNmae = "PavanArya";
            mod.FullName = "Pavan Kumar Aryasomayajulu";
            mod.experience = "2yrs";
            mod.designation="Associate s/w engineer";
            mod.profession="Information Technology";

            mod1.AddressCity = "Vizag";
            mod1.firstname = "Kiran";
            mod1.lastname = "Kumar";
            mod1.nicknameFirstNmae = "KiranMantri";
            mod1.FullName = "Kiran Kumar Mantri";
            mod1.experience = "3yrs";
            mod1.designation = "s/w engineer";
            mod1.profession = "Information Technology";
            lst.Add(mod);
            lst.Add(mod1);

            return View("myFirstView", lst);
        }

    }
    
}

In this controller we are creating an object of MyModel class and assigning them values. And at last we are adding these objects to a List.

Now coming to our View. In order to create a grid inside a view. First create an object of WebGrid(our_model_obj).
Note: Our Model object should be of type IEnumerable.

Now there is a method called GetHtml() which accepts few optional parameters. This method returns the html table content.

myFirstView.cshtml

@{
        //Layout = null;
}
@model IEnumerable<MvcApplication2.Models.MyModel>
    <div>
@{
    var grid = new WebGrid(@Model); 
}
@grid.GetHtml()
    </div>

This is the basic grid that is displayed.

Customizing Grid and applying styles

Now let us create a grid that is not going to display all the fields of our MyModel class and also we are creating few styles for this Grid.

Now in this grid i just want to display firstname and lastname fields only.

So in order to do that initially we are supposed to create a list that contains all the column names that we want to display and then send it to WebGrid constructor.

Note: It contains many more parameters that can define number of rows per page,columns to display,default sort value and many more.
But for now i just want to discuss about columns to be displayed.

    List<string> ls=new List<string>();
    ls.Add("firstname");
    ls.Add("lastname");
    IEnumerable<string> columnnames = ls.AsEnumerable<string>();
    var grid = new WebGrid(@Model,columnNames:columnnames);

Note: in the list of columnnames we specify any name that is not present in the MyModel class then it is going to throw an exception
Column “xyz” does not exist.

Specifying styles to the grid.

The method GetHtml() accepts options parameters where we can specify which style should be applied to the columns, header,footer etc.

@grid.GetHtml(
tableStyle: "grid",
         headerStyle: "grid-header",
      alternatingRowStyle: "grid-alternating-row",
       selectedRowStyle: "grid-selected-row",
             rowStyle: "grid-row-style"
             )

myFirstView.cshtml

@{
        //Layout = null;
}
@model IEnumerable<MvcApplication2.Models.MyModel>

    <div>
@{
    List<string> ls=new List<string>();
    ls.Add("firstname");
    ls.Add("lastname");
    IEnumerable<string> columnnames = ls.AsEnumerable<string>();
    var grid = new WebGrid(@Model,columnNames:columnnames);
    
}
@grid.GetHtml(
tableStyle: "grid",
         headerStyle: "grid-header",
      alternatingRowStyle: "grid-alternating-row",
       selectedRowStyle: "grid-selected-row",
             rowStyle: "grid-row-style"
             )
    </div>

Add below css items to existing Style.css file

site.css

.grid
   {
       width: 50%;
       border: 0px;
       border-collapse: collapse;
   }
    
   .grid a
   {
       color: #000;
   }
    
    .grid-row-style td
    {
        text-align:center
    }
    .grid-header th
    {
        padding-right:20px;
        padding-left:20px;
    }
    .grid-alternating-row td
    {
        text-align:center
    }
   .grid-header
   {
       padding: 6px 5px;
       text-align: center;
       background-color: #e8eef4;
       border-bottom: 2px solid #3966A2;
       height: 40px;
    
       border-top: 2px solid #D6E8FF;
       border-left: 2px solid #D6E8FF;
       border-right: 2px solid #D6E8FF;
   }
    
   .grid-footer
   {
       padding: 6px 5px;
       text-align: center;
       background-color: #e8eef4;
       border-top: 2px solid #3966A2;
       height: 30px;
    
       border-bottom: 2px solid #D6E8FF;
      border-left: 2px solid #D6E8FF;
       border-right: 2px solid #D6E8FF;
   }
    
   .grid-alternating-row
   {
      height: 30px;
       background-color: #f2f2f2;
       border-bottom: 1px solid #d2d2d2;
    
       border-left: 2px solid #D6E8FF;
       border-right: 2px solid #D6E8FF;
  }
    .grid-row-style
   {
      height: 30px;
      border-bottom: 1px solid #d2d2d2;
    
      border-left: 2px solid #D6E8FF;
       border-right: 2px solid #D6E8FF;
   }
    
   .grid-selected-row
   {
       font-weight: bold;
   }

Thanks,
Pavan