Convert HTML table to JSON string in ASP.NET using C# and JavaScript

In this tutorial, I will explain to you how to convert an HTML table to a JSON string using C#.

Convert HTML table to JSON in ASP.NET

To get started, insert a static table and an ASP button as shown in the code below:

   <table class="nav-justified" border="1" id="tblEmployees">
        <tr>
            <td><strong>Name</strong></td>
            <td><strong>Department</strong></td>
        </tr>
        <tr>
            <td>Jeff</td>
            <td>IT</td>
        </tr>
        <tr>
            <td>Carla</td>
            <td>Engineering</td>
        </tr>
        <tr>
            <td>Fred</td>
            <td>Human Resource</td>
        </tr>
    </table>
 
    <asp:Button ID = "btnConvert" Text="Convert to JSON" runat="server" OnClientClick = "ConvertTable()" OnClick="btnConvert_Click"   />

The layout

HTML Table

Now add a hidden field and a liberal to your markup. I will explain later why we need these two elements in our example.

 <input type="hidden" name="hfEmployee"/>
       <br />
  <asp:Literal ID="Literal1" runat="server"></asp:Literal>

The Javascript

Now use the javascript code below to translate the HTML table to a JSON object. This code will be called when the button click ( client side) is triggered.

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-json/2.6.0/jquery.json.min.js"></script>
    <script type="text/javascript">
        function ConvertTable() {
          
            var myEmployees = new Array();
 
            var tbl = document.getElementById("tblEmployees");
 
            for (var i = 1; i < tbl.rows.length; i++) {
 
                var row = tbl.rows[i];
 
                var myEmployee = {};
                myEmployee.Name = row.cells[0].innerHTML;
                myEmployee.Department = row.cells[1].innerHTML;
              
                myEmployees.push(myEmployee);
              
            }
 
            document.getElementsByName("hfEmployee")[0].value = JSON.stringify(myEmployees);
        }
</script>

The code above will translate the HTML table into a JSON object, by looping through it row by row, then assign the converted JSON string to the hidden field that we have added previously.

The code behind(C#)

Now use the code behind below for the button click event( server side)

        protected void btnConvert_Click(object sender, EventArgs e)
        {
            string customerJSON = Request.Form["hfEmployee"];
            Literal1.Text = customerJSON;
            
        }

The code above will assign the JSON value from the hidden field into the literal. After you click on the button, you should see the JSON string value inside the literal, as shown in the picture below:

JSON string

Happy coding!

Related Articles