locked
Dynamically add asp.net controls on button click RRS feed

  • Question

  • I have a web form and added a button where users can click to dynamically recreate the controls as many as they want. I don' seem to find anything online

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
    <!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></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <div> 
           <table id="empRec1" border="0" cellpadding="0">
                    <tr>
                        <td colspan="11" class="textStyleSubHdr"><strong>Employee Information</strong></td>
                    </tr>
                    <tr>  
                        <td style="font-size:8pt;" width="5%" valign="bottom">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                        <td style="font-size:8pt;" width="4%" valign="bottom">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ID</td>
                        <td style="font-size:8pt;" width="5%" valign="bottom">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; First</td>
                        <td style="font-size:8pt;" width="5%" valign="bottom">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Last</td>
                        <td style="font-size:8pt; " width="2%" valign="bottom">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Job Title</td>
                         
               
                    </tr>
                      <tr>
                          <td width="5%" align="center">
                         <asp:Button ID="empselect" runat="server" onclick="empselect_Click" class="controlStyle" style="font-size:8pt;" width="110px" Height="20px" name="empselect" Text="Select Employee" /> </td>
                              
                        <!-- ID -->
                        <td width="4%" align="center">
                        <asp:TextBox  id="emp_gmin1" runat="server" class="controlStyle" style="font-size:8pt;" size="9" maxlength="9"  name="emp_gmin1" /> 
                         </td>
                          <!-- First Name -->
                                    
                        <td width="5%" align="center">
                         <asp:TextBox  id="emp_fname1" runat="server" class="controlStyle" style="font-size:8pt;" size="9" maxlength="9" name="emp_fname1" /> 
                           </td>
                        
                        <!-- Last Name -->
                        <td width="5%" align="center">
                           <asp:TextBox  id="emp_lname1" runat="server"  class="controlStyle" style="font-size:8pt;" size="14" maxlength="25" name="emp_lname1" />
                        </td>
                           <!-- Job Title -->
                        <td width="5%" align="center">
                        <asp:TextBox  id="emp_title" runat="server"  class="controlStyle" style="font-size:8pt;" size="14" maxlength="25" name="emp_title" />
                        </td>                 
                        </tr>           
                        
                        
            </table>          
        </div>
         
        </div>
        <p>
            <asp:Button ID="Button1" runat="server" Text="Add Employees" />
        </p>
         
        </form>
    </body>
    </html>


    Ebenezer

    Sunday, September 23, 2012 2:19 AM

Answers

All replies

  • I have added a panel control as per those example and doing as follows but is not working

    Protected Sub Button1_Click(sender As Object, e As System.EventArgs) Handles Button1.Click
            'Add a row to the hours table 
            Dim tblRow As New TableRow
            Dim empselect As New TableCell
            Dim emp_gmin1 As New TableCell
            Dim emp_fname1 As New TableCell
            Dim emp_lname1 As New TableCell
            Dim emp_title As New TableCell
            Dim emp_mail As New TableCell
            Dim emp_phone As New TableCell
            Dim emp_dept As New TableCell
            Dim txtRateCode As New TableCell
            Dim emp_group As New TableCell
            Dim emp_shift As New TableCell
            Dim emp_firstsugg As New TableCell
            Dim emp_Initials As New TableCell
            Dim i As Integer
            Dim numlabels As Integer
            For i = 1 To numlabels
                Dim btnempselect As New Button
                Dim txtemp_gmin1 As New TextBox
                Dim txtemp_fname1 As New TextBox
                Dim txtemp_lname1 As New TextBox
                Dim txtemp_title As New TextBox
                Dim txtemp_mail As New TextBox
                Dim txtemp_phone As New TextBox
                Dim txtemp_dept As New TextBox
                Dim txtemp_group As New TextBox
                Dim txtemp_shift As New TextBox
                Dim txtemp_firstsugg As New CheckBox
                Dim txtemp_Initials As New TextBox
                Dim PlaceHolder1 As New PlaceHolder()
                btnempselect.ID = "btnempselect" & i
                btnempselect.Width = 110
                empselect.HorizontalAlign = HorizontalAlign.Center
                PlaceHolder1.Controls.Add(btnempselect)
                txtemp_gmin1.ID = "txtemp_gmin1" & i
                emp_gmin1.HorizontalAlign = HorizontalAlign.Center
                PlaceHolder1.Controls.Add(emp_gmin1)
                txtemp_fname1.ID = "txtemp_fname1" & i
                txtemp_fname1.Width = 110
                emp_fname1.HorizontalAlign = HorizontalAlign.Center
                PlaceHolder1.Controls.Add(emp_fname1)
                txtemp_lname1.ID = "txtemp_lname1" & i
                txtemp_lname1.Width = 110
                emp_lname1.HorizontalAlign = HorizontalAlign.Center
                PlaceHolder1.Controls.Add(emp_lname1)
                txtemp_title.ID = "txtemp_title" & i
                txtemp_title.Width = 95
                emp_title.HorizontalAlign = HorizontalAlign.Center
                PlaceHolder1.Controls.Add(emp_title)
                txtemp_mail.ID = "txtemp_mail" & i
                txtemp_mail.Width = 95
                emp_mail.HorizontalAlign = HorizontalAlign.Center
                PlaceHolder1.Controls.Add(emp_mail)
                txtemp_phone.ID = "txtemp_phone" & i
                txtemp_phone.Width = 95
                emp_phone.HorizontalAlign = HorizontalAlign.Center
                PlaceHolder1.Controls.Add(emp_phone)
                txtemp_dept.ID = "txtemp_dept" & i
                txtemp_dept.Width = 55
                emp_dept.HorizontalAlign = HorizontalAlign.Center
                PlaceHolder1.Controls.Add(emp_dept)
                txtemp_group.ID = "txtemp_group" & i
                txtemp_group.Width = 95
                emp_group.HorizontalAlign = HorizontalAlign.Center
                PlaceHolder1.Controls.Add(emp_group)
                txtemp_shift.ID = "txtemp_shift" & i
                txtemp_shift.Width = 95
                emp_shift.HorizontalAlign = HorizontalAlign.Center
                PlaceHolder1.Controls.Add(txtemp_shift)
                txtemp_firstsugg.ID = "txtemp_firstsugg" & i
                txtemp_firstsugg.Width = 55
                emp_firstsugg.HorizontalAlign = HorizontalAlign.Center
                PlaceHolder1.Controls.Add(emp_firstsugg)
                txtemp_Initials.ID = "txtemp_Initials" & i
                txtemp_Initials.Width = 65
                emp_Initials.HorizontalAlign = HorizontalAlign.Center
                PlaceHolder1.Controls.Add(emp_Initials)
            Next
        End Sub


    Ebenezer

    Sunday, September 23, 2012 4:17 AM
  • Sometimes you can put all of your controls into page and make them invisible, i.e. not rendered using Visible property. On button click, change the property to true.

    Sunday, September 23, 2012 7:49 AM
  • Should be a piece of cake with JQuery:

    http://stackoverflow.com/questions/6205258/jquery-dynamically-create-button-and-attach-event-handler

     

    Noam B.



    Do not Forget to Vote as Answer/Helpful, please. It encourages us to help you...

    • Proposed as answer by Noam B Tuesday, September 25, 2012 7:40 AM
    • Marked as answer by Bob Shen Tuesday, October 2, 2012 8:00 AM
    Sunday, September 23, 2012 12:03 PM