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:

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

Hope this will Help you !!!

Jay Ganesh

Advertisements

2 thoughts on “Calling Web Service Methods Using ASP.NET AJAX

  1. Not bad but I need a little more

    I have a form with 20 fields (input) or so. I have three buttons.
    I have several methods in my code behind.

    When I click on the first button, I want to execute one of the method.
    When I click on the second button, I want to execute one of the method.
    When I click on the third button, I want to execute one of the method.

    The method are always different

    One thing the methods have in common is that they set the values of the fields

    I want Ajax to do it. Not postback because it takes too much time

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s