Display grid in html page?

Question

I am trying to display a grid on my view in MVC.

I have populated a WebGrid but i cant get it to display?

Could some one please show me how to display a webGrid?

My View's code is below:

@model MvcResComm.Models.ReturnProperties 
@{
    ViewBag.Title = "ShowProperties";
}   
<h2>Select Property</h2> 

@using System.Dynamic
@{
    var result = new List<dynamic>();

    foreach (var emprow in Model.DDS)
    {
        var row = (IDictionary<string, object>)new ExpandoObject();
        Dictionary<string, object> eachEmpRow = (Dictionary<string, object>)emprow;

        foreach (KeyValuePair<string, object> keyValuePair in eachEmpRow)
        {
            row.Add(keyValuePair);
        }
        result.Add(row);
    }
    var grid = new WebGrid(result);
  }

Answer 1

@using System.Dynamic
<div>
@{
   var result = new List<dynamic>();

   foreach (var emprow in Model.DDS)
   {
       var row = (IDictionary<string, object>)new ExpandoObject();
       Dictionary<string, object> eachEmpRow = (Dictionary<string, object>)emprow;

       foreach (KeyValuePair<string, object> keyValuePair in eachEmpRow)
       {
           row.Add(keyValuePair);
       }
       result.Add(row);
   }
   var grid = new WebGrid(result);

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

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;
}

Answer 2

this line is needed

@grid.GetHtml()