CODEWITHSUNDEEP
c#asp.netdynamicrow
AlwaysANovice
AlwaysANovice

Reputation: 993

Add rows of textboxes with a click of a button

I am badly stuck on this problem and would appreciate any kinds of helps! I have to create a page where the user can add more rows by clicking a button. For example, I have the first row with 2 text boxes (name and birth dates), second row with the "Add Row" button. When the user clicks the "Add Row" button, the first row should be cloned and repeated...but the user can't add more than 5 rows. Later all the information need to be saved in a SQL table. How this can be achieved in C#?

I am attaching my sample ASP.NET. Can any one PLEASE help me?

PS: I have already read and tried "How to: Add Rows and Cells Dynamically to a Table Web Server Control"....but that's not working for me.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Testing Adding Rows</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>    
        <asp:Table ID="Table1" runat="server" width="400" style="border:[none][0]; border-color:White; border-style:hidden">                
            <asp:TableRow ID="TableRow1" runat="server">
                <asp:TableCell runat="server" nowrap="nowrap" Width= "70">
                    <asp:Label ID="nameLabel" runat="server" Text="Your Name" Font-Size="X-Small"></asp:Label>
                </asp:TableCell>
                <asp:TableCell runat="server" nowrap="nowrap" Width= "100">
                    <asp:TextBox ID="tb_name" runat="server" Font-Size="Smaller"></asp:TextBox> 
                    <asp:RequiredFieldValidator ID="nameValidator" runat="server" ControlToValidate="tb_name" Font-Size="Smaller">*</asp:RequiredFieldValidator>
                </asp:TableCell> 

                <asp:TableCell runat="server" nowrap="nowrap" Width= "70">
                    <asp:Label ID="dateLabel" runat="server" Text="Birthdate" Font-Size="Smaller" ></asp:Label>
                </asp:TableCell>                        
                <asp:TableCell runat="server" Width= "100">
                    <asp:TextBox ID="tb_date" runat="server" Font-Size="Smaller"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="dateValidator" runat="server" ControlToValidate="tb_date" Font-Size="Smaller">*</asp:RequiredFieldValidator>
                </asp:TableCell>

            </asp:TableRow>


            <asp:TableRow ID="TableRow2" runat="server"> 
                <asp:TableCell runat="server" align="left" Width= "100">
                    <asp:Button ID="addRow" runat="server" Height="22px" Text="Add Row" 
                                 ToolTip="Click to add another row" onclick="ButtonAddRow_Click" />
                </asp:TableCell> 
            </asp:TableRow> 


            <asp:TableRow ID="TableRow3" runat="server">  
                <asp:TableCell runat="server" bordercolor="#FFFFFF">    </asp:TableCell>

                <asp:TableCell runat="server"  align="left" nowrap="nowrap" bordercolor="#FFFFFF">
                    <asp:Label ID="msg" runat="server" ForeColor="Red" Font-Size="Smaller"></asp:Label>
                    <asp:ValidationSummary ID="LogonValidationSummary" HeaderText="All the fields (*) are required." DisplayMode="SingleParagraph"
                                           Font-Italic="true" ShowSummary="True" EnableClientScript="true" runat="server" Font-Size="Smaller"/> 
                </asp:TableCell>
            </asp:TableRow>

             <asp:TableRow ID="TableRow4" runat="server"> 
                <asp:TableCell ID="TableCell10" runat="server" bordercolor="#FFFFFF">       </asp:TableCell>

                <asp:TableCell ID="TableCell11" runat="server" align="left" bordercolor="#FFFFFF">
                    <asp:Button ID="ButtonSubmit" runat="server" Height="22px" Text="Submit" Width="79px" onclick="ButtonSubmit_Click" />
                </asp:TableCell>
            </asp:TableRow>

        </asp:Table>    
    </div>
    </form>
</body>
</html>

Upvotes: 1

Views: 5378

Answers (2)

FosterZ
FosterZ

Reputation: 3911

This codes snippet is just a hint that you can do this way.. 

    TableRow row = new TableRow();
     for (int j = 0; j < colsCount; j++)
     {
        TableCell cell = new TableCell();
        TextBox tb = new TextBox();
           tb.ID = "TextBoxRow_" + i + "Col_" + j;
           cell.Controls.Add(tb);
           row.Cells.Add(cell);
      }

     Table1.Rows.Add(row);

Upvotes: 1

Pranay Rana
Pranay Rana

Reputation: 176906

I would like if you make use of GridView control and than add row runtime to gridview rather than using table. That would minize your effort also code.

here is code for you : Adding Dynamic Rows in GridView with TextBoxes enter image description here

Upvotes: 0

Related Questions