Dynamically add row to a table

A

AliR \(VC++ MVP\)

Hi Everyone,

I am new to asp.net, and I have a .Net 2.0 webpage with Ajax extensions that
I am working on, on one page I have to maintain a table of edit controls.
When the page is first opened up, it should have one row with an edit
control in it, and an add button. When the user presses the add button I
have to add a new row, while at the same time keeping the data in the
previous edit controls intact.

I was able to accomplish some of this by putting an asp.net table on the
page, in an update panel, and some server side code that recreated the table
everytime and added a new row. But the problem was that I could not keep
track of the text typed in the edit controls. Everytime the post back would
happen the table would be empty so I couldn't get the values out of it.

I also tried this using an html table and client side javascripts but
quickly found out that I can't access the table or it's edit control from
the code behind.

I either need to findout how to keep the data intact and access the edit
controls on a dynamically created .net table or how to access a HTML table
from the C# code. (Mayby I should be using a gridview or something.)

Here is the code for that I used to do the client side row adding:

<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="AddRowClientSide.aspx.cs" Inherits="TestSite.AddRowClientSide"
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script language="javascript">

//add a new row to the table
function addRow()
{
//add a row to the rows collection and get a reference to the newly
added row
var newRow = document.all("tblGrid").insertRow();

//add 3 cells (<td>) to the new row and set the innerHTML to contain
text boxes

var oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' name='t1'>";

oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' name='t2'>";

oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' name='t3'> &nbsp;&nbsp;<input
type='button' value='Delete' onclick='removeRow(this);'/>";
}

//deletes the specified row from the table
function removeRow(src)
{
/* src refers to the input button that was clicked.
to get a reference to the containing <tr> element,
get the parent of the parent (in this case case <tr>)
*/
var oRow = src.parentElement.parentElement;

//once the row reference is obtained, delete it passing in its rowIndex
document.all("tblGrid").deleteRow(oRow.rowIndex);
}

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tblGrid" style="table-layout:fixed">
<tr>
<td width="150px">Field1</td>
<td width="150px">Field2</td>
<td width="250px">Field3</td>
</tr>
<tr>
<td><input type="text" name="t1" /></td>
<td><input type="text" name="t2" /></td>
<td><input type="text" name="t3" /> &nbsp;&nbsp;<input type="button"
value="Delete" onclick="removeRow(this);" /></td>
</tr>
</table>
<hr>
<input type="button" value="Add Row" onclick="addRow();" />
<asp:Button ID="Submit" runat="server" OnClick="Submit_Click"
Text="Submit" />
<hr>
</div>
</form>
</body>
</html>


Any help would be greatly appreciated.
AliR.
 
A

Alexey Smirnov

Hi Everyone,

I am new to asp.net, and I have a .Net 2.0 webpage with Ajax extensions that
I am working on, on one page I have to maintain a table of edit controls.
When the page is first opened up, it should have one row with an edit
control in it, and an add button. When the user presses the add button I
have to add a new row, while at the same time keeping the data in the
previous edit controls intact.

I was able to accomplish some of this by putting an asp.net table on the
page, in an update panel, and some server side code that recreated the table
everytime and added a new row. But the problem was that I could not keep
track of the text typed in the edit controls. Everytime the post back would
happen the table would be empty so I couldn't get the values out of it.

I also tried this using an html table and client side javascripts but
quickly found out that I can't access the table or it's edit control from
the code behind.

I either need to findout how to keep the data intact and access the edit
controls on a dynamically created .net table or how to access a HTML table
from the C# code. (Mayby I should be using a gridview or something.)

Here is the code for that I used to do the client side row adding:

<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="AddRowClientSide.aspx.cs" Inherits="TestSite.AddRowClientSide"
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script language="javascript">

//add a new row to the table
function addRow()
{
//add a row to the rows collection and get a reference to the newly
added row
var newRow = document.all("tblGrid").insertRow();

//add 3 cells (<td>) to the new row and set the innerHTML to contain
text boxes

var oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' name='t1'>";

oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' name='t2'>";

oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' name='t3'> &nbsp;&nbsp;<input
type='button' value='Delete' onclick='removeRow(this);'/>";
}

//deletes the specified row from the table
function removeRow(src)
{
/* src refers to the input button that was clicked.
to get a reference to the containing <tr> element,
get the parent of the parent (in this case case <tr>)
*/
var oRow = src.parentElement.parentElement;

//once the row reference is obtained, delete it passing in its rowIndex
document.all("tblGrid").deleteRow(oRow.rowIndex);
}

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tblGrid" style="table-layout:fixed">
<tr>
<td width="150px">Field1</td>
<td width="150px">Field2</td>
<td width="250px">Field3</td>
</tr>
<tr>
<td><input type="text" name="t1" /></td>
<td><input type="text" name="t2" /></td>
<td><input type="text" name="t3" /> &nbsp;&nbsp;<input type="button"
value="Delete" onclick="removeRow(this);" /></td>
</tr>
</table>
<hr>
<input type="button" value="Add Row" onclick="addRow();" />
<asp:Button ID="Submit" runat="server" OnClick="Submit_Click"
Text="Submit" />
<hr>
</div>
</form>
</body>
</html>

Any help would be greatly appreciated.
AliR.
Click to expand...

You can get the value using Request.Form

void Submit_Click(...)
{
Response.Write("t1=" + Request.Form["t1"]);
Response.Write("t2=" + Request.Form["t2"]);
Response.Write("t3=" + Request.Form["t3"]);
}
 
A

AliR \(VC++ MVP\)

Alexey Smirnov said:
Hi Everyone,

I am new to asp.net, and I have a .Net 2.0 webpage with Ajax extensions
that
I am working on, on one page I have to maintain a table of edit controls.
When the page is first opened up, it should have one row with an edit
control in it, and an add button. When the user presses the add button I
have to add a new row, while at the same time keeping the data in the
previous edit controls intact.

I was able to accomplish some of this by putting an asp.net table on the
page, in an update panel, and some server side code that recreated the
table
everytime and added a new row. But the problem was that I could not keep
track of the text typed in the edit controls. Everytime the post back
would
happen the table would be empty so I couldn't get the values out of it.

I also tried this using an html table and client side javascripts but
quickly found out that I can't access the table or it's edit control from
the code behind.

I either need to findout how to keep the data intact and access the edit
controls on a dynamically created .net table or how to access a HTML
table
from the C# code. (Mayby I should be using a gridview or something.)

Here is the code for that I used to do the client side row adding:

<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="AddRowClientSide.aspx.cs"
Inherits="TestSite.AddRowClientSide"
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script language="javascript">

//add a new row to the table
function addRow()
{
//add a row to the rows collection and get a reference to the newly
added row
var newRow = document.all("tblGrid").insertRow();

//add 3 cells (<td>) to the new row and set the innerHTML to contain
text boxes

var oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' name='t1'>";

oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' name='t2'>";

oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' name='t3'> &nbsp;&nbsp;<input
type='button' value='Delete' onclick='removeRow(this);'/>";
}

//deletes the specified row from the table
function removeRow(src)
{
/* src refers to the input button that was clicked.
to get a reference to the containing <tr> element,
get the parent of the parent (in this case case <tr>)
*/
var oRow = src.parentElement.parentElement;

//once the row reference is obtained, delete it passing in its
rowIndex
document.all("tblGrid").deleteRow(oRow.rowIndex);
}

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tblGrid" style="table-layout:fixed">
<tr>
<td width="150px">Field1</td>
<td width="150px">Field2</td>
<td width="250px">Field3</td>
</tr>
<tr>
<td><input type="text" name="t1" /></td>
<td><input type="text" name="t2" /></td>
<td><input type="text" name="t3" /> &nbsp;&nbsp;<input type="button"
value="Delete" onclick="removeRow(this);" /></td>
</tr>
</table>
<hr>
<input type="button" value="Add Row" onclick="addRow();" />
<asp:Button ID="Submit" runat="server" OnClick="Submit_Click"
Text="Submit" />
<hr>
</div>
</form>
</body>
</html>

Any help would be greatly appreciated.
AliR.
Click to expand...

You can get the value using Request.Form

void Submit_Click(...)
{
Response.Write("t1=" + Request.Form["t1"]);
Response.Write("t2=" + Request.Form["t2"]);
Response.Write("t3=" + Request.Form["t3"]);
}
Click to expand...

Thanks Alexy,

That is awesome. Except for one thing, how do I get the values of the edits
on the second row?

AliR.
 
A

Alexey Smirnov

You can get the value using Request.Form
Click to expand...
void Submit_Click(...)
{
Response.Write("t1=" + Request.Form["t1"]);
Response.Write("t2=" + Request.Form["t2"]);
Response.Write("t3=" + Request.Form["t3"]);
}
Click to expand...

Thanks Alexy,

That is awesome. Except for one thing, how do I get the values of the edits
on the second row?

AliR.- Hide quoted text -

- Show quoted text -
Click to expand...

You named your controls as

<input type="text" name="t1" />
<input type="text" name="t2" />
<input type="text" name="t3" />

and every new table row would have t1, t2 and t3.

Once the form is submitted you will get the values of t1, t2 and t3 as
arrays, for example, when your table had

1,2,3
4,5,6

in the edits, you get

Request.Form["t1"]="1,4"
Request.Form["t2"]="2,5"
Request.Form["t3"]="3,6"

so, to get the values from the second row you should code something
like this

string[] t1 = Request.Form["t1"].Split(',');
Response.Write("t1 in the first row is: " + t1[0]);
Response.Write("t1 in the second row is: " + t1[1]);

Hope this helps
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

IE11 + on paste event - relative path images are not loading 0
The code behind file seems to work very strange 2
enter-key works with two inputboxes but not with olny one. 2
Page shows blanc when using template cc and expressions (<%# %>) 3
ListView ItemUpdating OldValues and NewValues collections Empty (linqDataSource) 0
calculations, javascript + asp 4
Dynamically creating <DIV> statement 4
Newbie: AJAX not working 1

Top