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

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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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.

Method 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?


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x