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

Tags:

C#

.Net

Asp.Net Mvc

Recent Posts