JQuery code to call a c# method not working

Question

I am calling a C# function from JQuery but it is giving error.

The JQuery function is written in ascx file and C# function to be called is written in that page's code behind. I am loading the user control into an AJAX tab on tab change event.

Googling, I got that I can not call C# function written in user control. So I written a function in host page(ASPX) and this function is calling my user control function.

But the AJAX request is some how failing, I don't know where. But interesting thing is I have kept a debugger in the error function and I checked the error object.

Status is 200, Status is OK, readyState is 4

and ResponseText is the markup of the page. This means the page is served but the kept the break point in the C# function. It never hits.

I have no idea what's happening. Also this is the first time I am calling a C# function from front end. I don't have detailed idea of what happens under the hood. Please help. Below is the code: JQuery

$(function () {
            $(".hint ul li").click(function () {
                // remove classes from all
                $(".hint ul li").removeClass("active");
                // add class to the one we clicked
                $(this).addClass("active");
                //Ankit J, Implement logic to call jquery
                var Availability = this.childNodes[0].innerText.trim();
                debugger;
                $.ajax({
                    type: "POST",
                    url: "../Pages/MyPage.aspx/CallUCMethodFromJQuery",
                    data: "{'sAvailability' : 'Availability'}",
                    dataType: "json",
                    success: fnsuccesscallback,
                    error: fnerrorcallback
                });
            });
        });

        function fnsuccesscallback(data) {
            alert("success-->" + data.d);
        }
        function fnerrorcallback(result) {
            debugger;
            alert("error-->"+result);
        }

ASPX page's code behind function

[System.Web.Services.WebMethod]
public void CallUCMethodFromJQuery(string sAvailability)
{
    MyNamespace.UserControls.ControlName m = new UserControls.ControlName();
    m.EditAvailabilityValue(sAvailability);
}

And then the UserControl's code behind

public void EditAvailabilityValue(string sAvailability)
{

}

Sorry for not mentioning.... JQuery is in the User Control because the source of click event is a li element which is in the User Control. Also the UserControl is in a folder UserControls and the host page is in the Pages folder and both these folders are in root folder.

Answer 1

Add contentType: "application/json; charset=utf-8" attribute to your ajax call:

$.ajax({
    type: "POST",
    url: "../Pages/MyPage.aspx/CallUCMethodFromJQuery",
    data: "{'sAvailability' : 'Availability'}",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: fnsuccesscallback,
    error: fnerrorcallback
});

then change EditAvailabilityValue method in the user control to static:

public static void EditAvailabilityValue(string sAvailability)
{

}

and change CallUCMethodFromJQuery method in the aspx page code behind to static so it can be called using jQuery:

[System.Web.Services.WebMethod]
public static void CallUCMethodFromJQuery(string sAvailability)
{
    MyNamespace.UserControls.ControlName.EditAvailabilityValue(sAvailability);
}