title: Asp.Net MVC - Model Binding to Model or ViewModel
body: <p>I have a controller, which returns a view passing in a view model, which has properties required for display of the view (Drop-down select item lists etc). </p>
  
  <p>But when I post it to the server, I have a different model class, which has the selected value of those dropdowns. In my HttpPost controller action, I check the <strong>(ModelState.IsValid)</strong>, before doing any processing, but when it is false, I '<strong>return View(model)</strong>' back. </p>
  
  <p>But since the view is bound to the ViewModel, and my Post action, is accepting the actual model, I get an error '<strong>The model item passed into the dictionary is of type 'Model', but this dictionary requires a model item of type 'ViewModel'</strong>, when I submit the form, and the validation error to show up on the view.</p>
  
  <p>How do I solve this? What is the best practice for using strongly typed views, passing in the view model, but when submitting to a different model?  </p>
  
  <p>Code:</p>
  
  <pre><code> public ActionResult Buy()
      {
        BuyVM buyVM = GetBuyVM();
        return View(buyVM);
      }
  
     [HttpPost]
      [ValidateAntiForgeryToken]
      public async Task&lt;ActionResult&gt; Buy(BuyModel model)
      {
        if (ModelState.IsValid)
          {
          // Do Procesing
          return View("Success");
          }
        return View(model);
      }
  
   public class BuyVM
      {
          public SelectList PurchaseDateList { get; set; }
  
          public SelectList BedroomsList { get; set; }
  
          public SelectList StoriesList { get; set; }
  
          [Required]
          public string SquareFootage { get; set; }
  
          [Required]
          public string PreferredCityLocations { get; set; }
  
          public string AdditionalInfo { get; set; }
      }
  
   public class BuyModel 
      {
          public string PurchaseDateList { get; set; }
          public string BedroomsList { get; set; }
          public string StoriesList { get; set; }
          public string SquareFootage { get; set; }
          public string PreferredCityLocations { get; set; }
          public string AdditionalInfo { get; set; }
      }
  
   private static BuyVM GetBuyVM()
          {
              BuyVM buyVM = new BuyVM();
  
              buyVM.PurchaseDateList = new SelectList(new[] { "Immediately", "1 to 3 months", "4 to 6 months", "More than 6 months" });
              buyVM.BedroomsList = new SelectList(new[] { "1", "2", "3", "4", "5+" });
              buyVM.StoriesList = new SelectList(new[] { "1", "2", "Does not matter" });
  
              return buyVM;
          }
  </code></pre>
  
  <p>Buy.cshtml</p>
  
  <pre><code>    @model Models.BuyVM
      // html
   @Html.DropDownListFor(m =&gt; m.PurchaseDateList, Model.PurchaseDateList, new { @class = "form-control" })
  
   @Html.DropDownListFor(m =&gt; m.BedroomsList, Model.BedroomsList, new { @class = "form-control" })
  </code></pre>
  
  <p>So when I return the View(model) back, in the HTTPPost if there were validation errors (JQueryVal), I am trying to display the validation errors, if I pass the model back to the view. But I have this type mismatch.   </p>