MVC Model binding with non sequential indexes

Question

i'm trying to post an array of objects to an action within a controller. If I post using a regular submit button everything works as expected, however when i try posting via Ajax, the list is always empty. Any ideas? My code is below.

View:

    @using (Html.BeginForm("Save", "Home", FormMethod.Post,  new { id = "myform" }))
    {
        
        <input type="text" name="Childs[0].Name" value="Name 1" />

        <input type="text" name="Childs[0].Age" value="12" />

        <input type="text" name="Childs.Index" value="0" />

        <input type="text" name="Childs[1].Name" value="Name 2" />

        <input type="text" name="Childs[1].Age" value="23" />

        <input type="text" name="Childs.Index" value="1" />

        <input type="text" name="AnotherProperty" value="111" />

        <input type="button" onclick="PostForm()" value="Test" />
    }

Model:

public class BinderTestModel
{
    public BinderTestModel()
    {
        Childs = new List<BinderTestChildModel>();
    }

    public int AnotherProperty { get; set; }

    public List<BinderTestChildModel> Childs { get; set; }
}

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

    public int Age { get; set; }
}

JS:

function PostForm()
{
        $.ajax({
        url: '@Url.Action("Save")',
        type: "POST",
        contentType: 'application/json; charset=utf-8',
        datatype:'json',
        data: JSON.stringify($("#myform").serialize()),
        success: function()
        {
        },
        error: function (jqXHR, exception) {
            alert('Error message.');
        }
        });
}

Thanks,

Gonzalo

score 0 · Accepted Answer · answered Nov 04 '15 at 02:58

0

You need to remove the contentType: 'application/json; charset=utf-8', option and not .stringify() the data so that it posted using the default application/x-www-form-urlencoded; charset=UTF-8 content type

$.ajax({
    url: '@Url.Action("Save")',
    type: "POST",
    datatype:'json',
    data: $("#myform").serialize(),
    success: function()
    {
    },
    error: function (jqXHR, exception) {
        alert('Error message.');
    }
});

answered Nov 04 '15 at 02:58

that works, thanks. What if I want to include additional data, that's not part of the form? – Gonzalo Nov 04 '15 at 13:34
There are a number of options including using `FormData` (refer [this answer](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681)) or using the `jquery .param()` (refer [this answer](http://stackoverflow.com/questions/32353093/mvc-jquery-ajax-post-returns-null/32353268#32353268)) – Nov 04 '15 at 21:40

Ardian Reqica · Answer 2 · 2019-03-09T18:31:08.977

If you have problem with Non-Sequential Indexes you should add a hidden input and map with text inputs

for more details check https://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/

<input type="hidden" name="products.Index" value="1" 
<input type="text" name="products[1].Name" value="Salsa" />

<input type="hidden" name="products.Index" value="3" 
<input type="text" name="products[3].Name" value="Salsa" />

MVC Model binding with non sequential indexes

2 Answers2