Consuming a hosted Web Service using Visual Studio, specifically VWD 2010

In this blog we will examine the process to “Consume” a web service located on the web.

Starting the Web Site construction

To begin, create the default web site in Visual Web Developer Express 2010, the process is basically the same as with any of the Visual Studio web tools. The installation is faster, about 10 minutes from start of download to completion. To get started select the ASP.NET Web Site, and I will be using the Visual C# language, mainly because of its built in support of refactoring. For the next few figures, I will be comparing Visual Web Developer express 2010 (VWD 2010) to Visual Web Developer express 2008 (VWD 2008)

Figure 1: Visual Web Developer Express 2010 New Web Site Dialog Box

image

Figure 2: Visual Web Developer Express 2008 New Web Site Dialog Box

clip_image004

Figure 3: VWD 2010, Solution Explorer has more files in it then VWD 2008, many for security purposes

clip_image006

Figure 4: VWD 2008 doesn't have the security items or the site master

clip_image008

From now on in this blog entry I will be using VWD 2010 express and refer to it as VWD, you will be able to use VWD 2008 Express, the pictures will be slightly different.

Building your Web Service Consuming application

You will need to add a “Standard” button to the Default.aspx and a Label to use the following code, here is what the code will look like when you are done, but don’t enter the code yet:

protected void Button1_Click(object sender, EventArgs e)

{

us.z25.Service ws = new us.z25.Service();

Label1.Text = ws.HelloWorld();

}

Getting started with the User Interface or UI:

To create the Button1_Click event, that you see in the introduction to this section, you will need to:

· Add a button to Default.aspx and double click on it in the Visual Studio or Visual Web Dev form (the VSD 2008 Express default is different than the VSD 2010 default web page).

· Add a label, you can change the text, but that isn’t required.

· You DO NOT need to actually type in the code for the event, you will need to type a little code to consume the web service.

Figure 5: How your form might look in VWD 2010 Express

clip_image010

Add Web Reference

Figure 6: Right click the project at the top of the Solution Explorer and then select Add Web Reference

clip_image012

Here is the Add Web Reference dialog box, for the URL, make sure to use your own URL after 1/1/2010, you can check to see if I have anything at z25, you will need to navigate to the site to see what I have. If you get an error, it could mean that I have taken service.asmx off the site or moved it.

Make user to note the Web Reference name out of the textbox just above the Add Reference button.

Figure 7: Add Web Reference, type in the URL plus the service.asmx. Note that a change needs to be made to our hello world application

clip_image014

 

Writing the code to consume a web service

First off let’s talk about the properties of the button and label, for this example, don’t change any of the properties or IDs. Make sure that they look like the following:

clip_image016

 

This is fairly simple coding exercise. Double click the button on Default.aspx, then using the Web Reference name, in this case: us.z25.Service (because Service was the name of the Web Method in the Web service created by VWD by default)

Figure 8: When you double click the button you will see this screen, or a similar screen.

clip_image018

Figure 9: Now construct the Service Class exposed by the Web Service

clip_image020

Figure 10: Now add the Service class, do it on both sides

clip_image022

clip_image024

Figure 11: For reference purposes I have included the default web service from the previous blog entry here, note that there is a public class Service that exposes the method HelloWorld:

clip_image026
 
Run your application

Press the F5 key or ctrl+F5, after a few seconds you will see the following in VWD 2010

clip_image028

Click the button on your new webpage. After a few seconds the web service at https://z25.us/service.asmx will return the phrase: Hello World and look like the following:

clip_image030

 

Conclusion:

Great work!  You have successfully consumed a simple web service!