Pass viewmodel with two objects to controller using Json

Question

Here is my code. The JSON below is not correct but I think I am close. The controller is getting null data everytime. Any help would be appreciated.

  $( "#btnRegister" ).click(function() {

            var personModel = {
                FirstName: $("#txtFirstName").val(),
                LastName: $("#txtLastName").val(),
                Phone: $("#txtPhone").val(),
                EmailAddress: $("#txtEmail").val()
            };

            var loginModel = {
                UserName: $("#txtUserName").val(),
                Password: $("#txtPassword").val()
            };

            var registerViewModel = {
                WebUser: loginModel,
                Person: personModel
            };

            $.ajax({
                url: "@Url.Action("Register", "User")",
                type: 'POST',
                data: registerViewModel,
                success: function(result) {
                    alert(result);
                }
            });
        });

[HttpPost]
    public JsonResult Register(RegisterViewModel registerViewModel)
    {

        string name = registerViewModel.Person.FirstName;
        string username = registerViewModel.WebUser.UserName;

        return Json(name);
    }

public class RegisterViewModel
{
    public WebUser WebUser { get; set; }
    public Person Person { get; set; }
}

public class WebUser
{   
    [Key]
    public string UserId { get; set; }
    public string UserName { get; set; }
    public string Password { get; set; }
}

public class Person
{
    [Key]
    public int PersonId { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Phone { get; set; }
    public string EmailAddress { get; set; }
    public string EmailConfirmation { get; set; }
    public DateTime DateCreated { get; set; }
    public string UserId { get; set; }
}

Have you considered the possibility that ASP.NET can't handle deserializing your object? Perhaps give this [answer](http://stackoverflow.com/a/14591946/1346943) a try and create your own action method parameter binding logic (using JSON.NET, perhaps). — Sven Grosen, Mar 13 '14 at 02:36
Wasn't sure if it was the problem, but thought I'd throw it out there. Glad a simple solution was available. — Sven Grosen, Mar 13 '14 at 18:15

score 2 · Accepted Answer · answered Mar 13 '14 at 03:39

The ajax part needs to be like this

       $.ajax({
            url: "@Url.Action("Register", "User")",
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(registerViewModel),
            success: function(result) {
                alert(result);
            }
        });

Hope this helps!

score 1 · Answer 2 · answered Mar 13 '14 at 02:06

1

It appears you are missing the hash in front of the ids you are searching for with the exception of

$("#txtFirstName").val(),

answered Mar 13 '14 at 02:06

attila

2,219
1
11
15

Sorry I lost them when I did some formatting. I just added back but I am still null at the controller – Sealer_05 Mar 13 '14 at 02:10
Can you share the WebUser and Person class definitions? – attila Mar 13 '14 at 02:17
Added them to the question for you. Also for the record it did work fine when I sent one class at a time instead of using a viewmodel class for both – Sealer_05 Mar 13 '14 at 02:21
Maybe the JavaScript serializer doesn't understand the WebUser and Person classes. Try putting their declaration inside of the RegisterViewModel class. – attila Mar 13 '14 at 02:57

Pass viewmodel with two objects to controller using Json

2 Answers2

Linked