C# ASPX ASP.NET - Add & Delete Table Row

Question

My current setup:
Form
Dropdown List (populated by SQL)
Users select an item from DDL, press the [+ (add)] button
SQL lookup on this items value
New row in a table, cells of input values based on SQL results
Last cell in row has a [- (delete)] button to remove that row
Users can do this multiple times, thus the table

eg.

DDL:
[value:123] [+]

Table:
| Row# | ID | Firstname | Lastname | Delete |
| 1 | 123 | John | Smith | X |

Better solution? Tell me if you can think of a better way before moving on...

The issue is that I cannot find a way to dynamically add rows to a table using C# / ASP.

Preferably, I need some ASP functions to do this dynamically (or next best thing). I could settle for a Javascript Adhoc, but I was trying to avoid this as the data I need to add to a new table row is being fetched via SQL.

Currently this is my broken code thus far (just the stuff you need):

Default.aspx:

<asp:DropDownList>
    <asp:Item>1</asp:Item>
    <asp:Item>2</asp:Item>
    <asp:Item>3</asp:Item>
</asp:DropDownList>

<input type="button" onClick="AddRow()" runat="server" />`

<asp:Table id="aTable" name="aTable">  
<asp:TableHeaderRow>  
    <asp:TableHeaderCell>1</asp:TableHeaderCell>
    <asp:TableHeaderCell>2</asp:TableHeaderCell>
    <asp:TableHeaderCell>3</asp:TableHeaderCell>
    <asp:TableHeaderCell>4</asp:TableHeaderCell>
    <asp:TableHeaderCell>5</asp:TableHeaderCell>
    <asp:TableHeaderCell>6</asp:TableHeaderCell>  
</asp:TableHeaderRow> 

</asp:Table>

Default.aspx.cs:

protected void AddRow(object sender, EventArgs e) {  
    Table table = new Table();  
    table.ID = "aTable";
    TableRow row = new TableRow();  
    TableCell cell = new TableCell();  
    table.Rows.Add(row);  
    cell.Text = "Test";  
    row.Cells.Add(cell);  
    row.Cells.Add(cell);  
    row.Cells.Add(cell);  
    row.Cells.Add(cell);  
    row.Cells.Add(cell);  
    row.Cells.Add(cell);  
}

Research tells me about DataTables but from the looks of things these don't display as tables in a browser. I've also read a bunch of rubbish tutorials that don't work, so I'm here to ask the pro's at SO!

Any help is much appreciated :)

Answer 1

First, I'm surprised you didn't set runat="server" at asp:Table tag.

<asp:Table id="aTable" name="aTable" runat="server">  

Second, from the code behind, you can directly use aTable object.

protected void AddRow(object sender, EventArgs e) {  
    TableRow row = new TableRow();  
    TableCell cell = new TableCell();  
    aTable.Rows.Add(row);  
    cell.Text = "Test";  
    row.Cells.Add(cell);  
    row.Cells.Add(cell);  
    row.Cells.Add(cell);  
    row.Cells.Add(cell);  
    row.Cells.Add(cell);  
    row.Cells.Add(cell);  
}

Third, there is a lot of resources to learn. Use Google.

Answer 2

You would be much better off using a GridView . These can easily be set to an SQL datasource as in the examples.

It is also possible to not set a datasource in the aspx page and then in the page_load event you can do this sort of thing:

Protected void Page_Load(object sender, EventArgs e)
{
    GridView.DataSource = Webservice.someMethodCall(param1, param2);
    GridView.DataBind();
}

This approach also means that when the button is clicked the page_load event is triggered and the gridview will be updated.

Answer 3

I would recommend using the GridView control. I personnally prefer the Telerik control suite.

Here is a link http://www.asp.net/web-forms/tutorials/tailspin-spyworks/tailspin-spyworks-part-4

Answer 4

Beaten by 3 minutes...but still.

<asp:Button ID="button1" runat="server" OnClick="AddRow" />
<asp:Table id="aTable" name="aTable" runat="server">  
    <asp:TableHeaderRow>  
        <asp:TableHeaderCell>1</asp:TableHeaderCell> 
    </asp:TableHeaderRow> 
</asp:Table>

protected void AddRow(object sender, EventArgs e)
{
    TableRow row = new TableRow();
    TableCell cell = new TableCell();
    cell.Text = "hello";
    row.Cells.Add(cell);

    aTable.Rows.Add(row);
}