[RESOLVED] put div into another

i need to create div on run time in such a manner as it creat table at run time,(table is also in another div) .

all my rows in table like this (for example)

Code:

---

<div class="right_txt_space_accm">
                                                                                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                                          <tr>
                                                                                                <td width="20%" align="left"><strong>State:</strong></td>
                                                                                                <td width="10%" align="left"><strong></strong></td>
                                                                                                <td width="70%" align="left"><strong></strong>
                                                                                                        &nbsp;<asp:TextBox ID="txt_state" runat="server"></asp:TextBox>
                                                    <img valign=""top" src="img/star2.jpg" width="12" height="8"><asp:RequiredFieldValidator
                                                        ID="RequiredFieldValidator6" runat="server" ControlToValidate="txt_state"
                                                        ErrorMessage="Please fill in the 'State' box"></asp:RequiredFieldValidator>
                                                  </td>
                                                                                          </tr>
                                                                                        </table>
                                                                                </div>

---

so i need another div created at run time but its ?UI should match to my rest of project and should not cross </form >

let me tell u one more thing above div is sub div of many other divs .how i will access how to add runtime to design time div???do let me know if need to know further


Thanks

Hey,

I am really not sure if I follow what you are asking, however, I will try a quick stab.

An "easy" way to inject HTML at runtime, is to place a Literal control on your page, and then write the necessary HTML into the Text property of that Literal control.

Another way, would be to create a DIV, apply the runat=server attribute, and then write the HTML into the innerHTML property of the DIV.

Gary

thanks for ur reply , i almost got what r u trying to say

i have like this now

Code:

---

For index As Integer = 0 To 10
            Dim newdiv As New HtmlGenericControl("div")
            newdiv.ID = "myID" & index
            Dim txt As New TextBox
            txt.ID = "txt" & index

            newdiv.Attributes.Add("class", "xx")

            newdiv.InnerHtml = "<table width=100% border=0 cellspacing=0 cellpadding=0>" & "<tr>" & "<td width=40% align=left>" & "<strong>" & " Name:" & "</strong></td>" & "<td width=60% align=left>" & "Need textbox" & "</td>" & "</TR>" & "</table>"

            Me.PlaceHolder1.Controls.Add(newdiv)






        Next

---

just encountering one problem i need textbox where i write "Need textbox" in above code ,means i need server control in loop .can u help me,

Hey,

In which case, if you want to inject something other than HTML markup, and actually you want to load dynamic server controls, then you are going to need to take a different approach. The easiest way would be to place an ASP.Net Panel control where you want the controls to appear. Then, in your server side code, create instances of the controls that you need, and then add them to the Panel control. You will find information about this here:

http://www.4guysfromrolla.com/articles/092904-1.aspx

Hope that helps!

Gary

well gap most of teh problme has been resolved take a look here
http://www.gfln.org/default4.aspx

now when u click on radio button 1(from 1 to 7) it generate 3 <TD> (two have text name and telephone and other have textbox which is server side control)on run time now problem is whne u click on any other radio button say greater than 1 it overlaps td

here is code behind radiobuttonlist

Code:

---

Protected Sub RadioButtonList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles RadioButtonList1.SelectedIndexChanged



 Dim newdiv As New HtmlGenericControl("div")
            Dim ht As New HtmlTable()
            ht.ID = "mytable" & index

            ht.Width = "100%"
            ht.CellSpacing = "0"
            ht.CellPadding = "0"
            ht.Border = 0


            Dim htr, htr1 As New HtmlTableRow()
            Dim htc, htc1, htc2, htc3, htc4, htc5 As New HtmlTableCell()

            Dim name_tb As New TextBox()
            name_tb.ID = "name_tb" & index
            Dim Tel_tb1 As New TextBox
            Tel_tb1.ID = "Tel_tb1" & index
            name_tb.TextMode = TextBoxMode.SingleLine

            htc.InnerText = "Name : "
            htc.Width = "20%"
            htc.Align = "Left"

            htc1.InnerText = ""
            htc1.InnerHtml = "<strong></strong>"
            htc1.Width = "10%px"

            htc2.Width = "70%"
            htc2.Align = "left"



            htc2.Controls.Add(name_tb)
            htr.Controls.Add(htc)
            htr.Controls.Add(htc1)
            htr.Controls.Add(htc2)

            ht.Controls.Add(htr)


            'make another  row

            htc3.InnerText = "Telephone : "
            htc3.Width = "20%"
            htc3.Align = "Left"

            htc4.InnerText = ""
            htc4.InnerHtml = "<strong></strong>"
            htc4.Width = "10%px"

            htc5.Width = "70%"
            htc5.Align = "left"

            'htc3.Controls.Add(Tel_tb1)
            htr1.Controls.Add(htc3)
            htr1.Controls.Add(htc4)
            htr1.Controls.Add(htc5)



            ht.Controls.Add(htr1)

            newdiv.Controls.Add(ht)

  newdiv.Attributes.Add("table", "ht")
            newdiv.Attributes.Add("class", "right_txt_space_accm")
 Me.PlaceHolder1.Controls.Add(newdiv)






        Next

---

please reply

thanks for ur help so far ,take a look here http://www.gfln.org/default4.aspx ,here is some view state kind of problem in radio button.follow the steps
1 - click on 1 or what ever (from 1 to 7 )
2- click on yes Would attend the conference radio button
3- then agian click on any other daio button say 7 or whatever
4- so div created dynamially on any radio button click are hiding when click on any
5 - i need to main a state of div

if any one need code do let me know

Code:

---

Imports System.Data

Partial Class Default4
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

   
    End Sub

   
    Protected Sub RadioButtonList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles RadioButtonList1.SelectedIndexChanged



        Dim index As Integer

        For index = 1 To RadioButtonList1.SelectedValue
            Dim newdiv As New HtmlGenericControl("div")
            Dim ht As New HtmlTable()
            ht.ID = "mytable" & index

            ht.Width = "100%"
            ht.CellSpacing = "0"
            ht.CellPadding = "0"
            ht.Border = 0


            Dim htr, htr1, htr2 As New HtmlTableRow()
            Dim cell, htc, htc1, htc2, htc3, htc4, htc5, htc6, htc7, htc8 As New HtmlTableCell()

            Dim name_tb As New TextBox()
            Dim sal_ddl As New DropDownList

            'validator
            Dim name_req As New RequiredFieldValidator
            Dim tel_req As New RequiredFieldValidator
            Dim email_req As New RequiredFieldValidator


            name_tb.ID = "name_tb" & index
            sal_ddl.ID = "sal_ddl" & index
            name_req.ID = "name_req" & index
            tel_req.ID = "tel_req" & index
            email_req.ID = "email_req" & index



            sal_ddl.Items.Add("MR")
            sal_ddl.Items.Add("Ms")
            sal_ddl.Items.Add("Mrs")



            Dim Tel_tb1 As New TextBox
            Tel_tb1.ID = "Tel_tb1" & index
            name_tb.TextMode = TextBoxMode.SingleLine

            Dim email_tb1 As New TextBox
            email_tb1.ID = "email_tb1" & index
            email_tb1.TextMode = TextBoxMode.SingleLine

            htc.InnerText = "Name : "
            htc.Width = "20%"
            htc.Align = "Left"



            htc1.Controls.Add(sal_ddl)
            htc1.Width = "10%"

            htc2.Width = "70%"
            htc2.Align = "left"



            htc2.Controls.Add(name_tb)
            htc2.Controls.Add(name_req)
            htr.Controls.Add(htc)
            htr.Controls.Add(htc1)
            htr.Controls.Add(htc2)


            ht.Controls.Add(htr)
            name_req.ControlToValidate = "name_tb" & index
            name_req.Display = ValidatorDisplay.Dynamic
            name_req.ErrorMessage = ("Please Enter name of attendenes")


            'make 2nd  row

            htc3.InnerText = "Telephone : "
            htc3.Width = "20%"
            htc3.Align = "Left"


            htc4.InnerHtml = "<strong></strong>"
            htc4.Width = "10%"

            htc5.Width = "70%"
            htc5.Align = "left"

            htc5.Controls.Add(Tel_tb1)
            htc5.Controls.Add(tel_req)
            htr1.Controls.Add(htc3)
            htr1.Controls.Add(htc4)
            htr1.Controls.Add(htc5)


            ht.Controls.Add(htr1)

            tel_req.ControlToValidate = "Tel_tb1" & index
            tel_req.Display = ValidatorDisplay.Dynamic
            tel_req.ErrorMessage = ("Please Enter Phone")


            'make 3rd  row

            htc6.InnerText = "Email : "
            htc6.Width = "20%"
            htc6.Align = "Left"


            htc7.InnerHtml = "<strong></strong>"
            htc7.Width = "10%"

            htc8.Width = "70%"
            htc8.Align = "left"

            htc8.Controls.Add(email_tb1)
            htc8.Controls.Add(email_req)
            htr2.Controls.Add(htc6)
            htr2.Controls.Add(htc7)
            htr2.Controls.Add(htc8)

            ht.Controls.Add(htr2)

            email_req.ControlToValidate = "email_tb1" & index
            email_req.Display = ValidatorDisplay.Dynamic
            email_req.ErrorMessage = ("Please Enter Email")

            'Add  a blank row

            cell.ColSpan = 3
            cell.InnerHtml = "<br/>"
            Dim row As New HtmlTableRow
            row.Cells.Add(cell)
            ht.Rows.Add(row)

            newdiv.Controls.Add(ht)

            newdiv.Attributes.Add("table", "ht")



            newdiv.Attributes.Add("Style", "border-bottom :#ccc solid 0px")
            newdiv.Attributes.Add("style", "height:23px")
            newdiv.Attributes.Add("style", "padding-left:20px")


         
            Me.PlaceHolder1.Controls.Add(newdiv)

        Next


    End Sub

    Protected Sub spous_atend_Conference_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles spous_atend_Conference.SelectedIndexChanged
        If (Me.spous_atend_Conference.SelectedValue = 0) Then


            Dim index As Integer
            Dim newdiv As New HtmlGenericControl("div")
            Dim ht As New HtmlTable()
            ht.ID = "mytable" & index

            ht.Width = "100%"
            ht.CellSpacing = "0"
            ht.CellPadding = "0"
            ht.Border = 0


            Dim htr, htr1, htr2 As New HtmlTableRow()
            Dim cell, htc, htc1, htc2, htc3, htc4, htc5, htc6, htc7, htc8 As New HtmlTableCell()

            Dim spouse_name_tb As New TextBox()
            Dim sal_ddl As New DropDownList

            spouse_name_tb.ID = "name_tb" & index
            htc.InnerText = "Name : "
            htc.Width = "20%"
            htc.Align = "Left"


            htc1.InnerHtml = "<strong></strong>"
            htc1.Width = "10%"

            htc2.Width = "70%"
            htc2.Align = "left"

            htc2.Controls.Add(spouse_name_tb)

            htr.Controls.Add(htc)
            htr.Controls.Add(htc1)
            htr.Controls.Add(htc2)


            ht.Controls.Add(htr)
            newdiv.Controls.Add(ht)

            newdiv.Attributes.Add("table", "ht")
            '            .right_txt_space_accm{ border-bottom:#ccc solid 0px; height:23px; line-height:20px; padding-left:15px; padding-right:15px;}


            newdiv.Attributes.Add("Style", "border-bottom :#ccc solid 0px")
            newdiv.Attributes.Add("style", "height:23px")
            newdiv.Attributes.Add("style", "padding-left:15px")
         
            Me.placeholder2.Controls.Add(newdiv)

        End If

    End Sub
End Class

---

In order to participate in ViewState, dynamic controls need to exist early on in the Page Life Cycle.

Data in ViewState is applied to all controls during the Load stage. Basically, dynamic controls must be created no later than the Page_Load event.

Control postback events such as RadioButtonList_SelectedIndexChanged execute after the Page_Load event.

but what if control are created after page load on any button click??

Hey,

Neither of those links seem to be working for me.

Did you read the link that I posted:

http://www.4guysfromrolla.com/articles/092904-1.aspx

It explains everything that you need to know about the Page Life Cycle, and when controls need to be created in order to be usable.

Gary

well Gary ,thanks for suggesting me this article ,there are some issue i m facing ,there is no particular user type its simple one company and can add as many attendee's ,secondly in this article the control are created right from beginning (means at load event it have been decide which type of user is there or login and created control a/c to him). in my problem controls are created differ from one user to another on the basis of their number of time panel/div created (for example one company may have 1 attendee's and other company may have 7)

r u unable to open link http://www.gfln.org/default4.aspx ??

Hey,

Yes, the link is now working. Not sure what was going on before.

You will still be able to do the work in the load event, if you need to. Each time you select a radio button, you are posting back to the server, so you could use the load event, checking the checked status of the radio buttons, and taking the necessary action. Or, equally, you could use the checked event of the radio button. Either way, you will still need to respect all the "rules" that are described in the article that I linked to in terms of maintaining the state of these controls.

Gary

well gary thanks for ur help so far ,i m getting what u r saying to said ,now i make a function(for all functionality on code behind of radio button) and re-call that function on page load again, it collapse with the name i give to the controls created at run time for example HTML etc etc .error is like already exist name

hope r got my point ,

Hey,

No, I am sorry, I am not sure that I follow what you are saying.

Can you show the code that you are using?

Gary

ok let me show the code , teh project is in vb.net and make project name is gfln ,do let me knwo if need further

i m thinking to make it ajax enable ,please look for it now, rather than non ajax based code

i have this code with ajax enabled to created it dynmically

Code:

---

Protected Sub RadioButtonList2_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles RadioButtonList2.SelectedIndexChanged
        'Response.Write(RadioButtonList2.SelectedValue)
        Dim index As Integer

        For index = 1 To Me.RadioButtonList2.SelectedValue
            Dim newdiv As New HtmlGenericControl("div")
            newdiv.EnableViewState = True
            Dim ht As New HtmlTable()
            ht.BgColor = "cyan"
            ht.ID = "mytable" & index
            ht.EnableViewState = True

            ht.Width = "100%"
            ht.CellSpacing = "0"
            ht.CellPadding = "0"
            ht.Border = 0


            Dim htr, htr1, htr2 As New HtmlTableRow()
            Dim cell, htc, htc1, htc2, htc3, htc4, htc5, htc6, htc7, htc8 As New HtmlTableCell()

            Dim name_tb As New TextBox()
            Dim sal_ddl As New DropDownList

            'validator
            Dim name_req As New RequiredFieldValidator
            Dim tel_req As New RequiredFieldValidator
            Dim email_req As New RequiredFieldValidator


            name_tb.ID = "name_tb" & index
            sal_ddl.ID = "sal_ddl" & index
            name_req.ID = "name_req" & index
            tel_req.ID = "tel_req" & index
            email_req.ID = "email_req" & index
            name_tb.EnableViewState = True
            sal_ddl.EnableViewState = True
            tel_req.EnableViewState = True

            sal_ddl.Items.Add("MR")
            sal_ddl.Items.Add("Ms")
            sal_ddl.Items.Add("Mrs")



            Dim Tel_tb1 As New TextBox
            Tel_tb1.ID = "Tel_tb1" & index
            Tel_tb1.EnableViewState = True
            name_tb.TextMode = TextBoxMode.SingleLine

            Dim email_tb1 As New TextBox
            email_tb1.ID = "email_tb1" & index
            email_tb1.TextMode = TextBoxMode.SingleLine

            htc.InnerText = "Name : "
            htc.Width = "20%"
            htc.Align = "Left"



            htc1.Controls.Add(sal_ddl)
            htc1.Width = "10%"

            htc2.Width = "70%"
            htc2.Align = "left"



            htc2.Controls.Add(name_tb)
            htc2.Controls.Add(name_req)
            htr.Controls.Add(htc)
            htr.Controls.Add(htc1)
            htr.Controls.Add(htc2)


            ht.Controls.Add(htr)
            name_req.ControlToValidate = "name_tb" & index
            name_req.Display = ValidatorDisplay.Dynamic
            name_req.ErrorMessage = ("Please Enter name of attendenes")


            'make 2nd  row

            htc3.InnerText = "Telephone : "
            htc3.Width = "20%"
            htc3.Align = "Left"


            htc4.InnerHtml = "<strong></strong>"
            htc4.Width = "10%"

            htc5.Width = "70%"
            htc5.Align = "left"

            htc5.Controls.Add(Tel_tb1)
            htc5.Controls.Add(tel_req)
            htr1.Controls.Add(htc3)
            htr1.Controls.Add(htc4)
            htr1.Controls.Add(htc5)


            ht.Controls.Add(htr1)

            tel_req.ControlToValidate = "Tel_tb1" & index
            tel_req.Display = ValidatorDisplay.Dynamic
            tel_req.ErrorMessage = ("Please Enter Phone")


            'make 3rd  row

            htc6.InnerText = "Email : "
            htc6.Width = "20%"
            htc6.Align = "Left"


            htc7.InnerHtml = "<strong></strong>"
            htc7.Width = "10%"

            htc8.Width = "70%"
            htc8.Align = "left"

            htc8.Controls.Add(email_tb1)
            htc8.Controls.Add(email_req)
            htr2.Controls.Add(htc6)
            htr2.Controls.Add(htc7)
            htr2.Controls.Add(htc8)

            ht.Controls.Add(htr2)

            email_req.ControlToValidate = "email_tb1" & index
            email_req.Display = ValidatorDisplay.Dynamic
            email_req.ErrorMessage = ("Please Enter Email")

            'Add  a blank row

            cell.ColSpan = 3
            cell.InnerHtml = "<br/>"
            Dim row As New HtmlTableRow
            row.Cells.Add(cell)
            ht.Rows.Add(row)

            newdiv.Controls.Add(ht)

            newdiv.Attributes.Add("table", "ht")



            newdiv.Attributes.Add("Style", "border-bottom :#ccc solid 0px")
            newdiv.Attributes.Add("style", "height:23px")
            newdiv.Attributes.Add("style", "padding-left:20px")



            Me.PlaceHolder1.Controls.Add(newdiv)
            PlaceHolder1.EnableViewState = True

        Next



    End Sub

---

Code:

---

<div class="right_txt_space_accm">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode=Conditional>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="RadioButtonList2" EventName="SelectedIndexChanged" />
</Triggers><ContentTemplate>
                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                              <tr>
                                                <td width="40%" align="left"><strong>Number of                                                attendees:</strong></td>
                                                <td width="60%" align="left"><strong>
                                              <asp:RadioButtonList EnableViewState=true  ID="RadioButtonList2" CellSpacing=13  RepeatDirection=Horizontal  runat="server" RepeatColumns=4 AutoPostBack="true">
                                                        <asp:ListItem>1</asp:ListItem>
                                                        <asp:ListItem>2</asp:ListItem>
                                                        <asp:ListItem>3</asp:ListItem>
                                                        <asp:ListItem>4</asp:ListItem>
                                                        <asp:ListItem>5</asp:ListItem>
                                                        <asp:ListItem>6</asp:ListItem>
                                                        <asp:ListItem>7</asp:ListItem>
                                                    </asp:RadioButtonList>  </strong></td>
                                              </tr>
                                            </table></ContentTemplate>
                                </asp:UpdatePanel>
                                        </div>
    <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>

---

but it does not creating nay thing on screen ,any help

well my ajax based code is working fine i made few chnages in .aspx page .secondly when ever it created div dynamically in code behind and put inplaceholder it over write to the text written in the footer ,see the code and snap shot

Code:

---

<div class="right_txt_space_accm">
 <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode=conditional>

<ContentTemplate>
                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                              <tr>
                                                <td width="40%" align="left"><strong>Number of                                                attendees:</strong></td>
                                                <td width="60%" align="left"><strong>
                                              <asp:RadioButtonList EnableViewState=true  ID="RadioButtonList1" CellSpacing=13 OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged" RepeatDirection=Horizontal  runat="server" RepeatColumns=4 AutoPostBack="true">
                                                        <asp:ListItem>1</asp:ListItem>
                                                        <asp:ListItem>2</asp:ListItem>
                                                        <asp:ListItem>3</asp:ListItem>
                                                        <asp:ListItem>4</asp:ListItem>
                                                        <asp:ListItem>5</asp:ListItem>
                                                        <asp:ListItem>6</asp:ListItem>
                                                        <asp:ListItem>7</asp:ListItem>
                                                    </asp:RadioButtonList>  </strong></td>
                                              </tr>
                                            </table>
                                                           
    <asp:PlaceHolder  ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
                                          &nbsp; &nbsp;    &nbsp; &nbsp;  &nbsp; &nbsp; 
                                            </ContentTemplate>
                                            <Triggers>
                                          <asp:AsyncPostBackTrigger ControlID="RadioButtonList1" EventName="SelectedIndexChanged" />
                                          </Triggers>
                                         
                                </asp:UpdatePanel>
                                        </div>
                 
              <br />
 <br />
 <br />
 

       
         
                       
                                <div class="right_txt_space_accm">
                                <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode=conditional>

<ContentTemplate>
 
                                                                                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                                          <tr>
                                                                                                <td width="50%" align="left"><strong> Would attend the conference </strong></td>
                                                                                                       
                                                                                                <td width="50%" align="left"><strong></strong> 
                                                    <asp:RadioButtonList EnableViewState=true  RepeatDirection=Horizontal  ID="spous_atend_Conference" 
                                                        runat="server" AutoPostBack="True">
                                                        <asp:ListItem Value="0">Yes</asp:ListItem>
                                                        <asp:ListItem Selected="True" Value="1">No</asp:ListItem>
                                                    </asp:RadioButtonList>
                                                 
                                                  </td>
                                                                                          </tr>
                                                                                        </table>
                                                                                        <br />
                                                                                        <asp:PlaceHolder ID=placeholder2 runat=server >
                                                                                </asp:PlaceHolder>
                                                                                        </ContentTemplate>
                                            <Triggers>
                                            <asp:AsyncPostBackTrigger ControlID="spous_atend_Conference" EventName="SelectedIndexChanged" />

                                       
                                                                               

                </Triggers>
                                           
                                </asp:UpdatePanel>
                       
                                                                                </div>
                                                                                       
 <br />
 <br />

---

Hello,

Is it possible for you to upload a sample application which shows the exact problem that you are having? It is difficult to figure out what is going on until we have all the information, for instance, the CSS files that you are using.

Gary

ok good enough but let me tell u that

1. The project name is gfln1 and is in .vb and in asp.net 3.5

1. u need to run the file Regsiteration.aspx ,secondly u can removed the code behind submitt button (its database driven) u need not concerned with it.just click on radio button say from 1 to 7 and see whats happening

i m sending u just one file and css folder .do let me know if need further description,keep posting me,

ok code is working fine so far i removed the css from concerned rows. will get back to u if need further help or other than this ,but happy most of the issues resolved

Hello,

Sorry I never got back to you yesterday. I did download the code, and had a quick look at it, but I never got a chance to post back.

Glad to hear that you got it working for you though!

Gary

well Gary thanks for ur guidance/help so far u did.

Hey,

If you have got the answer to your problem, can you remember to mark your thread as resolved?

Thanks

Gary