ASP.NET MVC model binding with serialize

Question

I'm using serialize and JSON.stringify methods to make an Ajax call to my ASP.NET MVC application. MVC is unable to bind the model.

This is my JS code and strongly-typed view:

<script>
    function saveDetails() {
        jsonObj = $('#rdform').serialize();
        $.ajax({
            method: "POST",
            url: "R/SaveDetail",
            contentType: 'application/json; charset=utf-8',
            dataType: "json",
            data: JSON.stringify(jsonObj)
        });
    }
</script>

<form id="rdform">
    <div>
        <div>
            @Html.LabelFor(m => m.LiIdH)
            @Html.TextBoxFor(m => m.LiIdH)
        </div>
        <div>
            @Html.LabelFor(m => m.LiIdR)
            @Html.TextBoxFor(m => m.LiIdR)
        </div>
    </div>
    <input type="button" onclick="saveDetails()" />
</form>

The request's payload looks like this:

"LiIdH=1&LiIdD=&LiIdR=2"

And this is my Action method:

public bool SaveDetail(Detail detail)

Have I missed something?

You don't need to stringify it - just use data: jsonObj, — user3559349
– user3559349, Commented May 7, 2015 at 3:34
Then there is some other issue. Are you sure you have shown all the html between the <form> tags. The fact that form data includes LiIdD= suggest you haven't (there is no control with the attribute name="LiIdD") — user3559349
– user3559349, Commented May 7, 2015 at 3:44
Yes, I'm sure about that. I removed some fields for brevity. But I just noticed that my button is outside, my it's causing the problem? — Akbari
– Akbari, Commented May 7, 2015 at 3:45
Just noticed you have contentType: 'application/json; charset=utf-8', - you need to remove that line (in addition to removing JSON.stringify()). And I strongly suggest you use url '@Url.Action("SaveDetail", "R")', — user3559349
– user3559349, Commented May 7, 2015 at 3:51

Sean O'Brien · Accepted Answer · 2015-05-07 04:57:34Z

4

The reason you are running into trouble is because of your use of both serialize and JSON.stringify. form.serialize returns a string value, which when passed to JSON.serialize gets wrapped with an extra pair of quotes. The easiest way for you to invoke your action method would be to remove your call to JSON.stringify and also remove the contentType option of the ajax call and go with the default, as shown below:

<script>
    function saveDetails() {
        $.ajax({
            method: "POST",
            url: "R/SaveDetail",
            dataType: "json",
            data: $('#rdform').serialize()
        });
    }
</script>

edited May 7, 2015 at 4:57

answered May 7, 2015 at 3:54

Sean O'Brien

1837 bronze badges

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

5 Comments

user3559349 Over a year ago

Or just omit contentType: since the default is 'application/x-www-form-urlencoded; charset=UTF-8'

Akbari Over a year ago

Thanks Sean, but I should remove the contentType altogether. I don't know why, but the contentType in you answer causes problem too. But if I remove it, everything works fine.

Sean O'Brien Over a year ago

I believe it is the 'charset....' causing trouble, but you are correct that removing it and just sticking with the default is probably a better option.

pastrami01 Over a year ago

Sean - you saved my life! Had the same issue as the poster - found a lot of posts but no real answer. Have tried everything, custom model binder etc. But that the solution is that easy i never would have thought :)

ahjashish Over a year ago

I have a similar issue with the only difference that my model has a list which I am looping over to create a table wrapped in a Html.BeginForm using Html.DispayTextFor to display text for each row but when I am using $("formElem").serialize and sending it as data. Doesn't seem to receive the list in the model populated, any help?

Collectives™ on Stack Overflow

ASP.NET MVC model binding with serialize

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related