Using Data table model in Razor view engine
1. Using Data table namesapce:
@model System.Data.DataTable
@using System.Data
2. In View page, pass Data table Controller to view using ViewBag data(converted into dynamic grid data)
List<dynamic> obj1 = new List<dynamic>();
obj1= ViewBag.Total;
var grid = new WebGrid(obj1);
3. Using @'List<WebGridColumn>' generic column with editable link with ViewBag data
Controller:
DataTable dt = (DataTable) Session["dtResult"];
List < WebGridColumn > columns = new List < WebGridColumn > ();
foreach(DataColumn col in dt.Columns)
{
columns.Add(new WebGridColumn()
{
ColumnName = col.ColumnName, Header = col.ColumnName
});
}
columns.Add(new WebGridColumn()
{
Format = (item) =>
{
return new HtmlString(string.Format("<a href= {0}>Edit</a>", Url.Action("Edit", "Home", new
{
Id = item.SSN
})));
}
});
ViewBag.Columns = columns;
//Converting datatable to dynamic list
var dns = new List < dynamic > ();
dns = ConvertDtToList(dt);
ViewBag.Total = dns;
ConvertDtToList Method:
public List<dynamic> ConvertDtToList(DataTable dt)
{
var data = new List<dynamic>();
foreach (var item in dt.AsEnumerable())
{
// Expando objects are IDictionary<string, object>
IDictionary<string, object> dn = new ExpandoObject();
foreach (var column in dt.Columns.Cast<DataColumn>())
{
dn[column.ColumnName] = item[column];
}
data.Add(dn);
}
return data;
}
4. Bind the grid
Generic columns created in controller :ViewBag.Columns
@grid.GetHtml( columns: ViewBag.Columns,tableStyle: "table", footerStyle: "foot")
5. Style for table format, <style>
table
{
font-family: verdana,arial,sans-serif;
font-size: 11px;
color: #333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
width: 80% !important;
max-width: 80% !important;
}
table th
{
background: #b5cfd2;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
table td
{
background: #dcddc0;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
.foot
{
text-align: center;
}
</style>
