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 :)
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 :)
Share Improve this question asked Dec 7, 2011 at 4:50 Matt RowlesMatt Rowles 8,07021 gold badges57 silver badges89 bronze badges4 Answers
Reset to default 4First, 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.
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.
I would remend using the GridView control. I personnally prefer the Telerik control suite.
Here is a link http://www.asp/web-forms/tutorials/tailspin-spyworks/tailspin-spyworks-part-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);
}