Controller Parameters Empty Sending ViewModel JSON via AJAX

Question

Im trying to send PropertyDetails ViewModel to controller function SaveDetails .

I currently serialize the Model using Newtonsoft.JsonConvert , which then I use JSON.Stringify to convert to a JSONString which then AJAX uses to send the data to the Controller but when I place a breakpoint on the controller function SaveDetails the object is empty(not null) however the objects inside the ViewModel are null.

 var json = @Html.Raw(@JsonConvert.SerializeObject(@Model));
 console.log(JSON.stringify(json));

    $.ajax({
        url: "@Url.Action("SaveDetails")",
        type: "POST",
        data: JSON.stringify(json),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        error: function (response) {
        },
        success: function (response) {
            alert(response);
        }
    });

Controller Function SaveDetails

[HttpPost]
public ActionResult SaveDetails(PropertyDetailsViewModel PropertyDetail)
    {
        if(PropertyDetail != null)
        {

           return Json("Success");

        }
        return Json("Failed");

    }

CONSOLE.LOG of the JSON.Stringfy(@Model) used JSONLint to check if it was valid JSON and it is.

 { "PropertyID": 2, "PropertyDetail": { "AccessInformation": "", "AddressLine1": "", "AddressLine2": "", "AddressLine3": "", "AddressLine4": "", "AddressLine5": "", "BranchID": 1, "BuildingType": "", "CurrentValue": 0, "Description": "", "Garages": 0, "HouseAlarm": false, "LandlordID": "", "LastUpdatedTime": "2016-11-20T13:48:59.693", "LastUpdatedUser": "mimtiaz", "Latitude": 0, "LeaseEnd": null, "LeaseNotes": " ", "LeaseStart": null, "Longtitude": 0, "MarketingDescription": "", "NickName": "", "Notes": "", "ParentID": 0, "ParkingSpaces": 0, "Postcode": "", "PurchaseDate": null, "PurchaseNotes": " ", "PurchasePrice": 0, "PurchaseType": " ", "SaleDate": null, "SaleNotes": " ", "SalePrice": 0, "size": "", "SmokeAlarms": 0, "Status": "Active", "TemplateType": "1", "ValuationDate": null, "ValuationNotes": " ", "YearBuilt": 1900 }, "PropertyImages": [{ "DateAdded": "2016-10-01T00:00:00", "Description": "", "Filename": "1872_MVR103597_IMG_09_0000_max_476x317.JPG", "ID": 1, "InventoryID": 0, "PropertyID": 2, "RoomID": 0, "Sequence": 1, "TenancyID": 0, "Title": "1872_MVR103597_IMG_09_0000_max_476x317.JPG", "Type": "P" }, { "DateAdded": "2016-10-01T00:00:00", "Description": "", "Filename": "5384_26648557_IMG_26_0000_max_476x317.jpg", "ID": 2, "InventoryID": 0, "PropertyID": 2, "RoomID": 0, "Sequence": 2, "TenancyID": 0, "Title": "5384_26648557_IMG_26_0000_max_476x317.jpg", "Type": "P" }, { "DateAdded": "2016-10-01T00:00:00", "Description": "", "Filename": "39050_6028636_IMG_19_0000_max_476x317.jpg", "ID": 3, "InventoryID": 0, "PropertyID": 2, "RoomID": 0, "Sequence": 3, "TenancyID": 0, "Title": "39050_6028636_IMG_19_0000_max_476x317.jpg", "Type": "P" }], "InventoryList": [], "PropertyPath": "/Insight/Property 2", "SideNavigationViewModel": { "DynamicEntities": [{ "ID": 1, "EntityType": "O", "EntityLabel": "Solicitor", "Parent": "Other", "MultiplePerCase": true, "DynamicOrgID": 1, "OrgFKID": 2, "OrgID": "GARNER 003", "OrgContactID": "PARTIND001", "OrgRef": "", "DynamicPersonID": 0, "PersonFKID": 0, "ThirdPartyID": "", "PersonRef": "", "SectionHeaderID": 0, "EntityName": "Solicitor", "AccessLevel": "", "LetterFolder": "" }, { "ID": 2, "EntityType": "O", "EntityLabel": "Insurance", "Parent": "Other", "MultiplePerCase": false, "DynamicOrgID": 0, "OrgFKID": 0, "OrgID": "", "OrgContactID": "", "OrgRef": "", "DynamicPersonID": 0, "PersonFKID": 0, "ThirdPartyID": "", "PersonRef": "", "SectionHeaderID": 0, "EntityName": "Insurance", "AccessLevel": "", "LetterFolder": "" }, { "ID": 3, "EntityType": "O", "EntityLabel": "Gas", "Parent": "Other", "MultiplePerCase": false, "DynamicOrgID": 0, "OrgFKID": 0, "OrgID": "", "OrgContactID": "", "OrgRef": "", "DynamicPersonID": 0, "PersonFKID": 0, "ThirdPartyID": "", "PersonRef": "", "SectionHeaderID": 0, "EntityName": "Gas", "AccessLevel": "", "LetterFolder": "" }, { "ID": 4, "EntityType": "O", "EntityLabel": "Electric", "Parent": "Other", "MultiplePerCase": false, "DynamicOrgID": 0, "OrgFKID": 0, "OrgID": "", "OrgContactID": "", "OrgRef": "", "DynamicPersonID": 0, "PersonFKID": 0, "ThirdPartyID": "", "PersonRef": "", "SectionHeaderID": 0, "EntityName": "Electric", "AccessLevel": "", "LetterFolder": "" }, { "ID": 5, "EntityType": "O", "EntityLabel": "Council", "Parent": "Other", "MultiplePerCase": false, "DynamicOrgID": 0, "OrgFKID": 0, "OrgID": "", "OrgContactID": "", "OrgRef": "", "DynamicPersonID": 0, "PersonFKID": 0, "ThirdPartyID": "", "PersonRef": "", "SectionHeaderID": 0, "EntityName": "Council", "AccessLevel": "", "LetterFolder": "" }, { "ID": 6, "EntityType": "O", "EntityLabel": "Water", "Parent": "Other", "MultiplePerCase": false, "DynamicOrgID": 0, "OrgFKID": 0, "OrgID": "", "OrgContactID": "", "OrgRef": "", "DynamicPersonID": 0, "PersonFKID": 0, "ThirdPartyID": "", "PersonRef": "", "SectionHeaderID": 0, "EntityName": "Water", "AccessLevel": "", "LetterFolder": "" }, { "ID": 7, "EntityType": "D", "EntityLabel": "Purchase & Sale Details", "Parent": "Property", "MultiplePerCase": false, "DynamicOrgID": 0, "OrgFKID": 0, "OrgID": "", "OrgContactID": "", "OrgRef": "", "DynamicPersonID": 0, "PersonFKID": 0, "ThirdPartyID": "", "PersonRef": "", "SectionHeaderID": 0, "EntityName": "PurchDets", "AccessLevel": "", "LetterFolder": "" }], "PropertyID": 2, "LandlordID": 0 } } 

PropertyDetailsViewModel

public class PropertyDetailsViewModel
{

    public int PropertyID { get; set; }
    public PropertyDetail PropertyDetail { get; set; }
    public PropertyImages PropertyImages { get; set; }
    public InventoryList InventoryList { get; set; }

    public string PropertyPath { get; set; }

    public SideNavigationViewModel SideNavigationViewModel { get;set;}
}

Answer 1

You need to use the [FromBody] attribute.

Make your post method look like this:

[HttpPost]
public ActionResult SaveDetails([FromBody]PropertyDetailsViewModel PropertyDetail)
{
    if(PropertyDetail != null)
    {

       return Json("Success");

    }
    return Json("Failed");

}

Answer 2

I did some more research and found this way of getting it to work, not sure if its the best solution, but never the less a solution. It works for now.

 public ActionResult SaveDetails()
    {

        Request.InputStream.Seek(0, SeekOrigin.Begin);
        string jsonData = new StreamReader(Request.InputStream).ReadToEnd();
        PropertyDetailsViewModel PropertyDetail = JsonConvert.DeserializeObject<PropertyDetailsViewModel>(jsonData);

        if (PropertyDetail != null)
         {

         return Json("Success");

        }
        return Json("Failed");

    }