Call Server Methods using AJAX and ScriptManager

1. .Net provides another way of integrating server methods with front end Javascript - called the ScriptManager - which is a .Net object which you place on the page, which provides methods for handling the AJAX.
2. Create a new website solution, and on the main page aspx, put the Scriptmanager element: 
    <asp:ScriptManager ID="_sm" runat="server" EnablePageMethods="true" />
The EnablePageMethods parameter tells .Net to create client Ajax handlers for server methods in the Page.
3. Create a server side method within the Page code which you want the client to be able to call: 
using System.Web.Services;
using System.Web.Script.Services;

    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }

        [WebMethod()]
        [ScriptMethod()]
        public static string LocalHelloName(string name)
        {
            return "Local Hello " + name;
        }
    }
Note the method must be static so it won't have access to Page elements, or other Page Lifecycle objects. Page_Load will not be run when it is invoked. The method must be decorated with WebMethod and ScriptMethod from the appropriate namespaces in the Using lines. It's safest to use strings as parameters and return values. As usual, if you need complex types, serialise with JSON or XML or delimeted.
4. Now, let's call this script from the front-end. Create a Textbox and add a javascript onBlur handler. 
    <input id="YourName" onblur="HelloName(this.value)" />
And now the HelloName script itself, and the handler: 
    <script language="javascript" type="text/javascript">

        function HelloName(name)
        {
            PageMethods.LocalHelloName(name, OnHelloNameComplete);
        }

        function OnHelloNameComplete(result) 
        {
            alert(result);
        }
    
    </script>
But what's this PageMethods.LocalHelloName thing? .Net has mysteriously created a JavaScript proxy method called LocalHelloName from your server side method, and put it in the PageMethods object. This shields your client script from the dirty implmentation problems of the Ajax calls. As well as the string parameter, you pass in the reference to the function you wish to run when the Ajax returns. In our case it simply alerts the response.

Give it a go - run the page, type your name and tab away, the string from the back-end method is returned.

5. What if your method is not in the page at all, but in a separate Webmethod, so we can re-use it across multiple pages? Simple. Add a Webservice to the solution and implement the following Webmethod: 
using System.Web.Services;
using System.Web.Script.Services;

    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ScriptService()]
    public class RemoteWebService : System.Web.Services.WebService
    {
        public RemoteWebService()
        {
        }

        [WebMethod()]
        [ScriptMethod()]
        public string RemoteHelloName(string name)
        {
            return "Remote Hello " + name;
        }
    }
Again the method is decorated with the WebMethod and ScriptMethod tags, but the webservice class itself must have a ScriptService decoration along with the usual WebService one. This allows it to be called from the ScriptManager.
6. To allow the ScriptManager to know where the webservice lives, we need to add a Service line to it, with the location of the Webservice: 
    <asp:ScriptManager ID="_sm" runat="server" EnablePageMethods="true">
        <Services>
            <asp:ServiceReference Path="~/RemoteWebService.asmx" />
        </Services>
    </asp:ScriptManager>
In our case, the webservice location is within our website, but this could be an absolute URL.
7. Amend our Javascript function to call both the local page method as before and the new remote webmethod: 
        function HelloName(name)
        {
            PageMethods.LocalHelloName(name, OnHelloNameComplete);
            RemoteWebService.RemoteHelloName(name, OnHelloNameComplete);
        }
You can see the .Net has added a new first class object named after our webservice RemoteWebService, we can now call the RemoteHelloName method (or any other Webmethods in that Webservice) as before. When you run this example, blurring the name text field calls both local page and remote webservice methods, and you get two alerts.
And that is all there is. ScriptManager gives your Javascript appropriate objects which wrap the Ajax functionality. For methods on the local Page, the ScriptManager provides a PageMethods class on which all your server methods get a stub class. For webmethods, a top level class representing the Webservice and all its methods is created. Both are easily used from script.