title: Html.DropDownListFor selecting item based on ModelState rather than Model
body: <p>In asp.net mvc (v5 in my case), when you post a model back to a controller, and then render a view <em>with a model other than the one that was posted back</em>, then Html.DropDownListFor will select the selected item based on the data from the model that was posted back, rather than the model that was passed to the view.</p>
  
  <p>Why is this?</p>
  
  <p>Here's an example. When you select a new item in the first dropdown, the form posts back, and if the fist dropdown has id=2 selected, then the selectedId2 is changed and the second dropdown <em>should</em> render with the second item selected. However that's not the case. While the Model object in the view <em>does</em> have the new selectedId2 = 2 value, the DropDownListFor under the hood gets the selected value from the ViewState.ModelState object, not the ViewState.Model. What can be done to get the DropDownListFor to render based only on the Model passed to the view?</p>
  
  <p>The Controller:</p>
  
  <pre><code>public class HomeController : Controller
  {
      public ActionResult Index()
      {
          var defaultModel = getModel();
          return View(defaultModel);
      }
  
      [HttpPost]
      public ActionResult Index(Model1 postedModel)
      {
          var defaultModel = getModel();
  
          if (postedModel.selectedId1 == 2)
          {
              defaultModel.selectedId1 = 2;
              defaultModel.selectedId2 = 2;
          }
  
          return View(defaultModel);
      }
  
      private Model1 getModel()
      {
          var items1 = new[]
          {
              new
              {
                  Name = "Item 1-1",
                  Id = "1"
              },
              new
              {
                  Name = "Item 1-2",
                  Id = "2"
              }
          };
  
          var items2 = new[]
          {
              new
              {
                  Name = "Item 1-1",
                  Id = "1"
              },
              new
              {
                  Name = "Item 2-2",
                  Id = "2"
              }
          };
  
          return new Model1
          {
              selectedId1 = 1,
              selectedId2 = 1,
              SelectList1 = new SelectList(items1, "Id", "Name", 1),
              SelectList2 = new SelectList(items2, "Id", "Name", 1)
          };
      }
  
  
  }
  </code></pre>
  
  <p>The View Model:</p>
  
  <pre><code>public class Model1
  {
      public SelectList SelectList1 { get; set; }
      public SelectList SelectList2 { get; set; }
      public int selectedId1 { get; set; }
      public int selectedId2 { get; set; }
  }
  </code></pre>
  
  <p>The View:</p>
  
  <pre><code>@model Model1
  
  @using (Html.BeginForm(FormMethod.Post))
  {
      &lt;div&gt;
          @Html.DropDownListFor(m =&gt; m.selectedId1, Model.SelectList1, new { title = "Select 1", onchange = "this.form.submit();" })
          @Html.DropDownListFor(m =&gt; m.selectedId2, Model.SelectList2, new { title = "Select 2", onchange = "this.form.submit();" })
      &lt;/div&gt;
  }
  </code></pre>
  
  <p>Edit: <strong>One Solution I found:</strong> 
  Adding this line before executing the View() clears out the posted model so that the DropDownListFor helper uses the model that is passed to the view:</p>
  
  <pre><code>ViewData.ModelState.Clear();
  </code></pre>