title: ViewModel remains null or without values after jQuery Ajax post
body: <p>I have an MVC form set up like this:</p>
  
  <pre><code>@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "createForm"}))
  {
      @Html.Partial("_Action", Model)
      &lt;div class="form-group"&gt;
          &lt;button type="button" id="createButton" class="btn btn-primary"&gt;@Resources.Global.CreateActionButton&lt;/button&gt;
      &lt;/div&gt;
  }
  </code></pre>
  
  <p>Here's the code of the partial:</p>
  
  <pre><code>@model EWI_JOPWeb.Models.ActionsViewModel
  @Html.AntiForgeryToken()
  
  &lt;div class="form-group"&gt;
      @Html.HiddenFor(m =&gt; m.Action.Id)
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
      @Html.LabelFor(m =&gt; m.Action.Number)
      @Html.TextBoxFor(m =&gt; m.Action.Number, new { @class = "form-control", type = "number", placeholder = "Vul hier een nummer in" })
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
      @Html.LabelFor(m =&gt; m.Action.Title)
      @Html.TextBoxFor(m =&gt; m.Action.Title, new { @class = "form-control", placeholder = "Vul hier tekst in" })
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
      @Html.LabelFor(m =&gt; m.Action.DepartmentNumber)
      @Html.DropDownListFor(m =&gt; m.Action.DepartmentNumber, Model.DepartmentSelectItems, new { @class = "form-control selectpicker noBoxShadow", title = "Selecteer opties...", data_selected_text_format = "count &gt; 0", multiple = "multiple" })
  &lt;/div&gt;
  
  &lt;!-- Other similar controls --&gt;
  </code></pre>
  
  <p>Following code is used to submit to a controller:</p>
  
  <pre><code>$("#createButton").click(function() {
      $.ajax({
          url: '@Url.Action("CreateAction", "Home")?spHostUrl=' + getSPHostUrlFromQueryString(window.location.search),
          dataType: "json",
          data: { viewModel: $("#createForm").serialize() },
          cache: false,
          type: "POST",
          success: function (response) {
              //show successMessage
          },
          error: function (jqXhr, textStatus, errorThrown ) {
              //show errorMessage
          }
      });
  });
  </code></pre>
  
  <p>And of course the controller/viewmodel code:</p>
  
  <pre><code>[HttpPost]
  [SharePointContextFilter]
  public ActionResult CreateAction(ActionsViewModel viewModel)
  {
      //process 'viewModel'
  }
  
  public class ActionsViewModel
  {
      public IEnumerable&lt;DepartmentViewModel&gt; Departments { get; set; }
      public Action Action { get; set; }
  
  
      public IEnumerable&lt;SelectListItem&gt; TypeSelectItems =&gt; new[]
      {
          new SelectListItem { Value = "Beheersactie", Text = @"Beheersactie", Selected = true },
          new SelectListItem { Value = "Beleidsactie", Text = @"Beleidsactie", Selected = false }
      };
  
      public IEnumerable&lt;SelectListItem&gt; DepartmentSelectItems { get; set; }
      public IEnumerable&lt;SelectListItem&gt; PolicyDocumentSelectItems { get; set; }
      public IEnumerable&lt;SelectListItem&gt; BudgetArticleSelectItems { get; set; }
      public IEnumerable&lt;SelectListItem&gt; MonitoringSelectItems { get; set; }
  }
  </code></pre>
  
  <p>The result of <code>$("#createForm").serialize()</code> is similar to:</p>
  
  <blockquote>
    <p>__RequestVerificationToken=D71hJi2rti_r2nyqi5KLg1iYnUHIMoVizjoR5ru2fsVa4CAhRTr-3dqi9bzdWZGlE2fNZReSIzySm_B2gtmbubPWaIchekaTmOdyerwahD01&amp;Action.Id=&amp;Action.Number=23&amp;Action.Title=test&amp;Action.DepartmentNumber=f4663eb2-e9b1-4aea-a7e9-b1b49eb100a7</p>
  </blockquote>
  
  <p>But when the debugger hits the controller method, <code>viewModel</code> remains <em>null</em>. </p>
  
  <p>I have searched and tried solutions from following other questions:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/25105072/how-to-post-the-viewmodel-to-action-method-using-jquery-ajax-in-mvc">How to post the viewmodel to action method using JQUERY AJAX in MVC</a></li>
  <li><a href="https://stackoverflow.com/questions/9871365/mvc3-passing-viewmodel-to-controller-method-using-jquery-ajax">MVC3 Passing ViewModel to controller method using JQuery Ajax</a></li>
  <li><a href="https://stackoverflow.com/questions/2445874/invalid-json-primitive-in-ajax-processing">&quot;Invalid JSON primitive&quot; in Ajax processing</a></li>
  <li><a href="https://stackoverflow.com/questions/24944495/how-to-serialize-model-pass-it-to-mvc-controller-in-ajax-request">How to serialize model, pass it to MVC controller in ajax request</a></li>
  </ul>
  
  <p>But none of these solutions have worked for me.</p>
  
  <p>Now I changed my code and added variables for the selected items and such:</p>
  
  <pre><code>public string SelectedType { get; set; }
  public List&lt;string&gt; SelectedDepartment { get; set; }
  public List&lt;string&gt; SelectedPolicyDocuments { get; set; }
  public List&lt;string&gt; SelectedBudgetArticles { get; set; }
  public List&lt;string&gt; SelectedMonitorings { get; set; }
  </code></pre>
  
  <p>And in my markup I adjusted this to:</p>
  
  <pre><code>@Html.DropDownListFor(m =&gt; m.SelectedMonitorings,
                        new MultiSelectList(Model.MonitoringSelectItems, "Id", "Title", Model.SelectedMonitorings),
                        new { @class = "form-control selectpicker noBoxShadow",
                        title = "Selecteer opties...",
                        data_selected_text_format = "count &gt; 0",
                        multiple = "multiple" })
  </code></pre>
  
  <p>The viewmodel is not <em>null</em> anymore but on the other hand, the selected values are not coming through. If I select one or more items from the MultiSelect, the SelectedXXX list has always 1 item with no value.</p>
  
  <p>Does anyone have any idea what is the correct way to reconstruct the ViewModel from a jQuery AJAX call to the Controller method? I am kind of list because there are several ways and combinations to achieve this.</p>