This tutorial will guide you through creating and consuming your first WCF Service using Visual Studio 2008 and VB.NET

This tutorial was created with Microsoft Visual Studio .NET 2008 using WCF. WCF was implemented into the .NET Framework in 3.0, and received an update in 3.5, this tutorial is directed at users of Visual Studio.NET 2008 and ASP.NET 3.5

WCF (or Windows Communication Foundation) is a union of technologies developed by Microsoft to make it easier and quicker for developers to build distributed applications. WCF builds on the existing technologies of ASMX, .NET Remoting, MSMQ and DCOM. WCF attempts to unify these technologies and harness the power of all, while simplifying the process of implementation.

In this tutorial, we will show how to create a WCF Service, and how to consume it within an ASPX page. To demonstrate WCF, we will create a simple Operation Contract, which is similar to a Web Method, that we will call from our ASPX page. We can even expose the methods of the service to JavaScript, so that we can use them client-side.

To begin, create a new web application in Visual Studio. Then in Solution Explorer, right-click the Project and choose to Add New Item.. AJAX-enabled WCF Service, name it Service1. This should create a Service1.vb in the App_Code folder, and a Service1.svc in the root. Firstly, our .svc file will look like this:

The Service1.vb file will look something like this:

Notice the OperationContract attributes. We use this attribute to define the method as part of the WCF Service Contract.
Let’s go ahead and add a simple method to demonstrate how to use it:

Here, we are expecting an input parameter of type String, and we are also returning a String. A simple method to demonstrate how we can consume the WCF Service.
Going back to our ASPX page, we will create a Literal control, a TextBox control and a Button – all ASP controls:

Nothing much different to a regular ASP.NET Web Application here. We need to include a handler for the button’s click event. In the code-behind we will reference the Service to call the method we created earlier:

We did not wrap our Service1 class in a namespace, but in a real-world scenario it would most likely be beneficial to do so. If this was the case, we would have to reference the Service1 as Namespace.Service1, or simply add an Imports directive to the top of the page, Imports Namespace.Service1 for example.
Now if this application is run, you will see that we can input our name and upon button click, the WCF Service will be accessed and we will receive our return string. This all happens very quickly, but there is still a noticeable postback. We can work around this postback by AJAX-enabling the ASPX page, and also exposing the Service to Client-Side JavaScript.

To do this, we will need to add a Service reference to a ScriptManager on the page, like so:

By doing this, we make the ScriptManager manage all of our calls behind the scenes, and allow it to access the WCF Service we created earlier. This means that we can use Client-Side JavaScript to access the Methods of the Service. We will also add an UpdatePanel for the existing ASP.NET Controls, and then create some regular HTML form elements:

Notice we have an onclick handler, where we are calling a JavaScript function instead of a code-behind method. We will include the following JavaScript at the bottom of the page:

The function we call from the button click, DisplayName, in turn calls a Service method. Because the ScriptManager has the Service Reference, the Service methods are exposed to page level. We also pass the onSuccess function to display the return string in a JavaScript alert box.
Finally, let’s move back to the Service1.vb to add our second method, which is being called by JavaScript. It will be just the same as the last one, except not a static method:

Our entire Service1.vb will look something like this:

Download Source Files