Jquery .ajax not posting data correctly in asp.net mvc site -- formcollection empty

Question

Hey everyone,

I'm using jquery to submit my form (with id "#myForm" here) as follows:

$(document).ready(function() {  
        $("#my_form").submit(function(event) {  
            $.ajax(  
          {  
              type: "POST",  
              url: $("#my_form").attr("action"),  
              contentType: "application/json; charset=utf-8",  
              data: ("#my_form").serialize(),  
              success: function(result) {  
                  alert('hi');  
              },  
              error: function(req, status, error) {  
                  alert("Sorry! We could not process the form at this time.");  
              }  
          }  
         );  
         event.preventDefault();  
        });//end submit for my_form  
    });//end document ready

If I view the data being posted, I see the following

POST /PageContents/Edit HTTP/1.1
x-requested-with: XMLHttpRequest
Accept-Language: en-us
Referer: [EDITED OUT BY ME]
Accept: /
Content-Type: application/json; charset=utf-8
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Host: www.somesite.com:3852
Content-Length: 142
Connection: Keep-Alive
Pragma: no-cache

id=1&small_title=Welcome+to!!!&big_title=Chicago!!!&body=here+is+some+stuff+for+the+body.!!!&subheading=The+place+for+pizza!!

But this does not get mapped to the correct action because the Request.Forms collection is empty.

If I submit this form without javascript and just use normal HTML, the data posted looks like this:

POST /PageContents/Edit HTTP/1.1
Accept: image/gif, image/jpeg, image/pjpeg, image/pjpeg, application/x-shockwave-flash, application/x-ms-application, application/x-ms-xbap, application/vnd.ms-xpsdocument, application/xaml+xml, /
Referer: [EDITED OUT BY ME]
Accept-Language: en-us
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
Host: www.somesite.com:3852
Content-Length: 164
Connection: Keep-Alive
Pragma: no-cache

small_title=Welcome+to%21%21%21&big_title=Chicago%21%21%21&subheading=The+place+for+pizza%21%21&body=here+is+some+stuff+for+the+body.%21%21%21&id=1

You can see, the data being posted properly, so my routing all works and the correct action is called.

All of the fields in my form do indeed have a name attribute.

Thanks, and apologies for the lengthy post.

Answer 1

I think the problem is the contentType you are passing. You have:

contentType: "application/json; charset=utf-8",

but the data you are passing is not json. Your best bet is to remove that line.