Call C# function (WebMethod) from Javascript (JQuery)

Question

I have a function like this

    [WebMethod]
    public static string Hello()
    {
        return "hello";
    }

I want to call it in my aspx page. so this is what I am trying

    function sendData(){
        $.post("Default.aspx/Hello", function(data){
            alert(data);
        }).fail(function() {
            alert( "error" );
        });
    }

Now caling this is successful and doesn't return error, but it doesn't return what I want. Instead of returning the string "hello" it gives me back a string of the html of the page

Answer 1

You need to use data.d:

function sendData(){
        $.post("Default.aspx/Hello", function(data){
            alert(data.d);
        }).fail(function() {
            alert( "error" );
        });
    }

Dave Ward article on why you need to use .d

You also need to make sure that you have added a script manager and EnablePageMethods i.e.

<asp:ScriptManager runat="server" EnablePageMethods="true">
</asp:ScriptManager>

Answer 2

I think you should use $.ajax instead of $.post in your js method, as the GET http method is the default used in controllers if not specified otherwise.

Answer 3

I think you are close. In my project I am using $.ajax. I have provided the code sample from my project (which works fine) and I hope it helps.

C#

    [WebMethod]
    public static List<ConnectionStatusInfo> GetConnectionStatus()
    {
       .....
    }

JavaScript

$.ajax({    url: "ConnectionStatus.aspx/GetConnectionStatus",
            dataType: "json",
            type: 'POST',
            data: null,
            contentType: "application/json; charset=utf-8",
            success: function (data) {

            },
            error: function (d) {

            }
        });