how to get set the table cell data in ascx in asp.net?

Question

//ascs.cs page
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace Assignment_2
{
    public partial class Structure : System.Web.UI.UserControl
    {

        public string tit1
        {
            get { }
            set { }
        }

        protected void Page_Load(object sender, EventArgs e)
        {
           
        }
    }
}

//ascs.cs page

// ascx page
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Structure.ascx.cs" Inherits="Assignment_2.Structure" %>
<style type="text/css">
    .auto-style1 {
        width: 273px;
    }
    .auto-style2 {
        width: 879px;
    }
    .auto-style3 {
        width: 273px;
        height: 31px;
    }
    .auto-style4 {
        width: 879px;
        height: 31px;
    }
    .auto-style5 {
        height: 31px;
        width: 55px;
    }
    .auto-style6 {
        width: 55px;
    }
    .auto-style7 {
        width: 100%;
    }
</style>

<table  border="1" style="background-color: #FFFFFF;" class="auto-style7" id="tb1" runat="server">
    <tr>
        <td class="auto-style3" style="background-color: #003399; font-weight: bold; color: #FFFFFF;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Book Title</td>
        <td class="auto-style4" style="background-color: #003399; font-weight: bold; color: #FFFFFF;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Book Description</td>
        <td class="auto-style5" style="background-color: #003399; font-weight: bold; color: #FFFFFF;">&nbsp;Add to<br />
&nbsp;cart&nbsp;</td>
    </tr>
    <tr>
        <td class="auto-style1" style="background-color: #C0C0C0" id="cl1"  runat="server" >&nbsp;</td>
        <td class="auto-style2" style="background-color: #C0C0C0" id="cl1.1" runat="server">&nbsp;</td>
        <td class="auto-style6" style="background-color: #C0C0C0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input id="Checkbox1" type="checkbox"  runat="server"/></td>
    </tr>
    <tr>
        <td class="auto-style1" style="background-color: #999999" id="cl2" runat="server">&nbsp;</td>
        <td class="auto-style2" style="background-color: #999999" id="cl2.1" runat="server">&nbsp;</td>
        <td class="auto-style6" style="background-color: #999999">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input id="Checkbox2" type="checkbox"  runat="server"/></td>
    </tr>
    <tr>
        <td class="auto-style1" style="background-color: #C0C0C0" id="cl3" runat="server">&nbsp;</td>
        <td class="auto-style2" style="background-color: #C0C0C0" id="cl3.1" runat="server">&nbsp;</td>
        <td class="auto-style6" style="background-color: #C0C0C0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input id="Checkbox3" type="checkbox"  runat="server"/></td>
    </tr>
    <tr>
        <td class="auto-style1" style="background-color: #999999" id="cl4" runat="server">&nbsp;</td>
        <td class="auto-style2" style="background-color: #999999" id="cl4.1" runat="server">&nbsp;</td>
        <td class="auto-style6" style="background-color: #999999">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input id="Checkbox4" type="checkbox"  runat="server"/></td>
    </tr>
    <tr>
        <td class="auto-style1" style="background-color: #C0C0C0" id="cl5" runat="server">&nbsp;</td>
        <td class="auto-style2" style="background-color: #C0C0C0" id="cl5.1" runat="server">&nbsp;</td>
        <td class="auto-style6" style="background-color: #C0C0C0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input id="Checkbox5" type="checkbox"  runat="server"/></td>
    </tr>
</table>

// ascx page

How can I get and set the cell value in ascs.cs page if I am calling it by id its showing an error. Can anyone suggest how can I achieve it. I want to get and set the value of each cell in the usercontrol so that in aspx page I will be able to manipulate the data in aspx on page laod method. Please help.

Answer 1

Try this code in your aspx.cs Page_load function to fill data to the table in ascx:

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                HtmlTable table = Structure.FindControl("tb1") as HtmlTable;
                for (int i = 1; i < table.Rows.Count; i++)
                {
                    ((HtmlTableCell)table.Rows[i].FindControl($"cl{i}")).InnerHtml += $"BookTitle{i}";
                    ((HtmlTableCell)table.Rows[i].FindControl($"Td{i}")).InnerHtml += $"BookDescription{i}";
                    ((HtmlInputCheckBox)table.Rows[i].FindControl($"Checkbox{i}")).Checked = true;
                } 
            }

        }

Aspx code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication_webform.Pages.WebForm1" %>

<%@ Register Src="~/Structure.ascx" TagPrefix="uc1" TagName="Structure" %>


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
    <uc1:Structure runat="server" ID="Structure" />
</body>
</html>

What I'm using is the dynamically method to fill each cell, if you want to add hard coded data to each cell, you need to change the loop to dead data to assign.

Here is the result of my code:

And to get the data in ascx.cs, you can use the following code:

 public partial class Structure : System.Web.UI.UserControl
    {

        protected void Page_Load(object sender, EventArgs e)
        {
            for (int i = 1; i < tb1.Rows.Count; i++)
            {
                var cl = ((HtmlTableCell)tb1.Rows[i].FindControl($"cl{i}")).InnerText;
                var td = ((HtmlTableCell)tb1.Rows[i].FindControl($"Td{i}")).InnerText;
                var cb = ((HtmlInputCheckBox)tb1.Rows[i].FindControl($"Checkbox{i}")).Checked;
            }
        }
    }

Answer 2

If you want to access the table data in the ascx file you can use javascript or jquery to get and set values. var tb1 = document.getElementById('tb1');

get value first row , first column: var myValue = tb1.rows[0].columns[0].innerHTML;

set value first row, first column: tb1.rows[0].columns[0].innerHTML = 'newvalue';