In this article I will explain with an example, how to access HTML Table values in Code Behind in ASP.Net using C# and VB.Net.
HTML Table cannot be directly accessed in the ASP.Net Code Behind (Server Side) and hence the values of HTML Table will be sent in JSON format to ASP.Net Code Behind (Server Side) using C# and VB.Net.
 
 

Download JSON.Net library

The JSON.Net library is available for download from the following URL.
Download JSON.Net
 
 

HTML Markup

The HTML Markup consists of an HTML Table, a Hidden Field and an ASP.Net Button.
The ASP.Net Button has been assigned an OnClientClick event handler which calls the GetTableValues JavaScript function.
<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>John Hammond</td>
        <td>United States</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Mudassar Khan</td>
        <td>India</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Suzanne Mathews</td>
        <td>France</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Robert Schidner</td>
        <td>Russia</td>
    </tr>
</table>
<hr />
<input type="hidden" name="CustomerJSON" />
<asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClientClick="GetTableValues()" OnClick="Submit" />
 
 

JavaScript function to send HTML Table values to ASP.Net Code Behind (Server Side)

When the Submit Button is clicked, the following JavaScript function is called.
A loop is executed over the HTML Table Rows (excluding the Header Row) and the values of each Cell of each Row is copied to a JSON object which is later added to JSON Array.
Finally, the JSON Array is converted into a JSON string and copied to Hidden Field so that its value is sent to ASP.Net Code Behind (Server Side) during Form Submission (PostBack).
<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>
 
 

Namespaces

You will need to import the following namespaces.
C#
using System.Data;
using Newtonsoft.Json; 
 
VB.Net
Imports System.Data
Imports Newtonsoft.Json
 
 

Converting JSON string to DataTable in ASP.Net

Inside the Submit Button click event, first the JSON string is fetched from the Request.Form collection using the Name of the Hidden Field and then it is converted to DataTable using JSON.Net library.
C#
protected void Submit(object sender, EventArgs e)
{
    string customerJSON = Request.Form["CustomerJSON"];
    DataTable dt = JsonConvert.DeserializeObject<DataTable>(customerJSON);
} 
 
VB.Net
Protected Sub Submit(ByVal sender As Object, ByVal e As EventArgs)
    Dim customerJSON As String = Request.Form("CustomerJSON")
    Dim dt As DataTable = JsonConvert.DeserializeObject(Of DataTable)(customerJSON)
End Sub
 
 

Screenshots

The HTML Table

Access HTML Table values in Code Behind in ASP.Net using C# and VB.Net
 

HTML Table values in DataTable

Access HTML Table values in Code Behind in ASP.Net using C# and VB.Net
 
 

Downloads

Download Code