Minifycode 2022-05-10 Viewed 1.1K times ASP.NET

In this article, you will learn How to convert HTML Table to DataTable in ASP.Net using C#.

 

<table cellspacing="0" rules="all" border="1" id="tblCustomers" style="border-collapse: collapse;">
    <tr>
        <th>Customer Id</th>
        <th>Name</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>1</td>
        <td>A</td>
        <td>United States</td>
    </tr>
    <tr>
        <td>2</td>
        <td>B</td>
        <td>India</td>
    </tr>
    <tr>
        <td>3</td>
        <td>C</td>
        <td>France</td>
    </tr>
    <tr>
        <td>4</td>
        <td>D</td>
        <td>Russia</td>
    </tr>
    <tr>
        <td>5</td>
        <td>E</td>
        <td>Pakistan</td>
    </tr>
</table>
<hr />
<input type="hidden" name="CustomerJSON"/>
<asp:Button ID = "btnSubmit" Text="Submit" runat="server" OnClientClick = "GetTableValues()" OnClick ="Submit" />

 

<script type="text/javascript" src="https://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script type="text/javascript">
    function GetTableValues() {
        //Create an Array to hold the Table values.
        var customers = new Array();
 
        //Reference the Table.
        var table = document.getElementById("tblCustomers");
 
        //Loop through Table Rows.
        for (var i = 1; i < table.rows.length; i++) {
            //Reference the Table Row.
            var row = table.rows[i];
 
            //Copy values from Table Cell to JSON object.
            var customer = {};
            customer.Id = row.cells[0].innerHTML;
            customer.Name = row.cells[1].innerHTML;
            customer.Country = row.cells[2].innerHTML;
            customers.push(customer);
        }
 
        //Convert the JSON object to string and assign to Hidden Field.
        document.getElementsByName("CustomerJSON")[0].value = JSON.stringify(customers);
    }
</script>

 

using System.Data;
using Newtonsoft.Json;

protected void Submit(object sender, EventArgs e)
{
    string customerJSON = Request.Form["CustomerJSON"];
    DataTable dt = JsonConvert.DeserializeObject<DataTable>(customerJSON);
}

 

Other way...

 

HtmlDocument doc = new HtmlDocument();
doc.LoadHtml(htmlCode);
var headers = doc.DocumentNode.SelectNodes("//tr/th");
DataTable table = new DataTable();
foreach (HtmlNode header in headers)
    table.Columns.Add(header.InnerText);
foreach (var row in doc.DocumentNode.SelectNodes("//tr[td]")) 
    table.Rows.Add(row.SelectNodes("td").Select(td => td.InnerText).ToArray());

How to convert HTML Table to DataTable in ASP.Net using C#
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html> <head> <title>Asp.Net Repeater Control</title> </head> <body> <form id="form1" runat="server"> <div style="font:13px Verdana;width:310px;"> <asp:ScriptManager ID="scriptManager" runat="server" EnablePageMethods="true" /> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <h3>Asp.Net Repeater Control</h3> <%--THE REPEATER CONTROL.--%> <asp:Repeater id="rp" runat="server"> <%--HEADER OF THE REPEATER--%> <HeaderTemplate> <table border="0" width="200px"> </HeaderTemplate> <%--SHOWING ITEMS--%> <ItemTemplate> <tr> <td style="padding:2px; border:solid 1px #CCC;"> <asp:Label Text='<%# Container.DataItem.ToString() %>' runat="server"></asp:Label> </td> </tr> </ItemTemplate> <%--ALTERNATE TEMPLATE (SHOWING ITEMS IN DIFFERENT COLOR--%> <AlternatingItemTemplate> <tr> <td style="padding:2px; border:solid 1px #CCC; background:#EAF7FB; width:200px;"> <asp:Label Text='<%# Container.DataItem.ToString() %>' runat="server"></asp:Label> </td> </tr> </AlternatingItemTemplate> <%--REPEATER FOOTER--%> <FooterTemplate> </table> <div style="padding:20px 0;"> <asp:Label ID="lblFoot" runat="server"></asp:Label> </div> </FooterTemplate> </asp:Repeater> <%--BUTTON CONTROL--%> <asp:Button ID="btVF" Text="View Files" AutoPostBack="true" OnClick="Show" Font-Names="sanserif" Font-Italic="true" Font-Size="155%" runat="server" /> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="PostBackTrigger" /> </Triggers> </asp:UpdatePanel> </div> </form> </body> </html> using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.IO; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) {} protected void Show(object sender, EventArgs e) { DirectoryInfo Folder = new DirectoryInfo(Server.MapPath("Files\\")); FileInfo[] fileList = Folder.GetFiles("*.*"); //BIND THE FILE LIST WITH THE REPEATER CONTROL. rp.DataSource = fileList; rp.DataBind(); } } Adding the <AlternatingTemplate> below the <ItemTemplate> will show files with a different background color for every alternate row. <AlternatingItemTemplate> <div style="padding:3px; border:solid 1px #FFF; background:#black"> <asp:Label Text='<%# Container.DataItem.ToString() %>' runat="server"></asp:Label> </div> </AlternatingItemTemplate> </AlternatingItemTemplate> <SeparatorTemplate><hr /> </SeparatorTemplate> Add the <HeaderTemplate> element just above the <ItemTemplate> <HeaderTemplate> <div style="padding-bottom:20px"><strong>Files</strong> (Header)</div> </HeaderTemplate> Repeater with <FooterTemplate> element <FooterTemplate> <div style="padding-top:20px"><asp:Label ID="lblFooter" runat="server"></asp:Label></div> </FooterTemplate> Code Behind In C# Control ft = rp.Controls[rep.Controls.Count - 1].Controls[0]; Label lbl_Footer = ft.FindControl("lblFooter") as Label; lbl_Footer.Text = "Showing total <b>" + fileList.Length + "</b> files in the Footer.";