title: Serialize form data for Web Api put request MVC 5
body: <p>I have a strongly-typed Razor View that shows a record for a class.  This view displays a form that the user can use to update the record (a dropdown, a few checkboxes, and a few textboxes).  When the user modifies a field by changing the value of a control, an ajax call is immediately sent to the Web API to update that field.  The following Ajax call works fine:</p>
  
  <pre><code>$(document).ready(function () {
      $(this).on("change", function (e) {
          var editRecordURL = $("#editRecordURL").val();
          var key = $("#AccessVM_Id").val();
          var mode = $("#AccessVM_AccessMode").val();
          var failLim = $("#AccessVM_LoginFailLimit").val();
          var cap = $("#AccessVM_PwdWCap").is(':checked');
          ...
          var rec = {
              Id: key,
              AccessMode: mode,
              LoginFailLimit: failLim,
              PwdWCap: cap,
              ....
          };
  
          $.ajax({
              type: "PUT",
              url: editRecordURL,
              data: JSON.stringify(rec),
              contentType: 'application/json; charset=utf-8',
              success: function (msg) {
                  bootbox.alert("Success: Record updated successfully!");
              },
              error: function (XMLHttpRequest, textStatus, errorThrown) {
                  bootbox.alert("Error: " + errorThrown);
              }
          });
      });
  });
  </code></pre>
  
  <p>However, I would like to make this function more generic so it can be reused for other forms (especially those with more data to update).  Ideally the rec object would be populated like this: </p>
  
  <pre><code>var rec = $("#form").serializeArray();
  </code></pre>
  
  <p>Unfortunately this does not work because after applying <code>JSON.stringify()</code> on <code>rec</code> it does not return the expected JSON string. Instead it sends a series of name/value pairs like this:</p>
  
  <pre><code>[{"name":"__RequestVerificationToken","value":"qVedWHJ6HIrqtLJpTxp4m5D2ehZ_AdjCOvQtz4Jyzlg0cdocsWqcTCiE2jzIEB7UsJPwuSZeZF7y1GsluHNrNCDV1wrHjU1UJO5vMMGTLB41"},{"name":"AccessVM.Id","value":"1"},{"name":"AccessVM.AccessMode","value":"1"},{"name":"AccessVM.LoginFailLimit","value":"10"},{"name":"AccessVM.PwdWCap","value":"true"},{"name":"AccessVM.PwdWCap","value":"false"},{"name":"AccessVM.PwdWNum","value":"true"},{"name":"AccessVM.PwdWNum","value":"false"},{"name":"AccessVM.PwdWSC","value":"true"},{"name":"AccessVM.PwdWSC","value":"false"},{"name":"AccessVM.PwdMinLen","value":"6"},{"name":"AccessVM.PwdMaxLen","value":"25"},{"name":"AccessVM.PwdChange","value":"90"},{"name":"AccessVM.PwdPrevUsedLimit","value":"10"}]
  </code></pre>
  
  <p>So how do I fix this so the string looks like: </p>
  
  <pre><code>[{"AccessVM.Id": 1, "AccessVM.AccessMode": 1, "AccessVM.LoginFailLimit": 10, "AccessVM.PwdWCap": true, "AccessVM.PwdWNum": true, "AccessVM.PwdWSC": false, "AccessVM.PwdMinLen": 6, "AccessVM.PwdMaxLen": 25, "AccessVM.PwdChange": 90, "AccessVM.PwdPrevUsedLimit": 10}]
  </code></pre>
  
  <p>Web API Controller:</p>
  
  <pre><code>public class PoliciesController : ApiController
  {
      ....
      // PUT: api/policies/1
      [ResponseType(typeof(void))]
      public IHttpActionResult PutPolicy(int id, AccessItemViewModel polDto)
      {
          ....
      }
      ....
  }
  </code></pre>
  
  <p>View Models</p>
  
  <pre><code>public class PolicyViewModel
  {
      public AccessItemViewModel AccessVM { get; set; }
      ....
  }
  
  public class AccessItemViewModel
  {
      public int Id { get; set; }
      public int AccessMode { get; set; }  
      public int LoginFailLimit { get; set; } 
      public bool PwdWCap { get; set; }   
      ....
  }
  </code></pre>
  
  <p>Razor View:</p>
  
  <pre><code>@model App.Web.ViewModels.PolicyViewModel
  ....
  @using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
  {
      @Html.AntiForgeryToken()
      @Html.ValidationSummary("", new { @class = "text-danger" })
      &lt;input type="hidden" id="editRecordURL" value="@Model.ExtraVM.EditRecordUrl" /&gt;
      @Html.LabelFor(m =&gt; m.AccessVM.AccessMode, new { @class = "col-xs-5" })
      @Html.HiddenFor(m =&gt; m.AccessVM.Id)
      @Html.DropDownListFor(m =&gt; m.AccessVM.AccessMode, new SelectList(Model.AccessModes, "Mode", "Description"), null, new { @class = "input-sm col-xs-7" })
      @Html.LabelFor(m =&gt; m.AccessVM.LoginFailLimit, new { @class = "col-xs-9" })
      @Html.DropDownListFor(m =&gt; m.AccessVM.LoginFailLimit, new SelectList(Model.LoginLimits, "LoginFailLimit", "Value"), null, new { @class = "input-sm col-xs-3" })
      @Html.LabelFor(m =&gt; m.AccessVM.PwdWCap, new { @class = "col-xs-11" })
      @Html.CheckBoxFor(m =&gt; m.AccessVM.PwdWCap, new { @class = "input-xs col-xs-1" })
      ....
  }
  </code></pre>