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.";