title: checkbox status not saved when update panel fires
body: <p>I have an div <code>id = campaignDiv</code> and I load its content dynamically</p>
  
  <p>The content is checkboxes .</p>
  
  <p>I have an update panel that fires every 30 seconds. </p>
  
  <h3>My problem</h3>
  
  <p>when the update panel fires, the checkboxes return to the default state, which is unselected.</p>
  
  <p>I will give you all my code. Actually it is very simple code. <strong>you can copy paste it in you visual studio and it will work</strong> </p>
  
  <p><strong>WebForm4.aspx</strong></p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="TestDropdownChecklist.WebForm4" %&gt;
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link rel="stylesheet" href="StyleSheet1.css"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
          &lt;asp:ScriptManager ID="ScriptManager1" runat="server"&gt;
          &lt;/asp:ScriptManager&gt;
          &lt;asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"&gt;
              &lt;ContentTemplate&gt;
                  &lt;asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick"&gt;
                  &lt;/asp:Timer&gt;
  
                  &lt;div id="campaignDiv" runat="server"&gt;
                      &lt;ul&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
  
              &lt;/ContentTemplate&gt;
              &lt;Triggers&gt;
                  &lt;asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" /&gt;
              &lt;/Triggers&gt;
          &lt;/asp:UpdatePanel&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>WebForm4.aspx.cs</strong></p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.UI;
  using System.Web.UI.WebControls;
  
  namespace TestDropdownChecklist
  {
      public partial class WebForm4 : System.Web.UI.Page
      {
          private string CreateLiCheckbox(string checkBoxText)
          {
              return string.Format("&lt;li&gt;&lt;span class=\"textDropdown\"&gt;{0}&lt;/span&gt;&lt;input runat=\"server\" id=\"{1}\" value=\"{0}\" type=\"checkbox\"&gt;&lt;label for=\"{1}\"&gt;&lt;/label&gt;&lt;/li&gt;", checkBoxText, checkBoxText + "dropdownID");
          }
  
          protected void Page_Load(object sender, EventArgs e)
          {
              int refreshtime = 30000;
              Timer1.Interval = refreshtime;
              if (!IsPostBack)
              {
                  string[] comps = new string[] { "default", "sales", "direct"};
                  string html = "&lt;ul&gt;";
                  for (int i = 0; i &lt; comps.Count(); i++)
                  {
                      html = html + CreateLiCheckbox(comps[i]);
                  }
                  html = html + "&lt;/ul&gt;";
                  campaignDiv.InnerHtml = html;
              }
              else
              {
  
              }
          }
  
          protected void Timer1_Tick(object sender, EventArgs e)
          {
  
  
          }
  
      }
  }
  </code></pre>
  
  <p><strong>StyleSheet1.css</strong></p>
  
  <pre><code>#DropdownSeviceLink {
      float: right;
      margin-right: 10px;
  }
  
  a#DropdownServiceLink:visited {
      color: inherit;
  }
  
  #campaignDiv {
      background-color: #374954;
      width: 200px;
      height: 170px;
      padding-bottom: 10px;
      position: absolute;
      top: 40px;
      right: 0;
  }
  
      #campaignDiv ul {
          color: #fff;
          list-style: none;
          overflow: auto;
          padding-left: 5px;
          height:100%;
      }
  
      #campaignDiv input[type=checkbox] {
          visibility: hidden;
      }
  
          #campaignDiv input[type=checkbox]:checked + label {
              left: 60px;
              background: #26ca28;
          }
  
      #campaignDiv li {
          width: 100px; /*120*/
          height: 25px; /*40*/
          background: #333;
          margin: 13px 0px; /*20px 60px*/
          border-radius: 50px;
          position: relative;
      }
  
          #campaignDiv li:before {
              content: 'On';
              position: absolute;
              top: 4px; /*12*/
              left: 13px;
              height: 2px;
              color: #26ca28;
              font-size: 16px;
          }
  
          #campaignDiv li:after {
              content: 'Off';
              position: absolute;
              top: 4px; /*12*/
              left: 71px; /*84*/
              height: 2px;
              color: #111;
              font-size: 16px;
          }
  
          #campaignDiv li label {
              display: block;
              width: 36px; /*52*/
              height: 18px; /*22*/
              border-radius: 50px;
              -webkit-transition: all .5s ease;
              -moz-transition: all .5s ease;
              -o-transition: all .5s ease;
              -ms-transition: all .5s ease;
              transition: all .5s ease;
              cursor: pointer;
              position: absolute;
              top: 4px; /*9*/
              z-index: 1;
              left: 12px;
              background: #ddd;
          }
  
  
  
  
  
  .textDropdown {
      margin:0px;
      padding:0px;
      margin-left: 110px;
  
  }
  </code></pre>
  
  <p>Please notice that I am using <code>runat server</code> already. maybe I should have added the checkbox dynamically in another way?</p>
  
  <h3>Edit</h3>
  
  <p>after readying through internet, I find that I may need to add the checkboxes to my update panel like this 
  <code>UpdatePanel1.ContentTemplateContainer.Controls.Add(dynamic controls);</code>
  but the problem is the the checkbox in my case is string not objects. right?</p>
  
  <p>Your help is highly appreciated.</p>
  
  <h3>Edit for the great user Schadensbegrenzer </h3>
  
  <p>Your answer is really works, I thaaaaaaaaaaaaaank you , but please I stil have this issue not solved,
  your code made this rendered html</p>
  
  <pre><code>&lt;ul id="campaignDiv"&gt;   &lt;li&gt;&lt;input id="campaignDiv_0" type="checkbox" name="campaignDiv$0" checked="checked" value="default"&gt;&lt;label for="campaignDiv_0"&gt;default&lt;/label&gt;&lt;/li&gt;    &lt;li&gt;&lt;input id="campaignDiv_1" type="checkbox" name="campaignDiv$1" value="sales"&gt;&lt;label for="campaignDiv_1"&gt;sales&lt;/label&gt;&lt;/li&gt;  &lt;li&gt;&lt;input id="campaignDiv_2" type="checkbox" name="campaignDiv$2" value="direct"&gt;&lt;label for="campaignDiv_2"&gt;direct&lt;/label&gt;&lt;/li&gt;  &lt;/ul&gt;
  </code></pre>
  
  <p>where the <code>campaignDiv</code> is the ID of the ul. kindly can you edit your answer so the rendered html can be like this:</p>
  
  <pre><code>&lt;div id = campaignDiv&gt;
      &lt;ul&gt;
                &lt;li&gt;
                          checkbox here
                &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>in your code I made the campaginDiv the id of <code>asp:CheckBoxList</code></p>