title: Dynamic select element in dynamic user control data loss
body: <p>After a few days of searching forums, reading docs, and meeting with teammates I have yet to find a solution to this issue.</p>
  
  <p>I have a form in a VB.NET project that dynamically adds user controls with the postback from a click of an asp button. The reason there is a postback is because there are calculations happening between the user control and the main page.</p>
  
  <p>There is a dropdown list that needed to have the <code>&lt;optgroup&gt;</code> tag. To do this, I wrote a list of data into an XML file with a structure that follows:</p>
  
  <pre><code>&lt;AccountListData&gt;
      &lt;account&gt;
          &lt;group&gt;OPTION GROUP NAME HERE&lt;/group&gt;
          &lt;value&gt;OPTION VALUE/TEXT HERE&lt;/value&gt;
      &lt;/account&gt;
      &lt;account&gt;...&lt;/account&gt;
  &lt;/AccountListData&gt;
  </code></pre>
  
  <p>The XML file is 1117 lines long. It wasn't fun to write out. But, the reason I did was to use it to create the <code>&lt;select&gt;</code> tag in the code behind and assign it to the <code>innerHTML</code> attribute of a <code>div</code> tag in the front end. It looks something like this:</p>
  
  <p>Form.aspx</p>
  
  <pre><code>    &lt;table&gt;
        &lt;tr&gt;
          &lt;td id="DateLabel" runat="server"&gt;Date:&lt;/td&gt;
          &lt;td id="DescriptionLabel" runat="server"&gt;Description:&lt;/td&gt;
          &lt;td id="AmountLabel" runat="server"&gt;Amount:&lt;/td&gt;
          &lt;td id="DropDownLabel" runat="server"&gt;Select:&lt;/td&gt;
        &lt;/tr&gt;
        &lt;asp:Placeholder ID="ph1" runat="server"&gt;&lt;/asp:Placeholder&gt;
      &lt;/table&gt;
      &lt;asp:Button ID="AddItemButton" runat="server" CausesValidation="false" Text="Add Item"&gt;
      &lt;asp:Label ID="RowCountLabel" runat="server"&gt;&lt;/asp:Label&gt;
  </code></pre>
  
  <p>Form.aspx.vb</p>
  
  <pre><code>    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        'Add/Removed User Control
        AddRemoveUserControl()
        ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "CalculateCosts", "Javascript function();"), True)
      End Sub
      ...
      Public Function GetPostbackControlName(ByVal Page As Page) As String
        Dim ctrlName As String
        ctrlName = Page.Request.Params.Get("__EVENTTARGET")
        Return ctrlName
      End Function
      ...
      Private Sub AddRemoveUserControl()
        'Get and check the ID of what caused the postback
        Dim c As Control = GetPostbackControlName(Page)
  
        If Not IsNothing(c) Then
          If c.ID.ToString = "AddItemButton" Then
            RowCountLabel.Text = CInt(RowCountLabel.Text) + 1
          End If
        End If
  
        'Get ID for dynamic user controls
        Dim ControlID As Integer = 0
        For i As Integer = 1 To (CInt(RowCountLabel) - 1)
          Dim DynamicControl As ItemTable = LoadControl("usercontrols/ItemTable.ascx")
          DynamicUserControl.ID = "uc" &amp; CStr(ControlID)
  
          'Add an event handler for the usercontrol
          AddHandler DynamicUserControl.RemoveUserControl, AddressOf Me.HandleRemoveUserControl
  
          'Add user control to placeholder on front end
          ph1.Controls.Add(DynamicUserControl)
  
          'Number the amount of user controls
          ControlID += 1
        Next
        NumberItemTable()
      End Sub
      ...
      Private Sub HandleRemoveUserControl(sender As Object, e As EventArgs)
        'Removes usercontrol from placeholder and lowers count #
      End Sub
      ...
      Private Sub NumberItemTable()
        'Gives a number value to a property in the usercontrol
      End Sub
  </code></pre>
  
  <p>Control.ascx</p>
  
  <pre><code>    &lt;%@ Control Language="vb" AutoEventWireup="false" CodeBehind="ItemTable.ascx.vb" Inherits=".ItemTable" %&gt;
  &lt;tr&gt;
    &lt;td&gt;
      &lt;asp:Textbox ID="Date" runat="server" CssClass="datepicker"&gt;&lt;/asp:Textbox&gt;&lt;/td&gt;
    &lt;td&gt;
      &lt;asp:Textbox ID="Description" runat="server"&gt;&lt;/asp:Textbox&gt;&lt;/td&gt;
    &lt;td&gt;
      &lt;asp:Textbox ID="Amount" runat="server"&gt;&lt;/asp:Textbox&gt;&lt;/td&gt;
    &lt;td&gt;
      &lt;div ID="DynamicSelect" runat="server"&gt;&lt;/div&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Control.ascx.vb</p>
  
  <pre><code>Dim XMLInfo As XDocument
  
  Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    FillDropDownList()
  End Sub
  
  Private Sub FillDrowDownList()
    'Get XML data
    Dim XMLData 'all the XML data is loaded as an XDocument here
    Dim temp As string
    'WHERE THE DROPDOWN IS DYNAMICALLY CREATED WITH XML DATA
    DynamicSelect.InnerHTML += "&lt;select ID='" + Me.ID.ToString + "CreatedSelect'&gt;&lt;option value='' selected disabled&gt;- Select -&lt;/option&gt;"
    For Each element As XElement In XMLData.Descendants("account")
      Dim group As String = element.&lt;group&gt;.Value.ToString
      Dim value As String = element.&lt;value&gt;.Value.ToString
  
      If group &lt;&gt; "" Then
        If group &lt;&gt; temp Then
          temp = group
          DynamicSelect.InnerHTML += "&lt;/optgroup&gt;"
          DynamicSelect.InnerHTML += "&lt;optgroup label='" + group + "'&gt;"
        End If
      End If
      DynamicSelect.InnerHTML += "&lt;option value='" + value + "'&gt;" + value + "&lt;/option&gt;"
    Next
    DynamicSelect.InnerHTML += "&lt;/select&gt;"
  End Sub
  </code></pre>
  
  <p>When a value is selected on the dynamic dropdown list, any postback clears that selection. Any insight into why that is happening and what I can do to solve this issue would be GREATLY appreciated.</p>