Generic HtmlHelper for creating html table from list of any type
public HtmlTable BuildTable<T>(List<T> Data)
{
HtmlTable ht = new HtmlTable();
//Get the columns
HtmlTableRow htColumnsRow = new HtmlTableRow();
typeof(T).GetProperties().Select(prop =>
{
HtmlTableCell htCell = new HtmlTableCell();
htCell.InnerText = prop.Name;
return htCell;
}).ToList().ForEach(cell => htColumnsRow.Cells.Add(cell));
ht.Rows.Add(htColumnsRow);
//Get the remaining rows
Data.ForEach(delegate(T obj)
{
HtmlTableRow htRow = new HtmlTableRow();
obj.GetType().GetProperties().ToList().ForEach(delegate(PropertyInfo prop)
{
HtmlTableCell htCell = new HtmlTableCell();
htCell.InnerText = prop.GetValue(obj, null).ToString();
htRow.Cells.Add(htCell);
});
ht.Rows.Add(htRow);
});
return ht;
}
Try that. You need to call BuildTable<YourType>(list)
.
.NETStandard 2.0 can use HtmlTableHelper
Fiddle Demo:
- HtmlTableHelper ConsoleDemo
- HtmlTableHelper ASP.NET MVC Demo (JQuery DataTable)
Extension
ASP.NET Core MVC:
Create a IHtmlHelperExtension.cs
using System.Collections.Generic;
using HtmlTableHelper;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Html;
public static class IHtmlHelperExtension
{
public static HtmlString ToHtmlTable<T>(this IHtmlHelper htmlHelper, IEnumerable<T> enums
, object tableAttributes = null, object trAttributes = null, object tdAttributes = null
, HtmlTableSetting HTMLTableSetting = null)
{
var html = enums.ToHtmlTable(tableAttributes, trAttributes, tdAttributes, HTMLTableSetting);
return new HtmlString(html);
}
public static HtmlString ToHtmlTable<T>(this IHtmlHelper htmlHelper, System.Data.DataTable datatable
, object tableAttributes = null, object trAttributes = null, object tdAttributes = null
, HtmlTableSetting HTMLTableSetting = null)
{
var html = datatable.ToHtmlTable(tableAttributes, trAttributes, tdAttributes, HTMLTableSetting);
return new HtmlString(html);
}
}
razor.cshtml
@Html.ToHtmlTable(new[] { new { Name = "ITWeiHan", Age = "25", Gender = "M" } })
/*
Result:<table><thead><tr><th>Name</th><th>Age</th><th>Gender</th></tr></thead><tbody><tr><td>ITWeiHan</td><td>25</td><td>M</td></tr></tbody></table>
*/
ASP.NET MVC 5:
Create a HtmlHelperExtension.cs
using System.Collections.Generic;
using HtmlTableHelper;
using System.Web;
using System.Web.Mvc;
public static class HtmlHelperExtension
{
public static HtmlString ToHtmlTable<T>(this HtmlHelper htmlHelper, IEnumerable<T> enums
, object tableAttributes = null, object trAttributes = null, object tdAttributes = null
, HtmlTableSetting HTMLTableSetting = null)
{
var html = enums.ToHtmlTable(tableAttributes, trAttributes, tdAttributes, HTMLTableSetting);
return new HtmlString(html);
}
public static HtmlString ToHtmlTable<T>(this HtmlHelper htmlHelper, System.Data.DataTable datatable
, object tableAttributes = null, object trAttributes = null, object tdAttributes = null
, HtmlTableSetting HTMLTableSetting = null)
{
var html = datatable.ToHtmlTable(tableAttributes, trAttributes, tdAttributes, HTMLTableSetting);
return new HtmlString(html);
}
}
Demo
ASP.NET MVC 5 JQuery DataTable Demo:
using HtmlTableHelper;
//..
public class HomeController : Controller
{
public ActionResult Index()
{
var datas = new[] { new { Name = "ITWeiHan", Age = "25",Gender = "M" } };
ViewBag.Table = datas.ToHtmlTable();
return View();
}
}
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>AspNetMvcDemo</title>
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
</head>
<body>
<div>
@Html.Raw(ViewBag.Table)
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('Table').DataTable();
});
</script>
</body>
</html>
Hi I updated your code for the .NET core version. good luck
public static IHtmlContent Table<T>(IList<T> data, IList<(string propertyName, string colName)> headers)
{
//Tags
var table = new TagBuilder("table");
var tr = new TagBuilder("tr");
//Add headers
foreach (var s in headers)
{
var th = new TagBuilder("th");
th.InnerHtml.Append(s.colName);
tr.InnerHtml.AppendHtml(th);
}
table.InnerHtml.AppendHtml(tr);
//Add data
foreach (var d in data)
{
tr = new TagBuilder("tr");
foreach (var h in headers)
{
var td = new TagBuilder("td");
td.InnerHtml.Append( d.GetType().GetProperty(h.propertyName).GetValue(d, null)?.ToString());
tr.InnerHtml.AppendHtml(td);
}
table.InnerHtml.AppendHtml(tr);
}
return table;
}