title: How to send one model with several classes in Ajax to update a database
body: <p>I have this issue that I'm sure more experienced folks probably know how to resolve.</p>
  
  <p>I have a class called CustomerProject. Inside this class, there are two other classes containing respective properties for each. One is Customer; the other is Project.</p>
  
  <p>See code.</p>
  
  <pre><code>using System;
  using System.ComponentModel.DataAnnotations;
  using System.Runtime.Serialization;
  
  namespace YeagerTechDB.ViewModels.Customers
  {
      [Serializable, DataContract(IsReference = true)]
      public class CustomerProjectDTO
      {
          public class Customer
          {
  
              [ScaffoldColumn(true)]
              [Display(Name = "ID")]
              [DataMember]
              public short CustomerID { get; set; }
  
              [Required]
              [StringLength(256)]
              [DataMember]
              public string UserName { get; set; }
  
              [Required]
              [StringLength(50)]
              [EmailAddress]
              [DataMember]
              public string Email { get; set; }
  
              [StringLength(50)]
              [DataMember]
              public string Company { get; set; }
  
              [StringLength(50)]
              [DataMember]
              public string FirstName { get; set; }
  
              [StringLength(50)]
              [DataMember]
              public string LastName { get; set; }
  
              [StringLength(50)]
              [DataMember]
              public string Address1 { get; set; }
  
              [StringLength(50)]
              [DataMember]
              public string Address2 { get; set; }
  
              [StringLength(50)]
              [DataMember]
              public string City { get; set; }
  
              [StringLength(2)]
              [DataMember]
              public string State { get; set; }
  
              [StringLength(10)]
              [DataType(DataType.PostalCode)]
              [RegularExpression(@"^\d{5}(-\d{4})?$", ErrorMessage = "Must match 99999 or 99999-9999 format")]
              [DataMember]
              public string Zip { get; set; }
  
              [StringLength(12)]
              [DataType(DataType.PhoneNumber)]
              [RegularExpression(@"^\s*([\(]?)\[?\s*\d{3}\s*\]?[\)]?\s*[\-]?[\.]?\s*\d{3}\s*[\-]?[\.]?\s*\d{4}$", ErrorMessage = "Must match 999-999-9999 format")]
              [DataMember]
              public string HomePhone { get; set; }
  
              [StringLength(12)]
              [DataType(DataType.PhoneNumber)]
              [RegularExpression(@"^\s*([\(]?)\[?\s*\d{3}\s*\]?[\)]?\s*[\-]?[\.]?\s*\d{3}\s*[\-]?[\.]?\s*\d{4}$", ErrorMessage = "Must match 999-999-9999 format")]
              [DataMember]
              public string CellPhone { get; set; }
  
              [StringLength(100)]
              [DataType(DataType.Url)]
              [DataMember]
              public string Website { get; set; }
  
              [StringLength(50)]
              [DataType(DataType.Url)]
              [DataMember]
              public string IMAddress { get; set; }
  
              [DataType(DataType.DateTime)]
              [Display(Name = "Created")]
              [DataMember]
              public DateTime CreatedDate { get; set; }
  
              [Display(Name = "Updated")]
              [DataType(DataType.DateTime)]
              [DataMember]
              public DateTime? UpdatedDate { get; set; }
          }
  
          public class Project
          {
  
              [ScaffoldColumn(false)]
              [Editable(false)]
              [Display(Name = "Proj ID")]
              [DataMember]
              public short ProjectID { get; set; }
  
              [ScaffoldColumn(false)]
              [Editable(true)]
              [Display(Name = "Cust ID")]
              [DataMember]
              public short CustomerID { get; set; }
  
              [Required(ErrorMessage = "Required!")]
              [StringLength(30)]
              [Display(Name = "Project Name")]
              [DataMember]
              public string Name { get; set; }
  
              [Required]
              [DataType(DataType.MultilineText)]
              [DataMember]
              public string Description { get; set; }
  
              [ScaffoldColumn(true)]
              [Display(Name = "Category")]
              [DataMember]
              public short CategoryID { get; set; }
  
              [ScaffoldColumn(true)]
              [Display(Name = "Priority")]
              [DataMember]
              public short PriorityID { get; set; }
  
              [ScaffoldColumn(true)]
              [Display(Name = "Status")]
              [DataMember]
              public short StatusID { get; set; }
  
              [DataType(DataType.Currency)]
              [DataMember]
              public decimal? Quote { get; set; }
  
              [DataType(DataType.MultilineText)]
              [DataMember]
              public string Notes { get; set; }
  
              [DataType(DataType.DateTime)]
              [Display(Name = "Created")]
              [DataMember]
              public DateTime CreatedDate { get; set; }
  
              [DataType(DataType.DateTime)]
              [Display(Name = "Updated")]
              [DataMember]
              public DateTime? UpdatedDate { get; set; }
          }
      }
  }
  </code></pre>
  
  <p>If I'm using Code Frist EF 6.1 approach and using the <strong>HTML.BeginForm</strong> methodology inside an MVC Controller, I have no problem sending the data into a Create method and saving the data for both classes with the above code.</p>
  
  <p>If I'm using an <strong>Ajax approach in JavaScript</strong>, I had to combine the properties of the two child classes into one class with unique property names. I also had stringify all of the properties while sending over the data. It updated just fine, but <strong>I was wondering if there is a similar way I can do it with the Ajax Javascript approach with using the child classes (as in the first approach)</strong> ( see one class and ajax code below).</p>
  
  <p>See code below.</p>
  
  <pre><code>using System;
  using System.ComponentModel.DataAnnotations;
  using System.Runtime.Serialization;
  
  namespace YeagerTechDB.ViewModels.Customers
  {
      [Serializable, DataContract(IsReference = true)]
      public class CustomerProjectDTO
      {
          //Customer
  
          [ScaffoldColumn(true)]
          [Display(Name = "ID")]
          [DataMember]
          public short customer_CustomerID { get; set; }
  
          [Required]
          [StringLength(256)]
          [DataMember]
          public string customer_UserName { get; set; }
  
          [Required]
          [StringLength(50)]
          [EmailAddress]
          [DataMember]
          public string customer_Email { get; set; }
  
          [StringLength(50)]
          [DataMember]
          public string customer_Company { get; set; }
  
          [StringLength(50)]
          [DataMember]
          public string customer_FirstName { get; set; }
  
          [StringLength(50)]
          [DataMember]
          public string customer_LastName { get; set; }
  
          [StringLength(50)]
          [DataMember]
          public string customer_Address1 { get; set; }
  
          [StringLength(50)]
          [DataMember]
          public string customer_Address2 { get; set; }
  
          [StringLength(50)]
          [DataMember]
          public string customer_City { get; set; }
  
          [StringLength(2)]
          [DataMember]
          public string customer_State { get; set; }
  
          [StringLength(10)]
          [DataType(DataType.PostalCode)]
          [RegularExpression(@"^\d{5}(-\d{4})?$", ErrorMessage = "Must match 99999 or 99999-9999 format")]
          [DataMember]
          public string customer_Zip { get; set; }
  
          [StringLength(12)]
          [DataType(DataType.PhoneNumber)]
          [RegularExpression(@"^\s*([\(]?)\[?\s*\d{3}\s*\]?[\)]?\s*[\-]?[\.]?\s*\d{3}\s*[\-]?[\.]?\s*\d{4}$", ErrorMessage = "Must match 999-999-9999 format")]
          [DataMember]
          public string customer_HomePhone { get; set; }
  
          [StringLength(12)]
          [DataType(DataType.PhoneNumber)]
          [RegularExpression(@"^\s*([\(]?)\[?\s*\d{3}\s*\]?[\)]?\s*[\-]?[\.]?\s*\d{3}\s*[\-]?[\.]?\s*\d{4}$", ErrorMessage = "Must match 999-999-9999 format")]
          [DataMember]
          public string customer_CellPhone { get; set; }
  
          [StringLength(100)]
          [DataType(DataType.Url)]
          [DataMember]
          public string customer_Website { get; set; }
  
          [StringLength(50)]
          [DataType(DataType.Url)]
          [DataMember]
          public string customer_IMAddress { get; set; }
  
          [DataType(DataType.DateTime)]
          [Display(Name = "Created")]
          [DataMember]
          public DateTime customer_CreatedDate { get; set; }
  
          [Display(Name = "Updated")]
          [DataType(DataType.DateTime)]
          [DataMember]
          public DateTime? customer_UpdatedDate { get; set; }
  
  
          //Project
  
          [ScaffoldColumn(false)]
          [Editable(false)]
          [Display(Name = "Proj ID")]
          [DataMember]
          public short project_ProjectID { get; set; }
  
          [ScaffoldColumn(false)]
          [Editable(true)]
          [Display(Name = "Cust ID")]
          [DataMember]
          public short project_CustomerID { get; set; }
  
          [Required(ErrorMessage = "Required!")]
          [StringLength(30)]
          [Display(Name = "Project Name")]
          [DataMember]
          public string project_Name { get; set; }
  
          [Required]
          [DataType(DataType.MultilineText)]
          [DataMember]
          public string project_Description { get; set; }
  
          [ScaffoldColumn(true)]
          [Display(Name = "Category")]
          [DataMember]
          public short project_CategoryID { get; set; }
  
          [ScaffoldColumn(true)]
          [Display(Name = "Priority")]
          [DataMember]
          public short project_PriorityID { get; set; }
  
          [ScaffoldColumn(true)]
          [Display(Name = "Status")]
          [DataMember]
          public short project_StatusID { get; set; }
  
          [DataType(DataType.Currency)]
          [DataMember]
          public decimal? project_Quote { get; set; }
  
          [DataType(DataType.MultilineText)]
          [DataMember]
          public string project_Notes { get; set; }
  
          [DataType(DataType.DateTime)]
          [Display(Name = "Created")]
          [DataMember]
          public DateTime project_CreatedDate { get; set; }
  
          [DataType(DataType.DateTime)]
          [Display(Name = "Updated")]
          [DataMember]
          public DateTime? project_UpdatedDate { get; set; }
  
      }
  }
  
  function createCustomerProject()
  {
      var currdate = new Date();
      var currdate = (currdate.getMonth() + 1) + '/' + currdate.getDate() + '/' + currdate.getFullYear() + ' ' + currdate.getHours() + ':' + currdate.getMinutes() + ':' + currdate.getSeconds();
  
      var customerProject_Input = {
          customer_UserName: $('#customer_UserName').val(),
          customer_Email: $('#customer_Email').val(),
          customer_Company: $('#customer_Company').val(),
          customer_FirstName: $('#customer_FirstName').val(),
          customer_LastName: $('#customer_LastName').val(),
          customer_Address1: $('#customer_Address1').val(),
          customer_Address2: $('#customer_Address2').val(),
          customer_City: $('#customer_City').val(),
          customer_State: $('#customer_State').val(),
          customer_Zip: $('#customer_Zip').val(),
          customer_HomePhone: $('#customer_HomePhone').val(),
          customer_CellPhone: $('#customer_CellPhone').val(),
          customer_Website: $('#customer_Website').val(),
          customer_IMAddress: $('#customer_IMAddress').val(),
          customer_CreatedDate: currdate,
          customer_UpdatedDate: null,
          project_Name: $('#project_Name').val(),
          project_Description: $('#project_Description').val(),
          project_CategoryID: $('#project_CategoryID').val(),
          project_PriorityID: $('#project_PriorityID').val(),
          project_StatusID: $('#project_StatusID').val(),
          project_Quote: $('#project_Quote').val(),
          project_Notes: $('#project_Notes').val(),
          project_CreatedDate: currdate,
          project_UpdatedDate: null
      };
  
      var Url = $("#customerprojectCreateUrl").val();
  
      $.ajax({
          url: Url,
          //data: AddAntiCSRFToken(JSON.stringify(customerProject_Input)),
          data: JSON.stringify(customerProject_Input),
          dataType: "html",
          type: "POST",
          contentType: "application/json; charset=utf-8",
          async: true,
  </code></pre>
  
  <h2>EDIT</h2>
  
  <pre><code>New model:
  using System;
  using System.Runtime.Serialization;
  using YeagerTechDB.Models;
  
  namespace YeagerTechDB.ViewModels.Customers
  {
      [Serializable, DataContract(IsReference = true)]
      public class CustomerProjectDTO
      {
          public Customer customer { get; set; }
  
          public Project project { get; set; }
  
      }
  }
  </code></pre>
  
  <p>Screenshot of JS data:
  <img src="https://i.stack.imgur.com/3Kjvu.png" alt="enter image description here"></p>
  
  <p>Screenshot of controller data right after call to JS:
  <img src="https://i.stack.imgur.com/NOeGR.png" alt="enter image description here"></p>
  
  <p>Stephen, the data in the Controller right after the JS is null. I'm obviously doing something wrong the way I'm serializing it in the JS. </p>
  
  <p>I'm using the full Ajax methodology.</p>
  
  <p>Please take the screen shots of mine and view in your favorite image viewer and look at my JS. What am I doing wrong in there not being able to pass the data to my controller correctly?</p>
  
  <p>Thanks so much for your insight...</p>
  
  <h2>EDIT #3</h2>
  
  <p>Stephen, I've included the entire View for the Create....</p>
  
  <pre><code>@model YeagerTechDB.ViewModels.Customers.CustomerProject
  
  
  @{
      ViewBag.Title = "Create Customer &amp; Project";
      Layout = "~/Views/Shared/_Layout.cshtml";
  }
  
  &lt;h2&gt;Create&lt;/h2&gt;
  
  &lt;div class="body-content"&gt;
      &lt;h4&gt;Customer/Project&lt;/h4&gt;
      &lt;hr /&gt;
      @Html.ValidationSummary(true, "", new { @class = "text-danger" })
      &lt;fieldset&gt;
          &lt;legend&gt;Customer&lt;/legend&gt;
          &lt;div class="form-group"&gt;
              &lt;div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-11 col-md-11 col-sm-11 col-xs-11"&gt;
                  @Html.EditorFor(model =&gt; model.customer.UserName, new { htmlAttributes = new { @class = "form-control", @placeholder = "UserName" } })
                  @Html.ValidationMessageFor(model =&gt; model.customer.UserName, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-11 col-md-11 col-sm-11 col-xs-11"&gt;
                  @Html.EditorFor(model =&gt; model.customer.Email, new { htmlAttributes = new { @class = "form-control", @placeholder = "Email" } })
                  @Html.ValidationMessageFor(model =&gt; model.customer.Email, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-11 col-md-11 col-sm-11 col-xs-11"&gt;
                  @Html.EditorFor(model =&gt; model.customer.Company, new { htmlAttributes = new { @class = "form-control", @placeholder = "Company" } })
                  @Html.ValidationMessageFor(model =&gt; model.customer.Company, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-5 col-md-5 col-sm-5 col-xs-5"&gt;
                  @Html.EditorFor(model =&gt; model.customer.FirstName, new { htmlAttributes = new { @class = "form-control", @placeholder = "First Name" } })
                  @Html.ValidationMessageFor(model =&gt; model.customer.FirstName, "", new { @class = "text-danger" })
              &lt;/div&gt;
              &lt;div class="col-lg-5 col-md-5 col-sm-5 col-xs-5"&gt;
                  @Html.EditorFor(model =&gt; model.customer.LastName, new { htmlAttributes = new { @class = "form-control", @placeholder = "Last Name" } })
                  @Html.ValidationMessageFor(model =&gt; model.customer.LastName, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-11 col-md-11 col-sm-11 col-xs-11"&gt;
                  @Html.EditorFor(model =&gt; model.customer.Address1, new { htmlAttributes = new { @class = "form-control", @placeholder = "Address1" } })
                  @Html.ValidationMessageFor(model =&gt; model.customer.Address1, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-11 col-md-11 col-sm-11 col-xs-11"&gt;
                  @Html.EditorFor(model =&gt; model.customer.Address2, new { htmlAttributes = new { @class = "form-control", @placeholder = "Address2" } })
                  @Html.ValidationMessageFor(model =&gt; model.customer.Address2, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-6 col-md-6 col-sm-6 col-xs-6"&gt;
                  @Html.EditorFor(model =&gt; model.customer.City, new { htmlAttributes = new { @class = "form-control", @placeholder = "City" } })
                  @Html.ValidationMessageFor(model =&gt; model.customer.City, "", new { @class = "text-danger" })
              &lt;/div&gt;
              &lt;div class="col-md-3 col-sm-3 col-xs-3"&gt;
                  @Html.EditorFor(model =&gt; model.customer.State, new { htmlAttributes = new { @class = "form-control", @placeholder = "State" } })
                  @Html.ValidationMessageFor(model =&gt; model.customer.State, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-3 col-md-3 col-sm-3 col-xs-3"&gt;
                  @Html.EditorFor(model =&gt; model.customer.Zip, new { htmlAttributes = new { @class = "form-control", @placeholder = "Zip" } })
                  @Html.ValidationMessageFor(model =&gt; model.customer.Zip, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-5 col-md-5 col-sm-5 col-xs-5"&gt;
                  @Html.EditorFor(model =&gt; model.customer.HomePhone, new { htmlAttributes = new { @class = "form-control", @placeholder = "Home Phone" } })
                  @Html.ValidationMessageFor(model =&gt; model.customer.HomePhone, "", new { @class = "text-danger" })
              &lt;/div&gt;
              &lt;div class="col-lg-5 col-md-5 col-sm-5 col-xs-5"&gt;
                  @Html.EditorFor(model =&gt; model.customer.CellPhone, new { htmlAttributes = new { @class = "form-control", @placeholder = "Cell Phone" } })
                  @Html.ValidationMessageFor(model =&gt; model.customer.CellPhone, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-5 col-md-5 col-sm-5 col-xs-5"&gt;
                  @Html.EditorFor(model =&gt; model.customer.Website, new { htmlAttributes = new { @class = "form-control", @placeholder = "Website" } })
                  @Html.ValidationMessageFor(model =&gt; model.customer.Website, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-5 col-md-5 col-sm-5 col-xs-5"&gt;
                  @Html.EditorFor(model =&gt; model.customer.IMAddress, new { htmlAttributes = new { @class = "form-control", @placeholder = "IM Address" } })
                  @Html.ValidationMessageFor(model =&gt; model.customer.IMAddress, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/fieldset&gt;
  
      &lt;fieldset&gt;
          &lt;legend&gt;Project&lt;/legend&gt;
          &lt;div class="form-group"&gt;
              &lt;div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-6 col-md-6 col-sm-6 col-xs-6"&gt;
                  @Html.EditorFor(model =&gt; model.project.Name, new { htmlAttributes = new { @class = "form-control", @placeholder = "ProjectName" } })
                  @Html.ValidationMessageFor(model =&gt; model.project.Name, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-10 col-md-10 col-sm-10 col-xs-10"&gt;
                  @Html.EditorFor(model =&gt; model.project.Description, new { htmlAttributes = new { @class = "form-control", @placeholder = "Description" } })
                  @Html.ValidationMessageFor(model =&gt; model.project.Description, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-8 col-md-8 col-sm-8 col-xs-8"&gt;
                  @Html.DropDownListFor(model =&gt; model.project.CategoryID, new SelectList(ViewBag.Categories, "CategoryID", "CategoryDescription"), "-- Select Category --", new { @class = "form-control" })
                  @Html.ValidationMessageFor(model =&gt; model.project.CategoryID, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-8 col-md-8 col-sm-8 col-xs-8"&gt;
                  @Html.DropDownListFor(model =&gt; model.project.PriorityID, new SelectList(ViewBag.Priorities, "PriorityID", "PriorityDescription"), "-- Select Priority --", new { @class = "form-control" })
                  @Html.ValidationMessageFor(model =&gt; model.project.PriorityID, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-8 col-md-8 col-sm-8 col-xs-8"&gt;
                  @Html.DropDownListFor(model =&gt; model.project.StatusID, new SelectList(ViewBag.Statuses, "StatusID", "StatusDescription"), "-- Select Status --", new { @class = "form-control" })
                  @Html.ValidationMessageFor(model =&gt; model.project.StatusID, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-10 col-md-10 col-sm-10 col-xs-10"&gt;
                  @Html.EditorFor(model =&gt; model.project.Quote, new { htmlAttributes = new { @class = "form-control", @placeholder = "Quote" } })
                  @Html.ValidationMessageFor(model =&gt; model.project.Quote, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-10 col-md-10 col-sm-10 col-xs-10"&gt;
                  @Html.EditorFor(model =&gt; model.project.Notes, new { htmlAttributes = new { @class = "form-control", @placeholder = "Notes" } })
                  @Html.ValidationMessageFor(model =&gt; model.project.Notes, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/fieldset&gt;
      &lt;div class="form-group"&gt;
          &lt;div&gt;
              &lt;button type="submit" id="btnCustomerProjectCreate" class="btn btn-primary col-offset-2"&gt;&lt;span class="glyphicon glyphicon-save"&gt;&lt;/span&gt;Create&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
      @Html.ActionLink("Back to List", "Index")
      @Html.Hidden("customerprojectCreateUrl", Url.Action("Create", "CustomerProjects", new { area = "Customers" }))
  &lt;/div&gt;
  
  @section Scripts {
      &lt;script&gt;
          $(document).ready(function ()
          {
              if (typeof contentCreateCustomerProject == "function")
                  contentCreateCustomerProject();
          });
      &lt;/script&gt;
  }
  </code></pre>
  
  <h2>EDIT 4</h2>
  
  <p>Model:</p>
  
  <pre><code>using System;
  using System.Runtime.Serialization;
  using YeagerTechDB.Models;
  
  namespace YeagerTechDB.ViewModels.Customers
  {
      [Serializable, DataContract(IsReference = true)]
      public class CustomerProjectDTO
      {
          public Customer customer { get; set; }
  
          public Project project { get; set; }
  
      }
  }
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code> [HttpPost]
   //[ValidateAntiForgeryToken]
   public async Task&lt;ActionResult&gt; Create(CustomerProjectDTO customerProject)
  {
    if (ModelState.IsValid)
    {
      await db.AddCustomerProjectAsync(customerProject);
    }
    return View(customerProject);
  }
  </code></pre>
  
  <h2>JS</h2>
  
  <pre><code>var customerProject_Input = $('#form1').serialize();
  var Url = $("#customerprojectCreateUrl").val();
  
  $.ajax({
    url: Url,
    //data: AddAntiCSRFToken(JSON.stringify(customerProject_Input)),
    data: JSON.stringify(customerProject_Input),
    dataType: "html",
    type: "POST",
    contentType: "application/json; charset=utf-8",
    async: true,
  </code></pre>
  
  <h2>VIEW</h2>
  
  <pre><code>@model YeagerTechDB.ViewModels.Customers.CustomerProjectDTO
  @{
    ViewBag.Title = "Create Customer &amp; Project";
    Layout = "~/Views/Shared/_Layout.cshtml";
  }
  
  &lt;h2&gt;Create&lt;/h2&gt;
  &lt;div class="body-content"&gt;
    &lt;h4&gt;Customer/Project&lt;/h4&gt;
    &lt;hr /&gt;
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    &lt;fieldset&gt;
      &lt;legend&gt;Customer&lt;/legend&gt;
      &lt;div class="form-group"&gt;
        &lt;div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-11 col-md-11 col-sm-11 col-xs-11"&gt;
          @Html.EditorFor(model =&gt; model.customer.UserName, new { htmlAttributes = new { @class = "form-control", @placeholder = "UserName" } })
          @Html.ValidationMessageFor(model =&gt; model.customer.UserName, "", new { @class = "text-danger" })
        &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>