Lab 12 – Create a First Web Service

The tutorial covers creating and consuming a WCF web service.

Introduction

In this Lab we build a “HelloWorld” web service. There are 10 Stages to complete Lab 11.

Stage Description1 Create Lab 12 Web Service2 Create a Web Site to Test Web Service3 Build the Test Web Site4 Debugging5 Complete the Second Event Handler6 Write a new Web Method7 Use Test Client8 Add another Web Service9 Connect Service2 to Service110 Connect lab12App to Service2

Stage 1 – Create Lab 12 Web Service

In this part we will create a “Hello World” web service.

1. Create a WCF Service Application – We will create a WCF Service Application which is a type of Project (previously we have only created Websites).

a. Open VS. Choose: File, New, Project:

1

b. On the New Project dialog:

i. Choose: Templates, Visual C#, WCF, WCF Service Application.ii. Supply the Name, “MyService”. This will automatically be the same as the Solution name which we

will change next.iii. Supply the Solution name, “lab11”. A folder named lab11 will be created and inside that a subfolder

named MyService.iv. Browse to the folder you want save the solution in.v. Make sure Create directory for solution is checked.

vi. Choose, OK.

2. Go to Windows Explorer and verify the file structure shown on the right.

2

3. Return to VS. Examine the file Service1.svc.cs which should be open as shown on the right.

4. Identify the elements of your Solution and Project in the Solution Explorer.

5. Open IService1.cs and note the items on the right. Clients (e.g. other web sites) that use your web service can see it through this interface, IService1 which defines two (sample) methods,

GetData GetDataUsingDataContract

This file also defines and implements a class that is available to the Client, CompositeType. This class is simply a sample. For a assignment, you would delete this and write your own class to model the context of your problem. For example, a Patient, Player, or Team class.

6. Do these steps:

a. Close VS. Save if prompted.b. Go to Windows Explorer and find the solution file: lab12_sp15.sln which is in the folder with the same name.c. Double-click the solution file to open VS. Verify that the solution and project are shown in the Solution

Explorer.

3

7. Run the web service. Right-click Service1.svc and choose: View in Browser. This doesn’t mean much to us right now. Click the first (or second link) and notice the files are in XML. These are wsdl files (Web Services Discovery Language). This is how the interface of your service is presented to a client.

4

Stage 2 – Create a Web Site to Test Web Service

Next, we create a web site that tests the web service. We do this by creating a web site project in the existing Solution that houses the web service.

8. Do the following:

a. Choose: File, New Project

b. As shown below, do the following:

i. Choose: Web, ASP.NET Web Applicationii. Supply the Name, “lab11_app”

iii. Choose, Add to solutioniv. Choose, OK

c. Choose, Empty and then OK.

5

9. Verify that the web site appears in the Solution Explorer.

Stage 3 – Build the Test Web Site

Next, we will build the web site to test the web service.

10. Do the following:

a. Right-click the website node, lab11_appb. Choose: Add, Web Formc. Supply the name, Default and choose, OK.

11. We will build the GUI shown below.

Copy the markup below and paste between the div tags in Default.aspx:

<h2>Lab 11 - Dave Gibson</h2> <p>Web App that uses WCF Web Service</p> <p> <asp:Label ID="Label1" runat="server" Text="Enter an integer"></asp:Label> &nbsp;<asp:TextBox ID="txtInteger" runat="server" Width="36px"></asp:TextBox> &nbsp;<asp:Button ID="btnGetData" runat="server" Text="GetData" /> </p> <p> <asp:Label ID="Label3" runat="server" Text="Choose true or false:"></asp:Label> &nbsp;<asp:RadioButtonList ID="rblTrueFalse" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow"> <asp:ListItem Selected="True">true</asp:ListItem> <asp:ListItem>false</asp:ListItem> </asp:RadioButtonList> ,

6

<asp:Label ID="Label2" runat="server" Text="Enter a string:"></asp:Label> &nbsp;<asp:TextBox ID="txtString" runat="server" Width="175px"></asp:TextBox> &nbsp;<asp:Button ID="btnGetDataUsingDataContract" runat="server" Text="GetDataUsingDataContract" Width="168px" /> </p> <p>Supply two numbers: <asp:TextBox ID="txtX" runat="server" Width="50px"></asp:TextBox> &nbsp;<asp:TextBox ID="txtY" runat="server" Width="50px"></asp:TextBox> &nbsp;<asp:Button ID="btnMultiply" runat="server" Text="Multiply" /> </p> <p> <asp:TextBox ID="txtMsg" runat="server" Height="250px" TextMode="MultiLine" Width="445px"></asp:TextBox> </p>

12. Open Service1.svc.cs and examine the GetData method. This method is available to your web app. It simply takes an integer sent to it from the web app and returns (to the web app) a string with the value.

13. Shortly, we will write code that uses (consumes) the web service. However, first, we must create a reference from our test web site to the web service.

a. Select the lab11_app node in the Solution Explorer.

b. Right-click and choose: Add, Service Reference.

c. On the dialog that appears, do the following:

Press the Discover button. It should find your web service as shown below. Note the “Namespace” (lower-left) which has the value, “ServiceReference1” (not shown in the figure below). I’m not sure why they refer to it as “Namespace”. Later, it is used as the variable we will use to reference the web service.

7

d. Choose: OK. The reference is added as shown on the right.

14. Return to Default.aspx open in design mode. Double-click the “Get Data” button to create the event handler. Supply this code below. Study the code.

// Get value from user. int val = Convert.ToInt32(txtInteger.Text); // Create a reference to an instance of the web service. ServiceReference1.IService1 service = new ServiceReference1.Service1Client(); // Call GetData method in web service String msg = service.GetData(val); // Display return message from web service txtMsg.Text = msg;

15. Build and run (Ctrl+Shift+B, Ctrl+F5) your application. Verify that there are no compile errors. Supply an integer and press the GetData button. You should see a message in the textbox as also shown on the right.

8

Stage 4 – Debugging

Next, we will show how to use the debugger. The point of this is essentially to show that the debugger will not go into the web service unless there is a breakpoint in it.

16. Right-click lab11_app in the Solution Explorer and choose: “Set as StartUp Project”.

17. Open Default.aspx.cs and a breakpoint on the first line of the btnGetData_Click method.

18. Open Service1.svc.cs and add a breakpoint on the first (only) line in the GetData method.

19. Choose: Debug, Start Debugging. The web page will be shown. Supply an integer and press the “Get Data” button. Then,

a. Press F10 three times. The third press takes you into the GetData method in the service. Hover your mouse over the value variable and observe its value.

b. Press F10 two more times and you will be returned to the btnGetData_Click method. You might get a “TimeoutException”. If so, stop the debugger and repeat this step more quickly.

c. Press F10 a few more times to redisplay the web page. Then, return to VS and stop debugging.

9

Stage 5 – Complete the Second Event Handler

Next, we will add another event handler to the web page.

20. Open IService1.cs. Find the CompositeType class and study the code. Note the following:

This is a simple class that defines two properties. It is used to pass data to and from the web service. It is a sample. When you write a web service for a homework, you will delete/modify this class to write your

own class here to model the situation you are working with. The .NET serialization engine converts data to XML for transport. Only properties are serialized. You can define data fields but you must supply properties to get and set if you

want data to be available across a network. Methods are not serialized. Usually, you don’t define methods; however, you can. Methods can be used on

the service side but not on the client. Generally, you think of such a class as a transport class, just to move data to and from a web service.

These data types can be used: http://msdn.microsoft.com/en-us/library/ms731923.aspx

21. Open Service1.svc.cs. Find the GetDataUsingDataContract method. Note the following:

This method is accessible by your web application, it is a web service method. It accepts an instance of CompositeType. If the instance’s BoolValue property is true then the code modify’s the StringValue property and returns the

(modified) instance of CompositeType to the web app.

22. Do the following:

a. Double-click the GetDataUsingDataContract button to create an event handler.

b. Supply the code below for the event handler. Study the code.

// Create an instance of the CompositeType ServiceReference1.CompositeType compositeSent = new ServiceReference1.CompositeType(); // Set the values for the two properties. compositeSent.BoolValue = Convert.ToBoolean(rblTrueFalse.SelectedValue); compositeSent.StringValue = txtString.Text;

// Create a reference to an instance of the web service. ServiceReference1.IService1 service = new ServiceReference1.Service1Client();

// Call the GetDataUsing... method, passing the instance of the CompositeType. // Note that it returns an instance of the CopositeType as well. ServiceReference1.CompositeType compositeReceived = service.GetDataUsingDataContract(compositeSent);

String msgSent = compositeSent.StringValue; // Extract the value of the StringValue property from instance of CompositeType // that was returned from the web service. String msgReceived = compositeReceived.StringValue;

// Display the original StringValue and the value modified by the web service. txtMsg.Text = "Message sent: " + msgSent + "\n" + "Message received: " + msgReceived;

10

23. Build (Ctrl+Shift+B) your application. Verify that there are no compile errors.

24. Run your application (Right-click Default.aspx and choose: View in Browser). Click true and supply a string (“go”) and press the “GetDataUsingDataContract” button.

25. Now click false and supply a string (“go”) and press the “GetDataUsingDataContract” button.

26. Open Default.aspx.cs and study the GetDataUsingContract_Click method.

11

Stage 6 – Write a new Web Method

Next, we add the Multiply method to the web service and then add another event handler to the web page.

27. Open IService1.cs and add the Multiply method in the interface as shown on the right.

[OperationContract] double Multiply(double x, double y);

28. Open Service1.svc.cs and add the code for the Multiply method below as shown on the right.

public double Multiply(double x, double y) { return x*y; }

These are very important steps. Anytime you change the interface you must update the reference.

29. Build (Ctrl+Shift+B) your application. Verify that there are no compile errors.

30. Right-click the ServiceReference1 node under Service References. Choose: “Update Service References”.

31. Do the following:

a. Return to Default.aspx in Design mode. Double-click the Multiply button to create an event handler.

b. Supply the code below for the event handler. Study the code.

double x = Convert.ToDouble(txtX.Text); double y = Convert.ToDouble(txtY.Text); ServiceReference1.IService1 service = new ServiceReference1.Service1Client(); double answer = service.Multiply(x, y); txtMsg.Text = x.ToString() + " x " + y.ToString() + " = " + answer.ToString();

32. Build (Ctrl+Shift+B) your application. Verify that there are no compile errors.

33. Run your application (Right-click Default.aspx and choose: View in Browser) and test the Multiply method.

12

Stage 7 – Use the Test Client

Next, we show how to use the Test Client to test the web service.

34. Open Windows Explorer and:

a. Navigate to: C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE

b. Double-click WcfTestClient.exe to launch the Test Client. We will come back to this in a minute.

35. Return to VS.

a. Right-click Service1.svc and choose: View in Browser.b. Copy the URI

36. Return to the Test Client.

a. Choose: File, Add Serviceb. Paste the URI from the step

above and choose “OK”.

13

c. Double-click GetData() from the left panel. Supply a test input Value and press “Invoke”. The Response is shown below.

d. Choose the “XML” tab at the bottom. When you supply a value and choose “Invoke”, a SOAP envelope is created to handle the Request that is sent to the service. Notice that the envelope is XML and that there is a node for the method and its argument (value). The service runs the method and the Response is packaged as a SOAP envelope with a node for the response from the method. SOAP (Simple Object Access Protocol) is used to transmit a Request and a Response. Each of these is referred to as a SOAP envelope.

e. Play with the other two methods.

f. Close the Test Client. As a beginner, you probably won’t use the Test Client, but it is a useful tool to know about.

14

Stage 8 – Add another Web Service

We will add a new web service (Service2.svc) that in Stage 9 we will configure to use the first web service (Service1.svc).

37. Do the following:

a. Right-click the solution in the Solution Explorer and choose: Add, New Projectb. On the resulting dialog, choose: Installed, Visual C#, WCF, WCF Service Application. c. Give it the name, Service2.d. Choose, “OK”.e. You should see the project in the Solution Explorer. Right-click IService1. cs in the Service2 project. Rename

to IService2.cs. A dialog will appear, answer, “Yes”.

38. IService2.cs should be open. Do the following:

a. Remove the GetDataUsingDataContract method from the interfaceb. Remove the CompositeType class. c. Change the name of the GetData method to GetData2. The file will look like this:

namespace Service2{ [ServiceContract] public interface IService2 { [OperationContract] string GetData2(int value); }}

39. Select Service1.svc in the Service2 project and rename to Service2.svc.

40. Open Service2.svc. Do the following:

a. Remove the GetDataUsingDataContract method. b. Select the name of the class, Service1, right-click and choose: Refactor, Rename. Change the name to

Service2 and choose OK and then Apply.c. Change the name of the GetData method to GetData2.d. Change the one line of code in the GetData2 method to:

return string.Format("from Service2: {0}", value); 41. Right-click Service2.svc in the Solution Explorer and choose: View in Browser. If an error occurs, repeat the

previous steps. Otherwise, close the browser and continue.

15

Stage 9 – Connect Service2 to Service1

We configure Service2 to use Service1.

42. Do the following:

a. Select the References node in the Service2 project. b. Right-click and choose “Add Service Reference”c. Choose “Advanced” in the lower left.d. Choose “Add Web Reference” in the lower lefte. Choose “Web Services in this Solutionf. Choose “Service1”g. Change the “Web reference name” to: service1Reference and then

choose “Add Reference”h. The Solution Explorer should show service1Reference.

43. Compile (Ctrl+Shift+B) to verify that there are no errors.

44. Open Service2.svc.cs and replace the code in GetData2 with the code below. Be sure and use the same name (service1Reference) below that used in step 42g above).

public string GetData2(int value) { service1Reference.Service1 s1 = new service1Reference.Service1(); string s = s1.GetData(value,true); return string.Format("from Service2: {0}", s); }

45. Compile (Ctrl+Shift+B) to verify that there are no errors.

16

Stage 10 – Connect lab11_app to Service2

We configure the application (default.aspx) to use Service2 (which uses Service 1).

46. Do the following:

a. Select the Service References node in the lab11_app project. b. Right-click and choose “Add Service Reference”c. Choose, “Discover”d. Select Service2.svc (note the name ServiceReference2 in the lower-left). Choose “OK”. You should see a

ServiceReference2 node in the Solution Explorer.

47. Open the code-behind for Default.aspx. Add this code to the end of the btnGetData_Click event handler:

ServiceReference2.IService2 service2 = new ServiceReference2.Service2Client(); msg = service2.GetData2(val); txtMsg.Text += "\nService 2 results in application\n" + msg;

48. Any time you change the web services you need to update the references. So, for good measure do the following:

a. Find the Service References node in lab11_app in the Solution Explorer:i. Right-click ServiceReference1 and choose: Update Services Reference.

ii. Right-click ServiceReference2 and choose: Update Services Reference.b. Find the Web References node in Service2, right-click service1Reference in the Solution Explorer and choose:

Update Web Reference.

49. Right-click default.aspx and choose: View in Browser. Test thoroughly.

50. You will not post this lab to Lucius. You will demo it to me in class.

Your Are Done!

17