Serializing Form Data Collection to Model using JavaScript

Question

Let's say I have an object like this:

public class Widget
{
    public string Name { get; set; }
    public IEnumerable<Foo> Foos { get; set; }
}

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

And my controller method sends it to a View like this:

var widget = _dataAccess.GetWidget(someKey);
return View(widget);

And I have a View that looks like this:

@model MyNamespace.Widget

@using(Html.BeginForm("Edit", "Widgets", FormMethod.Post, new { id = "the-form" }))
{
    <p>@Html.TextBoxFor</p>

    @foreach(var foo in Model.Foos)
    {
        <p>@Html.TextBoxFor(x => x.Foos.ToList()[Model.Foos.ToList().IndexOf(foo)])</p>   
    }

    <input type="button" value="Save Changes" id="the-button" />
}

<script type="text/javascript">
$(function () {
        $("#the-button").click(function () {
            $.ajax({
                url: '@Url.Action("Edit", "Widgets")',
                type: 'POST',
                data: JSON.stringify({ widget: serializeForm("the-form") }),

                // etc, etc, not important
            });
        });
    });
    function serializeForm(formId) {
        var formData = {};
        $.each($("#" + formId).serializeArray(), function(){
            formData[this.name] = $(this).val();
        });
        return formData;
    }
</script>

Which serializes into:

{ "widget": { "Name" : "value from textbox", "[0].Name" : "some value", "[1].Name" : "some other value" } }

Of Course the serialization here isn't helpful because [0].Name isn't usable. Is there a way to change this so that it serializes to what the Post method controller action would expect? I.e., something like:

{ "widget":{"Name":"blah", "Foos":[ { "Name":"foo name 1"}, { "Name":"foo name 2"} ] }}

Does it have to be json or just something that will bind to Widget? — gbabiars
– gbabiars, Commented Dec 4, 2012 at 22:25

gbabiars · Accepted Answer · 2012-12-06 12:19:52Z

1

You can output the Foos as:

for (int i = 0; i < Model.Foos.Count(); i++) {
    <input type="text" name="Foos[@i].Name" value="@Model.Foos.ElementAt(i).Name" />
}

You can then easily post the form:

 $("#the-button").click(function () {
    $.ajax({
        url: '@Url.Action("Edit", "Widgets")',
        type: 'POST',
        data: $('this').closest('form').serialize(),

        // etc, etc, not important
    });
});

Phil Haack's post on model binding a list explains this in depth.

edited Dec 6, 2012 at 12:19

answered Dec 5, 2012 at 4:18

gbabiars

5753 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Didaxis Over a year ago

I did figure this out eventually from a Phil haack post on this topic. Doesn't make your answer any less correct though, thank you kindly!

gbabiars Over a year ago

That's a great reference. I've added a link to it in the answer.

Collectives™ on Stack Overflow

Serializing Form Data Collection to Model using JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related