Creating web services using ASP.NET AJAX

By : |August 4, 2008 0

BANGALORE, INDIA: Web services are applications through which one can provide different kinds of online services to the web user. These services are hosted on the Internet and can be accessed by authorized users to embedded on their web site. There are a number of web service providers such as Google that provide a host of web services: for eg, the Google search engine can be incorporated into your web site.

Windows Live is another such service that lets you incorporate Windows Live Services to your web site, Windows Live Contact Service shows users’ contact list, Windows Live Messenger allows for chatting within the Internet browser and authentication with Windows Live ID. Another example is ‘Amazon.com’ that allows you to develop a customized application which can search details of products without even visiting the website.

Direct Hit!

Applies To: Web developers
USP: Learn how to become a web service provider
Primary Link: msdn.microsoft.com
Keywords:ASP.NET AJAX web services

So, why should you implement web services within your website. Well, they reduce your time and effort spent in doing the same job twice and making things a lot easier for visitors to the website. For example if you want to show the local weather report on your website it won’t be feasible for you to stand under the open sky and study weather patterns. On top of it, you’ll have to update the temperature continuously on your web site. So, what you can do instead is to have a weather status widget on your website so that you can use the service provided by any weather reporting website to your own website.

Likewise you can have a currency converter within your website which takes the currency value right from the local stock exchange. Web Services works on three different platforms:

1. SOAP: Simple Object Access Protocol is based on XML and is both language and platform independent.

2. WSDL:Web Service Description Language which is also based on the XML but is basically used to describe the web service and how you can access it.

3. UDDI: Universal Description, Discovery and Integration is a directory service that is used where one can register and then search for web services. UDDI uses SOAP to communicate and is built into the MS .NET platform.

Now let’s see how you can make your own web service in ASP.NET AJAX and also how you can make use of it at the client side. For creating this we shall use Visual Web Developer 2008. Start with creating a new web service and click on File > New Web Site and select the ASP.NET web service template. Now click on the browse button. Select the local IIS tab on the left hand side and then add a new web service to it.

Give a meaningful name to the web service and click on ‘Ok’. As soon as the development environment gets ready, you shall see a web service automatically created. Delete the pre-created service and start the process for creating your own web service. For deleting, right click on the ‘service.asmx’ file listed on the right side; also delete the code associated with ‘service.asmx’, i.e. the ‘service.vb’ file. Now create a new web service by right clicking on the website and then click on ‘Add new’ item; select the web service option, give a suitable name and click on Add.

[image_library_tag 974/16974, height=”243″ width=”400″ align=”middle” border=”0″ alt=”” ,default]

In Solution Explorer window, open the Service.asmx file. In the code that shows up, change the class name to pcquest.webservice.service’

Once the new service has been added, find the line:

To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line:

‘<System.Web.Script.Services.
ScriptService()>

 

You need additional attributes to use this web service, so ‘uncomment’ the above line. Now we shall explicitly mention the namespace and keep every single code inside this namespace. An example of the code is shown below:

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Namespace pcquest.webservice
‘all the code inside this section
End Namespace

After this double click on the ‘service.asmx’ file and replace the class name service with the name of the namespace i.e. pcquest.webservice. The line in service.asmx file should like this:

?<%@ WebService Language="vb" CodeBehind="~/App_Code/Service.vb" Class="pcquest.webservice" %>?

Once this is done, right click on the service.asmx file and view it on Internet Explorer. It should show the web service page; click on the invoke button on the web page to test the web service.

Now it’s time for client side coding. For this close the current Web Developer 2008 project and start a fresh project. This time we will be creating a new ASP.NET AJAX website. Provide a suitable name and click on Ok. As the page appears we see a couple of standard code already written.

We shall modify those codes according to our needs. First give a title to your web page, for eg, ‘Website for testing web services’ and then delete everything that is inside the ‘Body’ tag. Place the following code inside the body:

[image_library_tag 976/16976, height=”262″ width=”400″ border=”0″ alt=”” ,default]
Open the service.asmx file of the server in the browser and copy the URL in the source code of the client’s website for accessing the web service

<form id="form1" runat = "server">
<asp:ScriptManager runat = "server">
<Services>
<asp:ServiceReference Path = "http://localhost/webservice/Service.asmx" />
</Services>
</asp:ScriptManager>
<button id="hello" onclick = "callservice()">
Click
</button>
</form>

And in the ‘head’ tag place these two functions:

<script type ="text/javascript">
function callservice ()
{pcquest.webservice.service.hello
(callcomplete)
}
function callcomplete(textrecived) {
alert(textrecived )
}
</script>

And that’s all, save your project and view your client web page on the web browser. Now click on the button which is on the web page and you will get an alert which says ‘Hello’. Similarly you can use this to retrieve the status of some process or project.
Web services can also be used to retrieve any data from the database and deliver the required data to the client side.

No Comments so fars

Jump into a conversation

No Comments Yet!

You can be the one to start a conversation.