jQuery Ajax（）无法达到C＃Webmethod

Question

I don't get why $.ajax() function cannot reach my [WebMethod].

Here is the jQuery below:

$('.BasketUpdaterSubmit').click(function() {
$.ajax({
    url: '/Ajax/AjaxCalls.aspx/UpdateAsyncBasket',
    type: 'POST',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: "{'name' : 'Ivan'}",
    success: function(data) { alert(data); },
    error: function(xhr) { alert("Damn!"); }
});

Here is the C# code:

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public static string UpdateAsyncBasket(string name)
    {
        // random stuff
        return "Received : \t " + name;
    }

When I place a breakpoint on the return statement I never seem to get there. What am I doing wrong?

Answer 1

根据我对这些东西的经验，我认为必须将JS放在.NET的页面加载javascript函数内部，以访问C＃Web方法。

function pageLoad(sender, eventArgs) { }

Answer 2

Try this code,

$(document).on("click",".BasketUpdaterSubmit",function(){    
    $.ajax({
        url: '/Ajax/AjaxCalls.aspx/UpdateAsyncBasket',
        type: 'POST',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: "{'name' : 'Ivan'}",
        success: function(data) { alert(data); },
        error: function(xhr) { alert("Damn!"); }
    });    
});

And the web.config you have to add following section inside the system.web section

<webServices>
  <protocols>
    <add name="HttpGet"/>
    <add name="HttpPost"/>
  </protocols>
</webServices>

Above code should work(tested in my machine). My best suggestion for you is create a web service for this. so you can omit the page life cycle. You can refer following sample to learn how to do it properly http://tutorials.cmsnsoftware.com/2011/01/how-to-call-csharp-function-in-ajax.html

Answer 3

Try a GET instead of a POST . I have a few web methods that work fine using similar javascript, but have decorated the method with this instead of just [WebMethod] :

[WebMethod, ScriptMethod(UseHttpGet = true)]

And then make sure your ajax call specifies GET:

$('.BasketUpdaterSubmit').click(function() {
$.ajax({
    url: '/Ajax/AjaxCalls.aspx/UpdateAsyncBasket',
    type: 'GET',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: "{'name' : 'Ivan'}",
    success: function(data) { alert(data); },
    error: function(xhr) { alert("Damn!"); }
});

Answer 4

We figured out what's going on. It seems that there is a default ajax setup function which was interfering with my jquery function and didn't proceed when testing. Most probable reason is improper parameter handling. Sorry for the late response. Thank you all.