คุณสมบัติ

ขนาดเล็ก (ขนาด DLL เพียง 20KB) และใช้งานง่าย
รองรับ .NET Standard 2.0/.NET 4.6/.NET 4.5/.NET 4.0
ไม่ต้องใช้ไลบรารีของบุคคลที่สามใด ๆ
รองรับ Anonymous Types, Dapper Dynamic Query, List/Array/Set/Enumrable, DataTable, Dictionary

การติดตั้ง

คุณสามารถติดตั้งแพ็คเกจ จาก NuGet โดยใช้ Visual Studio Package Manager หรือ NuGet UI:

PM> install-package HtmlTableHelper

หรือใช้คำสั่ง dotnet บนบรรทัดคำสั่ง:

dotnet add package HtmlTableHelper

Fiddle Demo:

เริ่มต้นใช้งาน

##### ตัวอย่าง List/Array/Set/Enumrable แบบไม่มี Key/Value ``C# using HtmlTableHelper; .. var sourceData = new[] { new { Name = "ITWeiHan", Age = "25",Gender = "M" } }; var tablehtml = sourceData.ToHtmlTable(); /* ผลลัพธ์:

Name	Age	Gender
ITWeiHan	25	M


*/

##### ตัวอย่าง DapperC#
using (var cn = "Your Connection")
{
	var sourceData = cn.Query(@"select 'ITWeiHan' Name,25 Age,'M' Gender");
	var tablehtml = sourceData.ToHtmlTable();
}

##### ตัวอย่าง Dictionary C#
var sourceData = new[] {new Dictionary (){{"Name" , "ITWeiHan" },{"Age",25},{"Gender","M"}}};
var tablehtml = sourceData.ToHtmlTable();

การกำหนด Attribute ให้ Table/TR/TD/TH เอง (Dynamic Type)
C#
var data = /List/Array/Set/Enumrable../;
var html = data.ToHtmlTable( tableAttributes: new { @class = "SomeClass"} //นี่คือ dynamic type, รองรับทุก attribute 
    ,trAttributes: new { ID = "SomeID" },tdAttributes: new { width = "120 px" },thAttributes: new { @class = "dark-theme" }
);
/*
ผลลัพธ์:

	
		
			..
		
	
	
		
			..
		
	

*/

##### Attribute Annotation###### 1. Display : 
C#
public class ModelClassWithDisplayAttr
{
    [TableColumn(DisplayName = "Column1")] //พร็อพเพอร์ตี้ MyProperty1 จะแสดง thead-td's innertext : "Column1"
    public string MyProperty1 { get; set; }
    [TableColumn(DisplayName = "Column2")] //พร็อพเพอร์ตี้ MyProperty2 จะแสดง thead-td's innertext : "Column2"
    public string MyProperty2 { get; set; }
}

###### 2. ข้าม : C#
public class ModelClassWithSkipAttr
{
    [TableColumn( Skip = true)]
    public string MyProperty1 { get; set; } //MyProperty1 จะไม่ถูกเรนเดอร์ html
    public string MyProperty2 { get; set; }
}

##### HTMLTableBuilder###### HtmlCaptionC#
var soucreData = new []{ new {MyProperty1="test",MyProperty2=123} };
var html = soucreData.CreateBuilder()
    .SetCaption("This is Caption", new { id = "CaptionId" })
    .ToHtmlTable();
//ผลลัพธ์ : This is CaptionMyProperty1 MyProperty2
test 123

##### HTMLTableSettingการตั้งค่า InnerHtml Encoding (แนะนำว่าไม่ควรปิด เว้นแต่มีเหตุผลเฉพาะ เพราะเสี่ยงต่อ XSS Attack)C#
var sourceData = new[] { new { Name = "ITWeiHan" } };
//Default Encoding
var encodinghtml = sourceData.ToHtmlTable();
//ผลลัพธ์: 
..<b>ITWeiHan</b>..
var htmltablesetting = new HTMLTableSetting()
{
    IsHtmlEncodeMode = false
};
var notEncodinghtml = sourceData.ToHtmlTable(HTMLTableSetting: htmltablesetting);
//ผลลัพธ์: 
..ITWeiHan..

Extension
ASP.NET Core MVC:  
สร้างไฟล์ IHtmlHelperExtension.csC#
using System.Collections.Generic;
using HtmlTableHelper;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Html;
public static class IHtmlHelperExtension
{
    public static HtmlString ToHtmlTable(this IHtmlHelper htmlHelper, IEnumerable 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(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 C#
@Html.ToHtmlTable(new[] { new { Name = "ITWeiHan", Age = "25", Gender = "M" } })
/*
ผลลัพธ์:Name Age Gender
ITWeiHan 25 M
*/

ASP.NET MVC 5:   
สร้างไฟล์ HtmlHelperExtension.csC#
using System.Collections.Generic;
using HtmlTableHelper;
using System.Web;
using System.Web.Mvc;
public static class HtmlHelperExtension
{
    public static HtmlString ToHtmlTable(this HtmlHelper htmlHelper, IEnumerable enums
        , object tableAttributes = null, object trAttributes = null, object tdAttributes = null
        , HtmlTableSetting HTMLTableSetting = null)
    {
`csharp
        var html = enums.ToHtmlTable(tableAttributes, trAttributes, tdAttributes, HTMLTableSetting);
        return new HtmlString(html);
    }    public static HtmlString ToHtmlTable(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);
    }
}
ตัวอย่างสาธิต
ASP.NET MVC 5 JQuery DataTable Demo:

C#
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();
    }
}
C#
@{
    Layout = null;
}


    
    AspNetMvcDemo
    


    

        @Html.Raw(ViewBag.Table)
    
    
    
    


ASP.NET Core ตัวอย่างสาธิต:C#
public class Startup
{
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        app.Run(async (context) =>
        {
            var sourceData = new[] { new { Name = "ITWeiHan", Age = "25",Gender = "M" } };
            var tablehtml = sourceData.ToHtmlTable();
            await context.Response.WriteAsync(tablehtml);
        });
    }
}




---


Tranlated By Open Ai Tx | Last indexed: 2025-06-30


---