Calling Web Service Methods Using ASP.NET AJAX

The Microsoft ASP.NET AJAX asynchronous communication layer enables a browser to call Web service methods on the server by using ECMAScript (JavaScript). It exposes APIs that JavaScript functions can use in any browser to call Web service methods on the server.

The page can call server-based methods without a postback and without refreshing the whole page, because only data is transferred between the browser and the Web server.

This following code example shows how to expose a Web service method in an ASP.NET Web page.

Step 1: Create ASP.NET Ajax Enabled Web site

Step 2: Now Add New Item – Select Web Service from the List of Items and Name it WebService.asmx.

Step 3: Replace the WebService.cs with the following code:

Listing – 1

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;

/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class WebService : System.Web.Services.WebService
{
    [WebMethod]
    public string HelloWorld()
    {
     return "This is Message From Server - Hello World - " + DateTime.Now.ToString();
    }
}

Note: We have added [ScriptService] tag and Replaced HelloWorld().

Step 4: Now come back on default.aspx page and and Update the ScriptManager with the following:

Listing – 2

    <asp:ScriptManager runat="server" ID="scriptManager">
         <Services>
            <asp:ServiceReference Path="WebService.asmx" />
         </Services>
    </asp:ScriptManager>

Here given the ServiceReference to WebService that we have just created.

Step 5: Add button control on page which will be used to call the webservice.

Listing – 3

    <div>
      <p>Calling a service that returns the current server time.</p>
       <input id="Button1" type="button" value="Call Web Service" onclick="HelloWorld()"/>
    </div>

Step 6: Add Javascript on the page with HelloWorld() function with will call the WebService & Return the Result.

Listing – 4

    <script type="text/javascript">
            function HelloWorld()
            {
                WebService.HelloWorld(OnSucceeded);
            }
            function OnSucceeded(result)
            {
                var myResult = document.getElementById("rst");
                myResult.innerHTML = result;
            }
        </script>

Step 7: finally put <spam> tag on page on which we will display our result.

Listing – 5

    <hr />
       <div>
           <span id="rst"></span>
       </div>

Reference:

http://www.asp.net/AJAX/Documentation/Live/overview/AsynchronousLayerOverview.aspx

Related Post:

http://ramanisandeep.wordpress.com/2009/09/03/using-jquery-to-directly-call-asp-net-ajax-page-methods/

Hope this will Help you !!!

Jay Ganesh