Question

I have next JS code where I call controller method SaveSettings:

 function SaveSettings() {
        // get json object from knockoutjs object 
        var data = ko.toJSON(viewModel);
        var params = JSON.stringify(data);
        $.ajax({
            url: '/MyAjax/SaveSettings/',
            type: "POST",
            data: JSON.stringify(data),
            dataType: "JSON",
            contentType: "application/json; charset=UTF-8",
            success: function (result) {
                alert('ok');
            }
        });
    }

JSON Data have next format and sending to controller:

    {
"Name":"xcvxcvxcv",
"GeneralSetting":
{
    "Data1":{"IsSync":true,"Value":0},
    "Data2":{"IsSync":false,"Value":0},
    "PasswordLenght":{"IsSync":false,"Value":7},
    "PasswordMessage":{"IsSync":false,"Value":null},
    "DiscoverSerialPort":{"IsSync":false,"Value":true}
},
"MailSettings":
{
    "IsEnabled":{"IsSync":false,"Value":false},
    "ServerAddress":{"IsSync":false,"Value":null},
    "PortNumber":{"IsSync":false,"Value":0},
    "UserName":{"IsSync":false,"Value":null},
    "Password":{"IsSync":false,"Value":null},
    "IsSecureNetwork":{"IsSync":false,"Value":false},
    "PollFrequency":{"IsSync":false,"Value":0},
    "AdminFromEmail":{"IsSync":false,"Value":null},
    "AdminEmail":{"IsSync":false,"Value":null},
    "ReplyToEmail":{"IsSync":false,"Value":null},
    "BCCEmail":{"IsSync":false,"Value":null},
    "AuthenticationMethod":{"IsSync":false,"Value":0}
}
}

my controller method look like:

.....
     [HttpPost]
        public JsonResult SaveSettings(GlobalData data)
        {
            return Json(false.ToString(), JsonRequestBehavior.AllowGet);
        }

.....
public class GlobalData
{
    public string Name { get; set; }
    public GeneralSetting GeneralSetting { get; set; }
    public MailSetting MailSettings { get; set; }
}

public class MailSetting
{
    public SelectedProperty IsEnabled { get; set; }
    public SelectedProperty ServerAddress { get; set; }
    public SelectedProperty PortNumber { get; set; }
    public SelectedProperty UserName { get; set; }
    public SelectedProperty Password { get; set; }
    public SelectedProperty IsSecureNetwork { get; set; }
    public SelectedProperty PollFrequency { get; set; }
    public SelectedProperty AdminFromEmail { get; set; }
    public SelectedProperty AdminEmail { get; set; }
    public SelectedProperty ReplyToEmail { get; set; }
    public SelectedProperty BCCEmail { get; set; }
    public SelectedProperty AuthenticationMethod { get; set; }
}

public class GeneralSetting
{
    public SelectedProperty ScreenTimeout { get; set; }
    public SelectedProperty AdminScreenTimeout { get; set; }

    public SelectedProperty PasswordLenght { get; set; }
    public SelectedProperty PasswordMessage { get; set; }
    public SelectedProperty DiscoverSerialPort { get; set; }
}

public class SelectedProperty
{
    public bool IsSync { get; set; }
    public object Value { get; set; }
}

JSON object and my GlobalData class have the same structure.(look like they have)

But then method SaveSettings start working GlobalData variable contain NULL in all properties that define in GlobalData class.
Why this is happens ? Is my class structure incorrect for internal MVC mapping ?

Answer 1

You are JSON serializing your view model twice: once with ko’s toJSON method and once with the native JSON.stringify method. One is sufficient:

function SaveSettings() {
    var data = ko.toJSON(viewModel);
    $.ajax({
        url: '/MyAjax/SaveSettings/',
        type: 'POST',
        data: data,
        contentType: 'application/json; charset=UTF-8',
        success: function (result) {
            alert('ok');
        }
    });
}