How to set value of HtmlTableCell dynamically in ASP.NET Webforms? - asp.net

Question

I have an aspx file and its small part of the code is
<table class="table table-responsive-sm table-bordered table-hover" runat="server" style="align-content:center;">
<tr><th>Header1</th></tr>
<tr><td id="name1"></td></tr>
</table>
<table class="table table-responsive-sm table-bordered table-hover" runat="server" style="align-content:center;">
<tr><th>Header2</th></tr>
<tr><td id="name2"></td></tr>
</table>
<%-- Similary there are manly table lets say upto 20 --%>
<table class="table table-responsive-sm table-bordered table-hover" runat="server" style="align-content:center;">
<tr><th>Header20</th></tr>
<tr><td id="name20"></td></tr>
</table>
it's code behind is like to set the value is each td :
public void Page_Load()
{
name1.InnerText = "1"
name2.InnerTex = "2"
//similary all td is assigned like this
name20.InnerText = "20"
}
This works fine but in the future there may by many table let's say 100. then do I need to set all the value like the code above. Is there any other method?
I tried using following code:
for(int i=1; i<21; i++)
{
tableId = (HtmlTableCell)this.Page.Master.FindControl("name" + i.ToString());
tableId = (HtmlTableCell)this.Page.FindControl("name" + i.ToString());
tableId = (HtmlTableCell)this.FindControl("name" + i.ToString());
tableId.InnerText = i.toString();
}
but the value of tableId is always null.
How can I solve this?

Answer 1

Ok, this is one of those cases in which we want to consider a different approach.
Now, I don't think it makes sense to have say 10, or even 20 tables here.
Lets think of this question:
I need 20 integer variables.
Do, I do this:
int x1;
int x2;
int x3;
... and so on for 20 variables?
No, we don't do that. We would do this:
int[20] x;
Now, I can use a for loop, even a foreach or whatever.
The same issue applies to your probelm.
You have a group or thing that you need "many" of.
As others in the comments suggest, a repeater (or listview, datalist, gridview) are controls or a "system" that lets you with great ease "repeat" somthing.
So, I like that "array" might need 2 or 50 of these "things".
It makes no sense to try and code out a html writer, or some loop to create this repeating thing. We can do this in code.
So, lets use a repeater.
Say like this:
<asp:Repeater ID="Repeater1" runat="server"
OnItemDataBound="Repeater1_ItemDataBound">
<ItemTemplate>
<asp:Label id="MyHeader" runat="server"
Text='<%# Eval("TableGroup") %>'
Font-Size="X-Large" >
</asp:Label>
</ItemTemplate>
</asp:Repeater>
Very simple. Now, do we want 2 table groups, or 60 of them?
Our code to load up the above can look like this:
We will simple create a list of "what" we want to repeat.
So, lets create something with table like structure. In fact, lets create a .net table!!!
Say we drop a button on the above, and then this code:
protected void Button1_Click(object sender, EventArgs e)
{
DataTable TblList = new DataTable();
TblList.Columns.Add("TableGroup");
for (int i = 1;i<=3;i++)
{
DataRow OneRow = TblList.NewRow();
OneRow["TableGroup"] = "Table " + i;
TblList.Rows.Add(OneRow);
}
Repeater1.DataSource = TblList;
Repeater1.DataBind();
}
Note how clean, how simple, and HOW we did not have to "try" and write code to spit out markup. And while that for/loop is 3, we could make it 30.
Now our output is this:
So, note how what we "made" repeats 3 times. But it could just as well repeat 20, or 100 times.
Now, inside each repeater, we want a table. Once again, we "could" use a table. but if you think about this, a table needs a header, then rows and for each row we would have to define a column.
Once again, that's quite a bit of work. So, lets use a control that can display + render a WHOLE table in one shot!
I suggest a gridview. So, now in the above repeater, lets drop in that grid view.
And we even use your bootstrap class(s) you specified - (since they look VERY nice - well done on your part!!!!).
Ok, so now our repeater becomes this:
<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
<ItemTemplate>
<asp:Label id="MyHeader" runat="server"
Text='<%# Eval("TableGroup") %>'
Font-Size="X-Large" >
</asp:Label>
<asp:GridView ID="GTable" runat="server"
class="table table-responsive-sm table-bordered table-hover" Width="20%">
</asp:GridView>
</ItemTemplate>
</asp:Repeater>
<br />
Note HOW little markup we have so far. And Gridview is really just a nice table - but one that's less work and hassle.
So, now we need to add code to fill up the table for each group.
Turns out, there is HANDY event that fires for each group creation for us!!!!
So, lets just cook up a table - say a user name, and age.
So, we use the ItemDataBound event. This event fires for each group!!!
So, 3 groups, or 60 - it will not matter.
So, we can code out a table, then then STUFF it right into our gridview.
this code:
protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
// each new group/thing, lets fill the grid/table
GridView gV = (GridView)e.Item.FindControl("GTable");
DataTable TestTable = new DataTable();
TestTable.Columns.Add("Name");
TestTable.Columns.Add("Age");
int TableGroup = e.Item.ItemIndex + 1;
// add 3 rows
for (int i = 1; i <= 3; i++)
{
DataRow OneRow = TestTable.NewRow();
OneRow["Name"] = "Group " + TableGroup + " Name " + i;
OneRow["Age"] = i * 15;
TestTable.Rows.Add(OneRow);
}
gV.DataSource = TestTable;
gV.DataBind();
}
Note again:
We are ONLY writing code for ONE thing. Might be repeated over and over, but we don't care. Note also how "easy" it is to think this way.
Now, I did include the repeater "index" to at least add somewhat different rows for each table.
Note again how NICE it is to create that table. It gives us headings, rows, columns
all in a nice simple structure.
And our output is now this:
Is that not cool or what?
So, now with the above automatic rendered.
What do you want to do? Grab a particular repeater item? Maybe add a button to each grid row? We can do that, do that one time, and it will repeat for us.
but, you can get say the 2nd row this way:
protected void Button2_Click(object sender, EventArgs e)
{
// get 2nd repeater (0 based, so get #1)
int RepeatNum = 1;
RepeaterItem MyRepItem = Repeater1.Items[RepeatNum];
// ok, got the item, get <h2> header item
//
Label MyHead = (Label)MyRepItem.FindControl("MyHeader");
Debug.Print(MyHead.Text);
// now get our grid
GridView GV = (GridView)MyRepItem.FindControl("GTable");
foreach (GridViewRow gRow in GV.Rows)
{
Debug.Print("Name = " + gRow.Cells[0].Text);
Debug.Print("Age = " + gRow.Cells[1].Text);
}
output window:
Table 2
Name = Group 2 Name 1
Age = 15
Name = Group 2 Name 2
Age = 30
Name = Group 2 Name 3
Age = 45
So think in groups. I have VERY little markup. And BETTER is how the code behind does not try and spit out a ZILLION "tr" "th" "table" etc. I don't write all that HTML - but leverage the built in tools.
What is nice, is I can now change my mind, and say render this as say "two things" going accross the page - kind of like a "card view".
So, we wrote ONE thing for the group.
So we wrote ONE thing for the table.
We then repeated both over and over.