Step by Step:How to use Web Services in ASP.NET AJAX

In my Article Preventing Duplicate Date With ASP.NET AJAX I’ve used ASP.NET AJAX With Web Service Technology, Therefore I add this topic as an introduction how to access Web services from client script in AJAX-enabled ASP.NET Web pages. As well I write this topic to answer the common questions which most of the developers face while working with ASP.NET Ajax Web Services especially in Microsoft ASP.NET official forum http://forums.asp.net/.

ASP.NET enables you to create Web services can be accessed from client script in Web pages by using AJAX technology to make Web service calls. Data is exchanged asynchronously between client and server, typically in JSON format.

 

Lets go a head with the steps :

 

1-Create a new project , if you are using VS 2005 you have to create ASP.NET Ajax Enabled Web site.

 

2-Add new Item , Choose Web Service file .

WebService

 

  3-To make your Web Services accessible from the script, first it must be an .asmx Web service whose Web service class is qualified with the ScriptServiceAttribute attribute and every method you are using to be called from Client script must be qualified with the WebMethodAttribute attribute. On the other hand you can use your Web page( CS or VB files) to add static methods accessible from Client Script , just you need to add WebMethod Attribute and set the EnablePageMethods attribute of the ScriptManager control to true..

 

The other condition is to register the ScriptHandlerFactory HTTP handler, which processes calls made from script to .asmx Web services :

<system.web>
  <httpHandlers>
    <remove verb="*" path="*.asmx"/>    <add verb="*" path="*.asmx"      type="System.Web.Script.Services.ScriptHandlerFactory"       validate="false"/>
  </httpHandlers>
<system.web>

but this already added automatically for any Web.config file of any ASP.NET AJAX Enabled WebSite or Project, So you don’t need to add it.

 

4-Avoid the default Method HelloWorld, then add your method in your asmx file lets say  OurServerOutput , As a consequence your Web service will be like this :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
 
 
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
 [System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {
 
   
 
    [WebMethod]
        public string OurServerOutput() {
            return "The Server Date and Time is : " + DateTime.Now.ToString();
     
        }
    
}

 

5-Add ScriptManager Contol to your aspx file then reference the Web service by adding an asp:ServiceReference child element to the ScriptManager control and setting its path attribute to point to the Web service, That generate a JavaScript proxy class for calling the specified Web service from client script.

 

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

 

Basically ,to enable your application to call Web services(.asmx files) by using client script, the server asynchronous communication layer automatically generates JavaScript proxy classes. A proxy class is generated for each Web service for which an <asp:ServiceReference> element is included under the <asp:ScriptManager> control in the page.

 

6-Create new button to call the JavaSciprt function and a label to display the returned value .

<input id="btnCallDateTime" type="button" value="Call Web Service" onclick="CallDateTime()"/>
<asp:Label ID="lblOutput" runat="server" Text="Label"></asp:Label>

 

7-Define the JavaScript code to call the Web Service :

    <script language="javascript" type="text/javascript">
 
        function CallDateTime() {
 
            WebService.OurServerOutput(OnSucceeded);
        }
 
        function OnSucceeded(result) {
            var lblOutput = document.getElementById("lblOutput");
            lblOutput.innerHTML = result;
        }
     
    </script>

CallDateTime function calls the Web Service Method OurServerOutput…

OnSucceeded function Used as the callback function that processes the Web Service return value. which the result parameter is a simple parameter contain the Server Date Time value returned from the Web Service .

Finally , when you complete these steps and run your application you can press the button and retrieve Server Date time without postback.

 

Conclusion:

In this topic I describes how to access Web services from client script in AJAX-enabled ASP.NET Web pages With a full .NET Framework/JSON serialize, direct integration with the familiar .asmx Web services ,Using  simple example,Also you can connect with the database to return value by create WebMethod in your Web Service file and the same steps you can use.

Next time I will show you more complex example which returns a complex type like objects.

 

Hope this help.

Published Saturday, March 6, 2010 12:30 PM by Yousef_Jadallah

Comments

# re: Step by Step:How to use Web Services in ASP.NET AJAX

Sunday, March 21, 2010 5:59 PM by prashantbhardwaj

That is Exactly what I was Looking for..... Thanks a Ton..

It will be great if can post another article on using web handlers the .ashx in web.config. This will surly help me achieve my week long research on these topics.

# re: Step by Step:How to use Web Services in ASP.NET AJAX

Wednesday, May 19, 2010 9:40 PM by Santhosh.Net

hi

Your Artical too nice, thx u for this Artical

but i hve one doubt, here in path how can i use full url path. we are all use like this

<asp:ServiceReference Path="localhost/.../service.asmx"   />

not like this

<asp:ServiceReference Path="WebService.asmx" /> give me ur valuable sugession

# re: Step by Step:How to use Web Services in ASP.NET AJAX

Thursday, May 20, 2010 2:04 PM by Yousef_Jadallah

Your "localhost/.../service.asmx"  should work fine , because it's local Web services event it's in different project file.

Kindly test your web service by typing the URL "localhost/.../service.asmx" in your web browser, then you can see your WebService description as asmx page with the WebMethod that you create as a link.

Hope this help.

# re: Step by Step:How to use Web Services in ASP.NET AJAX

Monday, June 13, 2011 7:22 AM by Avkash

hey that great article for beginner.. i like it.:)

# re: Step by Step:How to use Web Services in ASP.NET AJAX

Friday, October 14, 2011 4:05 AM by Prakash

very nice article...it is easy to understand for beginners.

# re: Step by Step:How to use Web Services in ASP.NET AJAX

Thursday, February 2, 2012 2:27 AM by bhagavathi

explanation is good but need to mention code to be written in which page

thanq

# re: Step by Step:How to use Web Services in ASP.NET AJAX

Thursday, March 1, 2012 1:51 PM by Maddy

Really Helpful man!!!!!!!!

Thanks a lot.

# re: Step by Step:How to use Web Services in ASP.NET AJAX

Wednesday, April 4, 2012 5:49 AM by Navtej Singh

In my case in javascript code Webservice is not defined error occurring ...

can you plZ tell me why is that so .. ?

thanX

# re: Step by Step:How to use Web Services in ASP.NET AJAX

Thursday, May 10, 2012 10:04 AM by Sandeep Chauhan

@Navtej Singh

I am also getting same error. Please do tell me in case you get it rectified.

Thanks in advance!

# re: Step by Step:How to use Web Services in ASP.NET AJAX

Wednesday, December 5, 2012 1:45 AM by Amit Jha

hello sir

on button click label doesn't update..why?

# re: Step by Step:How to use Web Services in ASP.NET AJAX

Thursday, March 27, 2014 3:53 PM by Mahendra

Jadallah Thank you so much, i created my first web servcies successfully.

Leave a Comment

(required) 
(required) 
(optional)
(required)