asp.net call WebMethod from Javascript asyncronous

Question

I am trying to build an asp.net(c#) page that updates some state texts every second. Now I have implemented an button that calls another PageMethod which restarts something and takes a little while. The problem is, that when I call the restart PageMethod , the update PageMethod can't update as long as the restart method is proceeding...

I wrote a little example to show what I mean:

WebMethods in my Page:

    [WebMethod]
    public static string Update()
    {
        //return "a" to see when the Update PageMethod succeeded
        return "a";
    }

    [WebMethod]
    public static string Restart()
    {
        //the restart will take a while
        Thread.Sleep(2000);
        //return "a" to see when the Restart PageMethod succeeded
        return "a";
    }

the html elements to update:

<p id="update" style="float:left;"></p>
<p id="restart" style="float:right;"></p>

the Pagemethod calls:

callUpdate()
            function callUpdate() {
                PageMethods.Update(function (text) {
                    //itself+text from pagemethod
                    $('#update').text($('#update').text() + text);
                });
                setTimeout(callUpdate, 1000);
            }

            callRestart()
            function callRestart() {
                PageMethods.Restart(function (text) {
                    //itself+text from pagemethod
                    $('#restart').text($('#restart').text() + text);
                });

                setTimeout(callRestart, 1000);
            }

Note: The Update is also called every second after it finished, just to see how it works

To clarify: I want the PageMethods to execute independent to that the other PageMethod has finished.

I also flew over some links like: http://esskar.wordpress.com/2009/06/30/implementing-iasyncresult-aka-namedpipeclientstream-beginconnect/

http://msdn.microsoft.com/en-us/library/aa480516.aspx

But I don't think this is what I need (?) And I really don't know how to call that from Javascript (BeginXXX and Endxxx)

*EDIT: *

Regarding to Massimiliano Peluso, the js code would look like this:

        callUpdate()
        function callUpdate() {
            $.ajax({
                type: "POST",
                url: "ServicePage.aspx/Update",
                data: "{}",
                contentType:
                "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    $('#update').text($('#update').text() + msg.d);
                }
            });
            setTimeout(callUpdate, 1000);
        }

        callRestart()
        function callRestart() {
            $.ajax({
                type: "POST",
                url: "ServicePage.aspx/Restart",
                data: "{}",
                contentType:
                "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    $('#restart').text($('#restart').text() + msg.d);
                }
            });
            setTimeout(callRestart, 1000);
        }

Note: when I run the Page with the new js, there is exactly the same problem as before: The Update method can do nothing until the Restart method is finished.

Answer 1

you should call the page methods using an Async call instead.

have a look at the below. It is a generic way to call a page method using JQuery

$.ajax({
  type: "POST",
  url: "PageName.aspx/MethodName",
  data: "{}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(msg) {
    // Do something interesting here.
  }
});

you should use this code to replace the page method calls

PageMethods.Restart(function (text))

PageMethods.Update(function (text))

Answer 2

It's because an Request only Proceeds when no other Request is processing. Thats because two Processes can't acess to the same SessionState (Sessionstate is not Threadsafe).

So to achieve that Requests are processed at the same time, you have to set EnableSessionState in the @Page directive to either 'ReadOnly' or 'false'