Serializing form data doesn't work in asp.net mvc app

Question

In my html I have

<h2>Title goes here</h2>

    @using (Html.BeginForm("Action", "Controller", FormMethod.Post, new { id = "myFormID" })) {
        <input type="text" id="testinput" name="testinput" />
        <input type="text" id="testinput2" name="testinput2" />

        <input type="button" value="click me" onclick="submitForm();" />
    }

in my js I have

function submitForm() { 

    dataString = $("#myFormID").serialize();

    alert(dataString);

    $.ajax({

        type: "POST",
        url: "/Controller/Action",
        data: dataString,
        cache: false,
        dataType: "json",

        success: function (data) {

            alert('success!');
        },

        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest + "<br />" + textStatus + "<br />" + errorThrown);

        }

    }); 

}

In my controller file I have:

    public ActionResult Action()
    {
        return View();
    }



    [HttpPost]
    public ActionResult Action(string testinput, string testinput2)
    {
        return View();
    }

When clicked on "click me" button, I get the following error: "parsererror
Invalid JSON: "

What am I doing wrong? I am simply trying to pass form data to jquery .ajax.

The alert statement outpust "testinput=gdfgf&testinput2=gfgfd" which is the correct values I entered. SO the error seems to be when serializing.... I am using MVC 3 with razor...I had the impression that passing data between model/view and javascript code was made easier.

looks like asp.net mvc is expecting JSON Data, but you send data serialized as query string (a=1&b=2&c=3&d=4&e=5) — Guillaume86
– Guillaume86, Commented Oct 26, 2011 at 17:00

Ilia G · Accepted Answer · 2011-10-26 16:54:03Z

2

I am almost positive that has nothing to do with the data you pass to the $.ajax call and everything with the data returned by /Controller/Action. Open up Fiddler and examine the response. it is likely malformed (or not JSON at all).

answered Oct 26, 2011 at 16:54

Ilia G

10.2k3 gold badges43 silver badges61 bronze badges

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

5 Comments

sarsnake Over a year ago

What should contoller/action return? I will add my controller code.

Ilia G Over a year ago

@sarsnake I don't know what data you expecting it to return, but it must be a valid JSON, since when you init your AJAX request you set dataType: "json", which means you expect that returned data is JSON. If you don't really care about returned data, then don't set the dataType.

sarsnake Over a year ago

I removed the datatype from ajax call and it worked. thank you.

sarsnake Over a year ago

however, no article actually addresses the case when I do need to return json from the action. Would I have to manually jsonify the data then?

Ilia G Over a year ago

@sarsnake Simply return a JSON object like this: return Json(new {foo:"bar"});, instead of return View()

Leons · Accepted Answer · 2011-10-26 16:57:17Z

0

if your method accepts only int id as parameter, then dataString should be declared as

var dataString = { id: $("#myFormID").val() };

if you need to pass id and testinput as parameters, then use

var dataString = { id: $("#myFormID").val(), testinput: $("#testinput").val() };

The parameters and names in dataString mutch match the parameters of your action method.

answered Oct 26, 2011 at 16:57

Leons

2,6741 gold badge23 silver badges26 bronze badges

2 Comments

sarsnake Over a year ago

I see your point....but I was under the impression that serialization was built into MVC 3 and that's why all I need to do is use this: dataString = $("#myFormID").serialize();

Ilia G Over a year ago

myFormID is the ID of the form. It doesn't have val(). Nor does his Action have an id parameter. Not sure what are you trying to achieve by this code.

Collectives™ on Stack Overflow

Serializing form data doesn't work in asp.net mvc app

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related