how do you pass a parameter to an asp.net page method using jquery/ajax?

Question

I'm trying to pass parameters to my static web method (which is in an asp.net page). I'm trying to pass the "test1" param with a value of "myvalue". Any ideas on what I am doing wrong?

$.ajax({
    type: "POST",
    url: "WebForm1.aspx/WebMethod1",
    data: {"test1": "myvalue"},
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
        alert(msg.d);
    }
});

Answer 1

What error are you getting?

I've used prototype before (similar to jQuery for ajax) and with that you don't quote the parameter names. So your data parameter should probably be:

data: {test1: "myvalue"}

Give that a shot.

You could also try setting up Fiddler and see the actual request being made.

Answer 2

The way you have it set up, any error that may occur in the ajax call will get silently swallowed. I'd suggest adding an error callback like this:

$.ajax({
    type: "POST",
    url: "WebForm1.aspx/WebMethod1",
    data: {"test1": "myvalue"},
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
        alert(msg.d);
    },
    error: function(response) {
        $('body',document).html(response.responseText);
    }
});

Also, if you are using Visual Studio, you could run your ASP.NET app in debug mode to catch any server-side error. You can also put a breakpoint somewhere in the server-side code to make sure it's getting hit at all, and to inspect the Request.Form collection.

Hope this helps.

Answer 3

my "data" section was wrong. it needs to be "{'test1':'myvalue'}"