title: MVC Model Binding Not Working via AJAX request
body: <p>Having a little trouble with MVC model binding via AJAX.</p>
  
  <p>Can someone tell me why the CreateTransfereeDetails property is not binding, it always comes back as 'null'. </p>
  
  <p>Model:</p>
  
  <pre><code>public class ResolveProfileSelectionRequiredModel
  {
      public CreateTransfereeModel CreateTransfereeDetails { get; set; }
  
      public bool NewTransfereeSelected { get; set; }
  }
  
  public class CreateTransfereeModel
  {
      [Display(Name = "Transferee Name:")]
      public string TransfereeName { get; set; }
  }
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>&lt;input type="text" id="TransfereeName" /&gt;
  &lt;input type="hidden" id="NewTrasnfereeSelected" /&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>var createTransfereeDetails =
  {
      "TransfereeName": $("#TransfereeName").val()
  };
  
  $.ajax({
      url: "/myurl",
      dataType: "json",
      traditional: true,
      type: "POST",
      data: {
          CreateTransfereeDetails: createTransfereeDetails,
          NewTransfereeSelected: $("#NewTransfereeSelected").val()
      },
      success: function (result) {
          //
      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
          //
      },
      complete: function () {
          //
      }
  });
  </code></pre>
  
  <p>Thanks!</p>