Dynamically add row to a table

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'>   <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" />   <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.

Date:Thu, 16 Aug 2007 11:06:05 -0500 Author:

Re: Dynamically add row to a table

On Aug 16, 6:06 pm, "AliR \(VC++ MVP\)" <A...@online.nospam> wrote:

> 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'>   <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" />   <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.


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"]);
}

Date:Thu, 16 Aug 2007 11:28:46 -0700 Author:

Re: Dynamically add row to a table

"Alexey Smirnov"  wrote in message 
news:1187288926.193642.45060@50g2000hsm.googlegroups.com...

> On Aug 16, 6:06 pm, "AliR \(VC++ MVP\)" <A...@online.nospam> wrote:
>> 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'>   <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" />   <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.
>
> 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"]);
> }
>


Thanks Alexy,

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

AliR.

Date:Fri, 17 Aug 2007 09:40:51 -0500 Author: