title: How to fill an asp:DropDown client side?
body: <p>i have a web-page with two <code>&lt;asp:DropDown&gt;</code> controls:</p>
  
  <p><img src="https://i.stack.imgur.com/lJX0l.png" alt="enter image description here"></p>
  
  <p>When the user selects a <strong>Country</strong> i want to fill the list of states.</p>
  
  <hr>
  
  <h2>Attempt #1 - OnSelectedIndexChanged</h2>
  
  <p>The first thing was pretty simple: during <code>OnSelectedIndexChanged</code> of the first drop-down, fill the second box:</p>
  
  <pre><code>//be sure to set AutoPostBack of cbCountry to true in the properties window
  
  protected void cbCountry_SelectedIndexChanged(object sender, EventArgs e)
  {
     cbState.Items.Clear();
     FetchStatesForCountryIntoStateDropDown(cbState, cbCountry.SelectedValue);
     if (cbState.Items.Count &gt; 0)
        cbState.SelectedIndex = 0;
  }    
  </code></pre>
  
  <p>That worked well enough, except that it triggers a page refresh. The user is interrupted while the post is sent, and the page is reloaded. And the page is no longer where they left it, and they are no longer sitting inside the drop-down.</p>
  
  <hr>
  
  <h2>Attempt #2 - Old fashioned kludgey UpdatePanels</h2>
  
  <p><a href="https://stackoverflow.com/a/11182209/12597">@Seglo calls UpdatePanels an old-fashioned kludge</a>. But since i can't find anything better - let's try it! Wrap the stuff in an update-panel, and let it do it's magic:</p>
  
  <p><img src="https://i.stack.imgur.com/lhBeX.png" alt="enter image description here"></p>
  
  <p>The problem with that is that when the <code>UpdatePanel</code> updates, it deletes both controls and replaces them with new ones. This means that the user has lost their focus in the first dropdown. People have suggested <a href="http://vincexu.blogspot.ca/2009/06/keep-textbox-focus-inside-updatepanel.html" rel="nofollow noreferrer">horrible kludges using javascript to try to save and restore the focus</a>. But i'd rather do things correctly.</p>
  
  <hr>
  
  <h2>Attempt #3 - Only UpdatePanel what you need to Update</h2>
  
  <p>i don't need to <em>update</em> the <strong>Country</strong> dropdown (nor the labels). i only <strong>need</strong> to update the <strong>State</strong> dropdown; so why not wrap <em>only</em> that in an <code>&lt;asp:UpdatePanel&gt;</code>. In fact <a href="https://stackoverflow.com/questions/4583948/focus-lost-on-partial-postback-with-usercontrols-inside-updatepanel">this is the answer suggested on StackOverflow</a>:</p>
  
  <p><img src="https://i.stack.imgur.com/vfrOG.png" alt="enter image description here"></p>
  
  <p>And that works. The <strong>Country</strong> dropdown doesn't lose focus. The <code>OnSelectedIndexChanged</code> event fires, and the <strong>State</strong> dropdown fills...</p>
  
  <p>...the first time i change the country dropdown.</p>
  
  <p>If i change the <strong>Country</strong> <em>again</em>, it throws an exception:</p>
  
  <blockquote>
    <p>Invalid postback or callback argument. </p>
  </blockquote>
  
  <p>Somehow the <em>updatepanel</em> is messing with the WebForms controls; making the postback data invalid. This makes sense, since messing with WebForms controls makes the postback data invalid.</p>
  
  <hr>
  
  <h2>Attempt #4 - Try faking a postback myself using javascript</h2>
  
  <p>It doesn't gain you anything; but <a href="https://stackoverflow.com/questions/11179821/updating-updatepanels-based-on-texbox-focus-lost-in-asp-net">people have tried triggering a postback manually through javascript</a>:</p>
  
  <pre><code>$('#userControl1').on('focusout', function() {
       __doPostback('UpdatePanel2UniqueId', '');
  });
  </code></pre>
  
  <p>Except without knowing the <code>ClientID</code> of <code>cbCountry</code> and <code>UpdatePanel1</code>, the script won't run; nor do i even know if it can solve my problem</p>
  
  <hr>
  
  <h2>Attempt #5 - Use <code>PageMethods</code> to fetch the State list.</h2>
  
  <p>Now i'm only linking other people's random suggestions. It takes me about 4 hours to try to implement any suggestion. Which means i've lost a day and a half trying to fill a combo-box. </p>
  
  <p>i can't afford to lose a day on every random suggestion i find on google; i need an <em>actual</em> answer. So i'm only including them to show the grumpy people that there was research effort (as though research effort was important).</p>
  
  <p>Some <a href="http://www.aspsnippets.com/Articles/Populate-Bind-DropDownList-using-JavaScript-and-ASP.Net-AJAX.aspx" rel="nofollow noreferrer">people have suggested calling ASP.net <code>PageMethods</code>, and update the <code>cbState</code> in client javascript</a>:</p>
  
  <pre><code>function GetStates(country)
  {
      PageMethods.GetTeam(teamCode, CountryCallback);
  }
  
  function CountryCallback(result)
  {
      var teamName = $get('TeamName');
      var seed = $get('Seed');
      var rpi = $get('RPI');
      var scoutingReport = $get('ScoutingReport');
      teamName.innerText = result.TeamName;
      seed.innerText = result.Seed;
      rpi.innerText = result.RPI;
      scoutingReport.innerText = result.ScoutingReport;
  }
  
  onchange="GetTeam(this.options[this.selectedIndex].value);"
  </code></pre>
  
  <p>Problem here is the same at Attempt#2. The viewstate will be wrong because i've mucked with the form behind ASP.net's back.</p>
  
  <hr>
  
  <p>There seems to be a fundamantal problem that ASP.net and <strong>viewstate</strong> are fundamentally incompatible with client-side DOM updates. Any attempt to modify a page client-side invalidates the entire ASP.net web-forms programming model.</p>