Using jQuery AJAX to call ASP.NET function in control code-behind instead of page code-behind

Question

I have a user control that I'm creating that is using some AJAX in jQuery.

I need to call a function in the code-behind of my control, but every example I find online looks like this:

$("input").click(function() {
    $.ajax({
        type: "POST",
        url: "Default.aspx/GetResult",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(result) {
            //do something
        }
    });
});

This works fine if I have the method in the Default.aspx page. But I don't want to have the function there, I need the function in the code-behind of my control. How can I modify the url property to call the correct function?

I tried:

url: "GetResult"

but that didn't work.

Answer 1

The way to handle this is to have the webmethod in your page, then just pass the values directly to a control method with the same signature in your control - there is no other way to do this.

In other words, ALL the page method does is call the usercontrol method so it is really small. IF you have the same signature for multiple child controls, you could pass a parameter to tell the page method which one to call/use.

EDIT: Per request (very very simple example). You can find other examples with more complex types being passed to the server side method. for instance see my answer here: Jquery .ajax async postback on C# UserControl

Example: Page method: note the "static" part.

[WebMethod]
public static string GetServerTimeString()
{
    return MyNamespace.UserControls.Menu.ucHelloWorld();
}

User Control Method:

public static string ucHelloWorld()
{
    return "howdy from myUserControl.cs at: " + DateTime.Now.ToString();
}

Client ajax via jquery:

$(document).ready(function()
{
    /***************************************/
    function testLoadTime(jdata)
    {
        $("#timeResult").text(jdata);

    };
    $("#testTimeServerButton").click(function()
    {
        //alert("beep");
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data: "{}",
            dataFilter: function(data)
            {
                var msg;
                if (typeof (JSON) !== 'undefined' &&
                typeof (JSON.parse) === 'function')
                    msg = JSON.parse(data);
                else
                    msg = eval('(' + data + ')');
                if (msg.hasOwnProperty('d'))
                    return msg.d;
                else
                    return msg;
            },
            url: "MyPage.aspx/GetServerTimeString",
            success: function(msg)
            {
                testLoadTime(msg);
            }
        });
    });
});

Note: the dataFilter: function(data)... part of the ajax is so that it works with 2.0 and 3.5 asp.net ajax without changing the client code.

Answer 2

You can't...WebMethods have to be in WebServices or Pages, they cannot be inside UserControls.

Think about it a different way to see the issue a bit clearer...what's the URL to a UserControl? Since there's no way to access them you can't get at the method directly. You could try another way perhaps, maybe a proxy method in your page?