title: Pass complex objects using ajax MVC
body: <p>I have a view with multiple sections. i would like to update sections individually using partial views and ajax.</p>
  
  <p>I have this so far:</p>
  
  <p>Controller:</p>
  
  <pre><code>[HttpPost]
  public PartialViewResult userdetailssettings(UserDetails model)
  { .... }
  </code></pre>
  
  <p>View Html:</p>
  
  <pre><code>&lt;div id="userDetailsPartial"&gt;
      @Html.Partial("_user_details", Model.userdetails)         
  &lt;/div&gt;
  </code></pre>
  
  <p>Partial Html: </p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;div class="col-md-12"&gt;
          @Html.TextBoxFor(x =&gt; x.Forename, new { @class = "form-control", placeholder = "Enter your forename" })
          @Html.ValidationMessageFor(x =&gt; x.Forename)
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
      &lt;div class="col-md-12"&gt;
          @Html.TextBoxFor(x =&gt; x.Surname, new { @class = "form-control", placeholder = "Enter your surname" })
          @Html.ValidationMessageFor(x =&gt; x.Surname)
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript on View:</p>
  
  <pre><code>var detailsUrl = "@Url.Action("userdetailssettings", "UserLogin")";
  var detailsmodel = JSON.stringify(@Html.Raw(Json.Encode(@Model.userdetails)));
  
  $(document).on('click touchstart', '#saveDetails', function () {      
          $.ajax({
              type: "POST",
              dataType: 'json',
              data: detailsmodel,
              url: detailsUrl,
              contentType: "application/json"
          }).done(function (res) {
              $("#userDetailsPartial").html(res);
              addresssearch();
          });
      });
  </code></pre>
  
  <p>The model is being passed to the controller by the ajax, however the values are not that of the inputs. They are the original values passed from the controller to open the view. </p>
  
  <p>I have tried wrapping the partial in  tags and also tried adding form tags inside the partial. </p>
  
  <p>I have also tried putting this code:</p>
  
  <pre><code>var detailsUrl = "@Url.Action("userdetailssettings", "UserLogin")";
  var detailsmodel = JSON.stringify(@Html.Raw(Json.Encode(@Model.userdetails)));
  </code></pre>
  
  <p>Inside the click function.</p>
  
  <p>Nothing I do passes the updated values from the inputs. </p>
  
  <p>I have thought of creating a new instance of the model from the inputs in the javascript i.e. </p>
  
  <pre><code>var detailsmodel = [ { Forename: $('#Forename').val(), Surname: $('#Surname').val() } ];
  </code></pre>
  
  <p>But if I am just creating json why can I not just convert the bound model to json.</p>