title: How to preserve cascading dropdownlist items after httppost if form has invalid ModelState
body: <p>I have three dropdown (cascaded) in a View. First dropdown elements come from the ViewModel. I'm populating 2nd dropdown elements when 1st dropdown changes. and same for the 3rd dropdown. Classic cascading dropdownlist example you can find on anywhere (ex: <a href="http://www.c-sharpcorner.com/UploadFile/4d9083/creating-simple-cascading-dropdownlist-in-mvc-4-using-razor/" rel="nofollow">http://www.c-sharpcorner.com/UploadFile/4d9083/creating-simple-cascading-dropdownlist-in-mvc-4-using-razor/</a> )</p>
  
  <p>Problem occurs when user submits the form. If ModelState is invalid, 2nd and 3rd dropdown loses their items and 1st dropdown conserves its state. I understand why they behave like that but can't figure it out how to populate them again with the users selected values.</p>
  
  <h2>Scenario</h2>
  
  <ol>
  <li>User request <code>/Country/Index</code></li>
  <li>After <code>page loaded</code>, user selects <code>CountryId DropDownList</code>
  
  <ul>
  <li>Send <code>Country Id</code> to method and if result is not null, load <code>StateId DropDownList</code>.</li>
  </ul></li>
  <li>Do not fill <code>PostalCode Textbox</code> and submit form.</li>
  <li>Examine that <code>CountryId DropDownlist</code> is filled and selected but <code>StateId ropdownlist</code> is empty.</li>
  <li>Cry</li>
  </ol>
  
  <h2>View</h2>
  
  <pre><code>//HTML Code
  //...
  
  @Html.DropDownListFor(m =&gt; m.CountryId, ViewBag.Country as IEnumerable&lt;SelectListItem&gt;, "Select Country")
  @Html.DropDownListFor(m =&gt; m.StateId, new SelectList(string.Empty, "Value", "Text"), "Select State")
  @Html.DropDownListFor(m =&gt; m.CityId, new SelectList(string.Empty, "Value", "Text"), "Select City")
  @Html.TextBoxFor(m=&gt; m.PostalCode)
  
  &lt;script type="text/javascript"&gt;
  var countryDDL = $("#CountryId");
  countryDDL.change(function () {
                  $.ajax({
                      type: 'POST',
                      url: '@Url.Action("LoadStateList")',
                      dataType: 'json',
                      data: { countryId: countryDDL.val() },
                      success: function myfunction(states) {
                          $("#StateId").empty();
                          $.each(states, function (i, state) {
                              $("#StateId").append('&lt;option value="' + state.Value + '"&gt;' + state.Text + '&lt;/option&gt;');
                          }); }
                     });
                     return false;
                  });
  
  //Code for 2nd (state) dropdownlist.change() method.
  //...
  &lt;/script&gt;
  </code></pre>
  
  <h2>Controller</h2>
  
  <pre><code>public ActionResult Index()
  {
      ViewBag.CountryList = LoadCountryList();
      return View();
  }
  
  [HttpPost]
  public ActionResult Index(CountryViewModel cvm)
  {
      if(ModelState.IsValid)
      {
          //Save or do whatever you want
      }
  
      ViewBag.CountryList = LoadCountryList();
      return View();
  }
  </code></pre>
  
  <h2>View Model</h2>
  
  <pre><code>public class CountryViewModel
  {
      public int CountryId {get;set;}
      public int StateId {get;set;}
      public int CityId {get;set;}
  
      [Required]
      public string PostalCode {get;set;}
  }
  </code></pre>