In this article I will explain with an example, how to convert HTML Table to JSON 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 converted to JSON format using JavaScript and then sent to ASP.Net Code Behind (Server Side) using C# and VB.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>
 
 
Fetching the JSON string from Client Side 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 displayed using JavaScript Alert Message Box.
C#
protected void Submit(object sender, EventArgs e)
{
    string customerJSON = Request.Form["CustomerJSON"];
    ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('" + customerJSON + "')", true);
}
 
VB.Net
Protected Sub Submit(ByVal sender As Object, ByVal e As EventArgs)
    Dim customerJSON As String = Request.Form("CustomerJSON")
    ClientScript.RegisterClientScriptBlock(Me.GetType(), "alert", "alert('" & customerJSON & "')", True)
End Sub
 
 
Screenshots
The HTML Table
Convert HTML Table to JSON in ASP.Net using C# and VB.Net
 
The converted JSON
Convert HTML Table to JSON in ASP.Net using C# and VB.Net
 
 
Downloads
Download Code