Grid In MVC 4

MODEL


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace GridViewMVC.Models
{
    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Gender { get; set; }
        public string Designation { get; set; }
    }

}

CONTROLLER
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using GridViewMVC.Models;

namespace GridViewMVC.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {

            List<Employee> ListEmpObj = new List<Employee>();

            ListEmpObj.Add(new Employee { Id=1, Designation="Software Engineer",Name="Anurag",Gender="Male"});
            ListEmpObj.Add(new Employee { Id = 2, Designation = "Project Lead", Name = "Rama", Gender = "Male" });
            ListEmpObj.Add(new Employee { Id = 3, Designation = "Lead Engineer", Name = "Nagesh", Gender = "Male" });

            return View(ListEmpObj);
        } 
    }

}

VIEW

@model  IEnumerable<GridViewMVC.Models.Employee>

@{
    ViewBag.Title = "Home Page";
    WebGrid grid = new WebGrid(Model);
}


@grid.GetHtml(

columns:grid.Columns(

        grid.Column("Id","Emp Id"),
        grid.Column("Name","Name"),
        grid.Column("Designation","Title"),
        grid.Column("Gender","Gender")

))

==============================================================

/*-----------------Grid View-----------------------------------*/

.GridTable 
{
margin: 10px;
padding: 10px;
border-width: 10px;
border: 1px #c8c8c8 solid;
border-collapse: separate;
min-width: 550px; 
background-color: #00FF00;
color: #fff;
width: 100%;
}

.GridTable td 
{
border-width: 1px;
border-style: solid;
color: red;
}

.GridHeader th
{
 border-width: 1px;
border-style: solid;
color: black;
padding: 10px;
background-color: orange;

}



.GridHeader a:link{color:orange;},
.GridHeader a:visited{color:yellow;},
.GridHeader a:active{color:blue;}, /*when you click the header */ 
.GridHeader a:hover {color: #FF0000;}
.GridHeader a:hover {text-decoration:dotted;}



.GridTable tr.GridAlterRow
{
background-color: #efeeef;
}

/*done*/
.GridTable tr:hover{background-color: #FF0000;}

.GridAlterRow td
{
padding: 10px;
margin: 5px; 
color: #333;
}

.gridRow td
{
padding: 10px;
color: blue;/*text inside cell changes color*/
}


.gridFooter td
{
padding: 10px;
background-color: lightyellow;
color: #999;
font-size: 12pt;
text-align: center;
}

.gridFooter a
{
font-weight: bold;
color: #333;
border: 1px #333 solid;
}


VIEW:

@model  IEnumerable<GridViewMVC.Models.Employee>

@{
    ViewBag.Title = "Home Page";
    WebGrid grid = new WebGrid(Model);
}



<div>
@grid.GetHtml(
        tableStyle:"GridTable",
        headerStyle :"GridHeader",
        footerStyle :"GridFooter",
        alternatingRowStyle :"GridAlterRow",
        rowStyle:"gridRow",        
        
        columns:grid.Columns(
        grid.Column("Id","Emp Id"),
        grid.Column("Name","Name"),
        grid.Column("Designation","Title"),
        grid.Column("Gender","Gender")
))

</div>

Output

On mouse over red color we can see on second row.