POST form values to C# WebMethod via ajax call

Question

I'm trying to serialize some form values into a json object using serializeArray() and then POST the form values to a WebMethod in a service.

<script type="text/javascript">
    $(document).ready(function () {
        $("#btn").click(function () {
            var foobar = $(this).closest('#add-question').serializeArray();
            $.ajax({
                type: "POST",
                url: "/Services/QuestionsService.asmx/SubmitQuestion",
                data: "{foo:[" + JSON.stringify(foobar) + "]}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    $("#btn").text(data.d);
                }
            });
        });
    });
</script>

And the service:

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)] 
[System.Web.Script.Services.ScriptService]
public class QuestionsService : System.Web.Services.WebService
{
    [WebMethod]
    public string SubmitQuestion(string foo)
    {
        //do something with foo

        return "Message Sent";
    }
}

However I kept getting a 500 error on the service:

Request format is unrecognized for URL unexpectedly ending in '/SubmitQuestion'.

I found a similar question which recommended adding:

<system.web>
  <webServices>
    <protocols>
      <add name="HttpGet"/>
      <add name="HttpPost"/>
    </protocols>
  </webServices>
</system.web>

To the web.config, this seemed to solve the first issue. But I now get an error in the service complaining that the form parameter foo is missing yet it has clearly been supplied:

System.InvalidOperationException: Missing parameter: foo. at System.Web.Services.Protocols.ValueCollectionParameterReader.Read(NameValueCollection collection) at System.Web.Services.Protocols.UrlParameterReader.Read(HttpRequest request) at System.Web.Services.Protocols.HttpServerProtocol.ReadParameters() at System.Web.Services.Protocols.WebServiceHandler.CoreProcessRequest()

Is there something I'm missing?

I think it might be an issue with serializeArray() as it hits the web method fine if I pass in a simple json object such as:

var obj = { foo: 'bar' };

Am I using serializeArray() incorrectly?

Here is the output of data after being stringified:

{
foo: [
    [
        {
            "name": "__EVENTTARGET",
            "value": ""
        },
        {
            "name": "__EVENTARGUMENT",
            "value": ""
        },
        {
            "name": "__VIEWSTATE",
            "value": "RHqOeKRh4e+2IZH9ZdPatwEklxypUzemNeDv7sO4l8vIR2TrECRFZvalrpbvVre0e6gkY9ZG3618dtU3BhYFW3YNn2y6VqeZlL5hmG/WPLTtZN8lhDkEl1bGOGWBsY52zVxWECkAC2hGtHwF5plmKsL3sHp3nFxh3yzWoGP1LwAc4sAZ/rgKvozqCp/4FfB6P4jBUQnL7Q5EkNsjWBntsXbUswC3cJpS22vgoJFHDh8Lm9n/VGzC86FUWipvGmOJ9/KVSlUBbJE3J0Fs6UZi+E6T1Ql+I8XBZlZOzDlbq40="
        },
        {
            "name": "ctl00$MainContent$txtName",
            "value": "name field"
        },
        {
            "name": "ctl00$MainContent$txtEmailAddress",
            "value": "email address field"
        },
        {
            "name": "ctl00$MainContent$txtLocation",
            "value": "location field"
        },
        {
            "name": "ctl00$MainContent$chkAnonymous",
            "value": "on"
        },
        {
            "name": "ctl00$MainContent$txtQuestion",
            "value": "question field"
        },
        {
            "name": "__EVENTVALIDATION",
            "value": "ileV4/vPquayqiSQJEAvq1oHpIAkHN+fy4QhqOrQpp7NxE4z15rvbTH6BfaSCFFwt96JAp1aqQzuOFCTzc6KSEE6iWDmSDRcJWWOzyksSoXpAMBwLk3F6oAaWa4EIjEUb+2b/PJobySl5BaU3TG0JCZyHK2fxj5HXd8DG89gnmVXemTwq1Ax4BgJw1Z5z1uT8Sw7Xk6inUHAZ0NJH4QdTQ=="
        }
    ]
]

}

Solution 1

I fixed this. I needed to make the parameter in the WebMethod an object rather than a string:

[WebMethod]
public string SubmitQuestion(object foo)
{
    //do something with foo

    return "Message Sent";
}

Solution 2

try to send data as

data: {'foo': JSON.stringify(foobar)},

or

data: {foo: JSON.stringify(foobar)},

the data would be sent as json and the value stored is a string which will be passed to your webmethod's string parameter

Comments

[HCJ]

Did you give it a try after you got the second error message (System.InvalidOperationException: Missing parameter: foo. at...) also?