ASP.NET how to populate html table on asp button click

Question

I am trying to populate an html table with rows based on what a c# function returns on a button click.

<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Populate" /></div><br>

<table id ="randtable" class="tablex">
  <tr>
    <th>Col1</th>
    <th>Col2</th>
    <th>Col3</th>
    <th>Col4</th>
  </tr>
</table>

and my Button1_Click function looks like this:

protected void Button1_Click(object sender, EventArgs e)
{
    List<Entity> x = someFunction();
    //I want to have each row in the table represent each entity. Assume each entity has 4 attributes which would go in Col1,Col2,Col3,Col4 in the table.
}

Any idea how to do this? The reason I'm sticking with an html table instead of an asp control table is to keep the css of the html table, unless there's a way to make the asp table look appealing as well.

Try one of the many ASP.net data controls: GridView, ListView, Repeater. They are designed with this in mind. Repeater is the "lightest" option. Gridview proabalbly the heaviest. — Jon P
– Jon P, Commented Jun 6, 2014 at 0:53
There is a property for ASP.net controls called "CssClass" which is the same as the "class" of HTML controls.. — r.mirzojonov
– r.mirzojonov, Commented Jun 6, 2014 at 2:35

Aheho · Accepted Answer · 2014-06-06 00:32:51Z

2

Put your table inside a ListView Control:

<asp:ListView runat=server id="lvResults">
  <LayoutTemplate>
    <table id ="randtable" class="tablex">
     <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
      <th>Col4</th>
    </tr>
   <asp:PlaceHolder id="itemPlaceholder" runat="server"></asp:PlaceHolder>
  </table>
 </LayoutTemplate>
 <ItemTemplate>
  <tr>
   <td><%# Eval(Container.DataItem, "col1") %></td>
   <td><%# Eval(Container.DataItem, "col2") %></td>
   <td><%# Eval(Container.DataItem, "col3") %></td>
  </tr>
 </ItemTemplate>
</asp:ListView>

Then put the following in your code behind:

protected void Button1_Click(object sender, EventArgs e)
{
    List<Entity> x = someFunction();
    lvResults.DataSource = x;
    lvResults.DataBind()
}

answered Jun 6, 2014 at 0:32

Aheho

12.8k13 gold badges57 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ali · Accepted Answer · 2014-06-06 00:46:58Z

If you specifically want to do it on html table then you can use runat="server" on your table's tbody element then populate your table's rows inside a loop.

your table like this:

 <table id ="randtable" class="tablex">   
  <thead>   
   <tr>
     <th>Col1</th>
     <th>Col2</th>   
   </tr> 
  </thead> 
  <tbody id="mybody" runat="server">
     //your dynamic rows from code behind
  </tbody> 
 </table>

and your class should have something like this:

protected void Button1_Click(object sender, EventArgs e) {
   List<Entity> x = someFunction();
   foreach (var entity in x)
       {
           mybody.InnerHtml += string.Format("<tr><td>{0}</td><td>{1}</td></tr>", 
                                             entity.value1, entity.value2);
       }
}

Collectives™ on Stack Overflow

ASP.NET how to populate html table on asp button click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related