title: asp.net get html controls in code behind
body: <p>If I alter the html on a page using JavaScript, how can I access those changes in my ASP.NET code behind?</p>
  
  <p>I found some dhtml "drag and drop" code online (<a href="http://www.dhtmlgoodies.com/scripts/drag-drop-nodes/drag-drop-nodes-demo2.html" rel="nofollow">http://www.dhtmlgoodies.com/scripts/drag-drop-nodes/drag-drop-nodes-demo2.html</a>), but after moving list items from one  control to another, I don't know how to "access" each  control in the code behind so I can save the list items in each  control.</p>
  
  <p>I tried using the HTML Agility pack, but it seems like I'm only able to access the unaltered html - meaning all the  controls are empty.</p>
  
  <p>Any help/suggestions are appreciated. Or any suggestions as to a better way of accomplishing this are welcome (jQuery? Ajax Toolkit?).</p>
  
  <p><strong>EDIT</strong>:
  Here's some code. I'm able to populate an ASP Label control (_saveContent), from the JavaScript function saveDragDropNodes, with the "ul" ID and the corresponding "li" controls that I've dragged and dropped. When clicking the save button however, my Label control no longer contains any Text...</p>
  
  <pre><code>function saveDragDropNodes() {
          var saveString = "";
          var uls = dragDropTopContainer.getElementsByTagName('UL');
          for (var no = 1; no &lt; uls.length; no++) {   // LOoping through all &lt;ul&gt;
              var lis = uls[no].getElementsByTagName('LI');
              for (var no2 = 0; no2 &lt; lis.length; no2++) {
                  if (saveString.length &gt; 0) saveString = saveString + ";";
                  saveString = saveString + uls[no].id + '|' + lis[no2].id;
              }
          }
          document.getElementById("&lt;%=_saveContent.ClientID %&gt;").innerHTML = saveString.replace(/;/g, ';&lt;br&gt;');
      }
    &lt;div id="dhtmlgoodies_dragDropContainer"&gt;
      &lt;div id="dhtmlgoodies_listOfItems"&gt;
          &lt;div&gt;
              &lt;p&gt;
                  Available Items&lt;/p&gt;
              &lt;ul id="allItems" runat="server"&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="dhtmlgoodies_mainContainer"&gt;
          &lt;div&gt;
              &lt;p&gt;
                  Group 1&lt;/p&gt;
              &lt;ul id="_ul1"&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;p&gt;
                  Group 2&lt;/p&gt;
              &lt;ul id="_ul2"&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;asp:Label ID="_lSave" runat="server" ForeColor="Red" EnableViewState="false" /&gt;
  &lt;/div&gt;
  &lt;div id="footer"&gt;
  &lt;span onmouseover="saveDragDropNodes()"&gt;
      &lt;asp:Button ID="_btnSave" runat="server" Text="Save Groups" OnClick="_btnSave_OnClick" /&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;ul id="dragContent"&gt;
  &lt;/ul&gt;
  &lt;div id="dragDropIndicator"&gt;&lt;/div&gt;
  &lt;asp:Label ID="_saveContent" runat="server" /&gt;
  </code></pre>
  
  <p>Code Behind:</p>
  
  <pre><code>Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load
      If Not Page.IsPostBack Then
          GetItems()
      End If
  End Sub
  Private Sub GetItems()
      Dim dt As DataTable = DbHelper.GetDataTableForSP("GetListOptions")
      Dim index As Integer = 1
      For Each _row As DataRow In dt.Rows
          Dim _li As New HtmlGenericControl("li")
          _li.ID = _row("ClassId")
          _li.Attributes.Add("runat", "server")
          _li.InnerHtml = String.Format("{0}) {1} {2}", index, _row("ClassId"), _row("ClassDescription1"))
          allItems.Controls.Add(_li)
          index += 1
      Next
  End Sub
  Private Sub SaveGroups()
  
      Dim str As String = _saveContent.Text /*No text here */
      _lSave.Text = "Groups Saved!"
      GetItems()
  End Sub
  </code></pre>