Gridview in MVC

Model 


  public DataSet displayPageLoad(Int64 opt6)
        {
            if (cn.State == ConnectionState.Open)
                cn.Close();
            cn.Open();
            ds = new DataSet();
            ds.Clear();
            SqlDataAdapter ad;
            sqlcmd = new SqlCommand();
            sqlcmd.Parameters.Clear();
            sqlcmd.Connection = cn;
            sqlcmd.CommandType = CommandType.StoredProcedure;
            sqlcmd.CommandText = "Outgoing_Calls_SP";
            sqlcmd.Parameters.AddWithValue("@opt", opt6);
            sqlcmd.Parameters.AddWithValue("@telecom_id", "");
            sqlcmd.Parameters.AddWithValue("@datee", "");
            sqlcmd.Parameters.AddWithValue("@timee_from", "");
            sqlcmd.Parameters.AddWithValue("@timee_to", "");
            sqlcmd.Parameters.AddWithValue("@contact_number", "");
            sqlcmd.Parameters.AddWithValue("@contact_person", "");
            sqlcmd.Parameters.AddWithValue("@communication_msg", "");
            sqlcmd.Parameters.AddWithValue("@response_msg", "");
            sqlcmd.Parameters.AddWithValue("@dept", "");
            sqlcmd.Parameters.AddWithValue("@callername", "");
            sqlcmd.Parameters.AddWithValue("@branch", "");
            sqlcmd.Parameters.AddWithValue("@status", "");
            sqlcmd.Parameters.AddWithValue("@alerttime", "");
            sqlcmd.Parameters.AddWithValue("@alert", "");
            sqlcmd.Parameters.AddWithValue("@cid", "");
            sqlcmd.Parameters.AddWithValue("@deptmanager", "");
            ad = new SqlDataAdapter(sqlcmd);
            ad.Fill(ds);
            return ds;
        }
        public List<IDictionary> FetchOutgoingDetails()
        {
            DataSet dsEmployee = new DataSet();
            Int64 opt6 = 6;
            dsEmployee = displayPageLoad(opt6);

            return ConvertToDictionary(dsEmployee.Tables[0]);
        }
        private List<IDictionary> ConvertToDictionary(DataTable dtObject)
        {
            var columns = dtObject.Columns.Cast<DataColumn>();

            var dictionaryList = dtObject.AsEnumerable()
                .Select(dataRow => columns
                    .Select(column =>
                        new { Column = column.ColumnName, Value = dataRow[column] })
                             .ToDictionary(data => data.Column, data => data.Value)).ToList().ToArray();

            return dictionaryList.ToList<IDictionary>();
        }

Controller


 public ActionResult OutgoingList(CabAutomationSystem.Models.Outgoing outgoinglist)
        {
            var resultSet = outgoinglist.FetchOutgoingDetails();
            return View(resultSet);
        }

View


@{
    ViewBag.Title = "OutgoingList";
    Layout = "~/Views/Admin/Master.cshtml";
}

<h2>OutgoingList</h2>

@section Styles
{
<link href="@Url.Content("~/Content/grid.css")" rel="stylesheet" type="text/css" />
}

@{
          ViewBag.Title = "List";
    }

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

    foreach (var emprow in Model)
    {
        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(source: result,
                                           defaultSort: "telecom_id",
                                           rowsPerPage:5, fieldNamePrefix:"wg_",
                                           canPage:true,canSort:true,
                                           pageFieldName:"pg",sortFieldName:"srt"
                                           );
 }

 <table cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td>
            @grid.GetHtml(tableStyle:"listing-border",headerStyle:"gridhead",footerStyle:"paging",rowStyle:"td-dark",alternatingRowStyle:"td-light",
                            columns:
                                grid.Columns(
                                grid.Column(header:"", format: @<text><input id="chk" type="checkbox" value="@item.telecom_id" /></text>),
                                    grid.Column("datee", "Date", style: "colFirstName"),
                                    grid.Column("timee_from", "Time from", style: "colLastName"),
                                    grid.Column("timee_to", "Time to", style: "colPhone"),
                                    grid.Column("contact_number", "Contact Number", style: "colEmail"),
                                    grid.Column("contact_person", "Contact Person", style: "colContactType"),
                                    grid.Column(header: "Edit", format: @<text><a href="@Url.Action("Edit", "Contact", new { id = item.telecom_id })" ><img src="../../Content/images/Edit.jpg" alt="" style="border:none;" /></a></text>, style: "colOperation"),
                                    grid.Column(header: "Delete", format: @<text><a href="@Url.Action("Delete", "Contact", new { id = item.telecom_id })" onclick="javascript:return ConfirmDelete();"><img src="../../Content/images/delete.jpg" alt="" style="border:none;" /></a></text>, style: "colOperation")
                                ),mode:WebGridPagerModes.Numeric)
        </td>
    </tr>
 </table>
<script type="text/javascript">
    function ConfirmDelete() {
        return confirm("Are you sure you want to delete contacts?");
    }
</script>



CSS


.listing-border { background: #fd7d0f;}
.gridhead { background:#FFAA5F;  font: bold 13px Arial, Helvetica, sans-serif; color:#000000; text-decoration: none; height: 27px; text-align: left;}
.gridhead th a {text-decoration:none;color:#000000;}
.gridhead th a:hover {text-decoration:underline;color:#FF0000;}
.td-dark { background: #ffffff; height: 20px; }
.td-light { background: #FFE2BF; height: 20px; }
.paging { background: #fd7d0f;text-align: right;color:#000000;}
.paging span { font: bold 12px Arial, Helvetica, sans-serif; color:#FFFFFF; margin-right: 3px; padding: 1px 3px 1px 3px }
.paging a { font: bold 12px Arial, Helvetica, sans-serif; color:#000000; text-decoration: none; margin-right: 3px; border: 1px solid #ffffff; background: #fd7d0f; padding: 1px 3px 1px 3px }
.paging a:hover { font: bold 12px Arial, Helvetica, sans-serif; color:#000000; text-decoration: none; border: 1px solid #ffffff; background: #ffffff; }
.colFirstName{width:18%;text-align:left;}
.colLastName{width:18%;text-align:left;}
.colPhone{width:14%;text-align:left;}
.colEmail{width:19%;text-align:left;}
.colContactType{width:18%;text-align:left;}
.colOperation{width:50px;text-align:center;}