Pass Json data object from view containing partial view in MVC4 - ajax

Question

I am creating an MVC4 Form for person.
I have these Partial Views containing Information about Contact Info and Postal Address.
ContactInfo.cshtml
#model Demo.Models.ContactInfo
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<link rel="stylesheet" href="~/Content/plugins/validationengine/css/validationEngine.jquery.css" />
<h2>ContactInfo</h2>
<div class="form-group">
<label class="control-label col-lg-4">PhoneNumber</label>
<div class="col-lg-4">
#Html.EditorFor(model => model.PhoneNumber)
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">CellNumber</label>
<div class="col-lg-4">
#Html.EditorFor(model => model.CellNumber)
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">Email</label>
<div class="col-lg-4">
#Html.EditorFor(model => model.Email)
</div>
</div>
PostalAddress.cshtml
#model Demo.Models.PostalAddress
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<link rel="stylesheet" href="~/Content/plugins/validationengine/css/validationEngine.jquery.css" />
<h2>PostalAddress</h2>
<div class="form-group">
<label class="control-label col-lg-4">CountryID</label>
<div class="col-lg-4">
#Html.EditorFor(model => model.CountryID)
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">CityID</label>
<div class="col-lg-4">
#Html.EditorFor(model => model.CityID)
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">ProvinceID</label>
<div class="col-lg-4">
#Html.EditorFor(model => model.ProvinceID)
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">ZipCode</label>
<div class="col-lg-4">
#Html.EditorFor(model => model.ZipCode)
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">StreetAddress</label>
<div class="col-lg-4">
#Html.EditorFor(model => model.StreetAddress)
</div>
</div>
Here are the Model classes for Person,Postal Address and Contact Info.
ContactInfo.cs
using System;
using System.Collections.Generic;
namespace Demo.Models
{
public partial class ContactInfo
{
public ContactInfo()
{
this.Branches = new List<Branch>();
this.People = new List<Person>();
}
public long ID { get; set; }
public Nullable<int> PhoneNumber { get; set; }
public Nullable<int> CellNumber { get; set; }
public string Email { get; set; }
public virtual ICollection<Branch> Branches { get; set; }
public virtual ICollection<Person> People { get; set; }
}
}
Here is the Person.cs
using System;
using System.Collections.Generic;
namespace Demo.Models
{
public partial class Person
{
public Person()
{
this.Branches = new List<Branch>();
this.Documents = new List<Document>();
this.Faculties = new List<Faculty>();
this.Institutes = new List<Institute>();
this.Parents = new List<Parent>();
this.Students = new List<Student>();
this.StudentParents = new List<StudentParent>();
this.StudentParents1 = new List<StudentParent>();
}
public long ID { get; set; }
public string Name { get; set; }
public Nullable<bool> Gender { get; set; }
public Nullable<System.DateTime> DOB { get; set; }
public string Photo { get; set; }
public Nullable<long> ContactID { get; set; }
public Nullable<byte> PersonTypeID { get; set; }
public Nullable<long> PostalAddressID { get; set; }
public Nullable<byte> ReligionID { get; set; }
public virtual ICollection<Branch> Branches { get; set; }
public virtual ContactInfo ContactInfo { get; set; }
public virtual ICollection<Document> Documents { get; set; }
public virtual ICollection<Faculty> Faculties { get; set; }
public virtual ICollection<Institute> Institutes { get; set; }
public virtual ICollection<Parent> Parents { get; set; }
public virtual PersonType PersonType { get; set; }
public virtual PostalAddress PostalAddress { get; set; }
public virtual Religion Religion { get; set; }
public virtual ICollection<Student> Students { get; set; }
public virtual ICollection<StudentParent> StudentParents { get; set; }
public virtual ICollection<StudentParent> StudentParents1 { get; set; }
}
}
PostalAddress.cs
using System;
using System.Collections.Generic;
namespace Demo.Models
{
public partial class PostalAddress
{
public PostalAddress()
{
this.Branches = new List<Branch>();
this.Papers = new List<Paper>();
this.People = new List<Person>();
}
public long ID { get; set; }
public Nullable<byte> CountryID { get; set; }
public Nullable<int> CityID { get; set; }
public Nullable<int> ProvinceID { get; set; }
public string ZipCode { get; set; }
public string StreetAddress { get; set; }
public virtual ICollection<Branch> Branches { get; set; }
public virtual city city { get; set; }
public virtual country country { get; set; }
public virtual ICollection<Paper> Papers { get; set; }
public virtual ICollection<Person> People { get; set; }
public virtual province province { get; set; }
}
}
Here is the Main Person.cshtml
I am rendering the upper partial views in it and sending the json object data back.
#model Demo.Models.Person
#{
ViewBag.Title = "Person";
}
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<legend>Person</legend>
<div class="form-group">
<label class="control-label col-lg-4">Name</label>
<div class="col-lg-4">
#Html.EditorFor(model => model.Name)
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">Gender</label>
<div class="col-lg-4">
#Html.EditorFor(model => model.Gender)
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">DOB</label>
<div class="col-lg-4">
#Html.EditorFor(model => model.DOB)
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">Photo</label>
<div class="col-lg-4">
#Html.EditorFor(model => model.Photo)
</div>
</div>
#Html.Partial("ContactInfo", new Demo.Models.ContactInfo())
<div class="form-group">
<label class="control-label col-lg-4">PersonTypeID</label>
<div class="col-lg-4">
#Html.DropDownList("PersonTypeID", String.Empty)
</div>
</div>
#Html.Partial("PostalAddress", new Demo.Models.PostalAddress())
<div class="form-group">
<label class="control-label col-lg-4">ReligionID</label>
<div class="col-lg-4">
#Html.DropDownList("ReligionID", String.Empty)
</div>
</div>
<p>
<input id="submit" class="submit" type="submit" value="Create" />
</p>
}
<script>
$('#submit').click(function (e) {
e.preventDefault();
//alert('hello');
var person = {
Name: $('#Name').val(),
Gender: $('#Gender').val(),
DOB: $('#DOB').val(),
Photo: $('#Photo').val(),
PersonTypeID: $('PersonTypeID').val(),
ContactInfo: {
PhoneNumber: $('#PhoneNumber').val(),
CellNumber: $('#CellNumber').val(),
Email: $('#Email').val()
},
PostalAddress: {
CountryID: $('#CountryID').val(),
CityID: $('#CityID').val(),
ProvinceID: $('#ProvinceID').val(),
ZipCode: $('#ZipCode').val(),
StreetAddress: $('#StreetAddress').val(),
},
};
var data = { jsonperson: person };
//console.log(data);
$.ajax({
url: '/Person/Create',
type: "post",
data: JSON.stringify(data),
success: function () {
$('#message').html('person added').fadeIn();
},
error: function () {
$('#message').html('person added').fadeIn();
}
});
But when i send the data from form to controller The data containing postal address and Contact info is Null.
Here is the Person Controller
[HttpPost]
public JsonResult Create(Person jsonperson)
{
if (ModelState.IsValid)
{
db.People.Add(jsonperson);
db.SaveChanges();
// return RedirectToAction("Index");
}
ViewBag.ContactID = new SelectList(db.ContactInfoes, "ID", "Email", jsonperson.ContactID);
ViewBag.PersonTypeID = new SelectList(db.PersonTypes, "ID", "Name", jsonperson.PersonTypeID);
ViewBag.PostalAddressID = new SelectList(db.PostalAddresses, "ID", "ZipCode", jsonperson.PostalAddressID);
ViewBag.ReligionID = new SelectList(db.Religions, "ID", "Name", jsonperson.ReligionID);
// return View(jsonperson);
JsonResult jr = new JsonResult();
jr.Data = true;
return jr;
}
Data is coming to the controller but Contact Info details and Postal Address is null. It is driving me crazy .
Thanks in advance.

Answer 1

the serialized JSON data that is being passed to your controller after you submit the form, does not have any property such as ContactId or PersonTypeID etc
your controller will receive PhoneNumber, CellNumber, Email, CountryID, CityID, ProvinceID, ZipCode, StreetAddress
therefore your model Person should have the above properties as it is named in your partial view models so they can be read accordingly into your Person model.