This tutorial will show you how to create and implement an AJAX-enabled WCF Service into an ASP.NET Web page. 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.

We are going to create a single web page that will allow the input of two numbers from the user, and then we will access a WCF Service to make a calculation and return the value back to the Web Page. We will do this using AJAX so that we will get a near-instant response.

Let’s begin by creating our Service Model. It is fairly straight forward and it will call our services from our WCF framework.

Use the ServiceContractAttribute properties to modify the service contract.

The ConfigurationName property specifies the name of the service element in the configuration file to use.

The Name and Namespace properties control the name and namespace of the contract in the WSDL element.

The SessionMode property specifies whether the contract requires a binding that supports sessions.

The CallbackContract property specifies the return contract in a two-way (duplex) conversation.

The HasProtectionLevel and ProtectionLevel properties indicate whether all messages supporting the contract have a explicit ProtectionLevel value, and if so, what that level is.

Start by opening a new project or website in Visual Studio 2010 choose VB as your language of choice.
Now in our handy dandy solution explorer right click and we will add an App_Code Folder. Still with me right?
Cool lets proceed, in the App_Code folder we will add a new item and select WCF Data Service. Name it Service1.vb
Now we have our WCF service file, it’s a blank canvas let’s get creative and paint. We must import these namespaces.

Great job so far, In our first property we called our Service Contract, then for our Operation Contract we called a new method DoWork. Fairly standard in Services so far, nothing really outstanding here.

Our next method is where we will start calling out our operation. Since we are building a mini program here to add to the numbers inside of our textboxes we will then code that out. Here is how we did it, very simple and easy.

Notice we specify a static method, and the OperationContract attribute defines it as an operation of this Service.

Now that we have our service finished lets get to building our webform :)

Now if we move to our ASPX page, we will want to add a ScriptManager to the page to manage all of our AJAX calls behind the scenes. But in order for our Service method to be accessible at page level, we will need to add a Service reference to our WCF Service. We do so like this:

Now let’s go ahead and create our form. We will use HTML form elements instead, as we are going to use JavaScript to call our Service method.

Not much different than a regular ASP.NET Web Application here. Notice we include the handler for the button. Here we are calling a JavaScript function, which we can now add to the page. Add the following to the bottom of the page:

Above, we are directly referencing the public method we created within the WCF Service. We have access to this via JavaScript because we are using the ScriptManager to expose the Service to page level. We get the response from the method and display it in a JavaScript alert window. We have no need to write any code-behind logic, as all of the functionality is being handled by the Service. We can expand this Web Application by creating more methods (Operation Contracts) in the Service, and then referencing them in the same way via JavaScript.

Our entire service code looks like this:

Thank you for reading our tutorial on AJAX Controls, we aim to provide the best AJAX tutorials. Learning AJAX in ASP.NET is easy and we hope you are getting your hands dirty by trying different things and coming up with your own ideas. If you have any questions or concerns, please feel free to suggest a tutorial or you can comment below in the comments section.

Download Source Files