JSON data deserialized incorrectly

Question

So I have a custom class:

public class CompanyInfo
{
    public int CompanyID { get; set; }
    public BasicInfo BasicInfo { get; set; }
    public EmployeesInfo EmployeesInfo { get; set; }
    ...
}

In my view, I want to send data back to my controller function:

 [HttpPost]
 public JsonResult SaveCompanyInfoWithOutBalanceSheet(CompanyInfo model)
 {
    ...
 }

The Ajax function is like this:

function onSubmit(){
    basicInfoFormData = $("#basicInfoForm").serialize();
    employeesInfoFormData = $("#employeesInfoForm").serialize();
    var companyInfoData = 
    {
      basicInfoFormData, employeesInfoFormData
    };
    $.ajax({
            type: "POST",
            url: '@Url.Action("SaveCompanyInfoWithOutBalanceSheet")',
            dataType: "json",
            data: JSON.stringify(companyInfoData),
            success: function (result) {
                if (result.Success)
                    secondStepOnSubmit();
                else
                    submitError();
            }
        });
}

When I run the ajax function, my controller function do successfully receive the HTTP request and translate it to my custom class " CompanyInfo ". However, there's one issue here. The last property cof my " BasicInfo " class is a string , the name of the property is " Website ". If I set a breakpoint in the controller method, I can see that the binder doesn't deserialize the " Website " property correctly. Below is the value that Binder assigned to the " Website " property:

"test_email_address \",\"employeesInfoFormData\":\"EmployeesInfo.ID=0"

" test_email_address " is what I typed in for " WebSite " but somehow the binder includes the beginning of the " EmployeesInfo " part of the JSON string as well. Any ideas?

Answer 1

When you want your C# Action( SaveCompanyInfoWithOutBalanceSheet ) need parameter as a model( CompanyInfo ) then you should pass the whole model with data - not few attribute values of the model.

For Example, if your Model is having three properties like below

public class CompanyInfo
{
    public int CompanyID { get; set; }
    public BasicInfo BasicInfo { get; set; }
    public EmployeesInfo EmployeesInfo { get; set; }       
}

And your Controller Action is like below

 [HttpPost]
 public JsonResult SaveCompanyInfoWithOutBalanceSheet(CompanyInfo companyInfo)
 {
    ...
 }

So, in javascript function you need to get the values where you have assigned to your html controls. Generate the correct structure of your model and pass it as parameter.

In your model, it holds one int attribute and two separate classes as two other attributes . So, when you are sending the parameter create the proper structure and pass it. It should work

function onSubmit(){
    var companyIdValue =  $("#yourcompanyidtextbox").val();
    //Ensure the basicInfoFormData contains all the property values of BasicInfo class
    var basicInfoFormData = $("#basicInfoForm").serialize();
    //Ensure the employeesInfoFormData contains all the property values of EmployeesInfo class
    var employeesInfoFormData = $("#employeesInfoForm").serialize();
    var companyInfo = 
    {
      CompanyID : companyIdValue,
      BasicInfo : basicInfoFormData, 
      EmployeesInfo : employeesInfoFormData
    };
    $.ajax({
            type: "POST",
            contentType: 'application/json; charset=utf-8',
            url: '@Url.Action("SaveCompanyInfoWithOutBalanceSheet")',               
            data: JSON.stringify(companyInfo),
            success: function (result) {
                if (result.Success)
                    secondStepOnSubmit();
                else
                    submitError();
            },
            error: function (request, textStatus, errorThrown) {                    
               alert("Status: " + textStatus + "Error: " + errorThrown);
            }
        });
}

Hope you are clear.