Complex object added into serialized Array always null on server side

Question

I am serializing form data and adding an extra object of users into it.

Jquery code:

....
var users= getUsers();
var formData = $("#form").serializeArray();
formData.push({ name: 'Users', value: users});

$.ajax({
  url: "/ControllerName/ViewName",
  type: "POST",
  contentType: "application/x-www-form-urlencoded; charset=UTF-8"
  data: formData
});
....
function getUsers() {
  var users= [];
  users.push( new Object({
        Name: "User 1",
  }));


 return users;
}

C# Model

public class File
{
    public string Name { get; set; }

    public int Id { get; set; }

    public List<Users> Users { get; set; }

}

public class Users
{
    public string Name { get; set; }
}

When the call hits server side controller action, the Users list is always empty (Count of 0). I have tried stringify and sending as Json but that didn't help either. I am using ASP.NET MVC 5 on server side.

What am I doing wrong?

edit What I am having trouble with is trying to push a list of objects into the formData (in this case users). If I push a boolean it deserializes fine on the server side.

Try setting the `contentType` property on the args object passed to `$.ajax`. — Michael L., Apr 27 '16 at 13:53
Also, in your `getUsers` function, you don't have to do `new Object` just do `users.push({Name: "User 1"})` — Michael L., Apr 27 '16 at 13:56
@MichaelL. I am using contentType of "application/x-www-form-urlencoded". I will update my sample. — Kaladin, Apr 27 '16 at 14:20
Try changing `data: formData` to `data: $.param(formData)`. See: http://stackoverflow.com/a/4862316/2116171 — Michael L., Apr 27 '16 at 18:43
Also, the object `{Name: "User 1"}` will serialize into `User+1=`. You probably want to change the object to `{name: "Name", value: "User 1"}` — Michael L., Apr 27 '16 at 18:46

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

Wrap your code in $(document).ready(function(){ // code here }); as below , it will make sure the javascript wrapped in will be executed once the DOM is loaded and in ready state. for more info.

Here is fiddle

$(document).ready(function(){
    var users= getUsers();
    var formData = $("#form").serializeArray();
    formData.push({ name: 'Users', value: users});
    
    alert(JSON.stringify(formData));
    
    $.ajax({
      url: "/ControllerName/ViewName",
      type: "POST",
      data: JSON.stringify(formData)
    });
});
    
    function getUsers() {
      var users= [];
      users.push({Name: "User 1"});
      return users;
    }

edit
change data: formData to data: JSON.stringify(formData)

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 27 '16 at 14:10

kakurala

824
6
15

You could improve your answer by explaining what `$(document).ready()` is and how it will help him. – Michael L. Apr 27 '16 at 14:16
stringifying the data gives me null for all values on server side. I have $(document).ready(), just forgot to include it in the sample. – Kaladin Apr 27 '16 at 14:19
`data: JSON.stringify(formData)` hope this helps - http://stackoverflow.com/questions/10110805/jquery-post-json-object-to-a-server – kakurala Apr 27 '16 at 14:29

Complex object added into serialized Array always null on server side

1 Answers1