Consuming a WCF Service with Client-Side AJAX in C#

Category: AJAX

Consuming WCF Service using Client-Side AJAX in ASP.NET 3.5 and C#

Introduction

In this article, we will be looking at how we can use AJAX to implement a WCF Service, so that it's methods are available to client-side JavaScript. This is an extremely powerful tool, as we are able to access the WCF Service almost instantaneously, without posting back a page or waiting several seconds. In this example, we will create a basic ASPX page with a HTML form that will make use of JavaScript calls to the WCF Service we will create.

What we will learn in this article:

  • How to Create an AJAX-Enabled WCF Service in Visual Studio.NET 2008;
  • How to use JavaScript to make calls to the WCF Service.

Getting Started with our WCF Service
Let's get started by creating a new Web Application in Visual Studio 2008, and because we're working in ASP.NET 3.5, we have AJAX already built-in. The first thing to do is right-click the project in Solution Explorer, and choose to Add > New Item.. AJAX-enabled WCF Service. You should be presented with something like this:

using System;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;

namespace WCF_UI
{
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service1
{
// Add [WebGet] attribute to use HTTP GET
[OperationContract]
public void DoWork()
{
// Add your operation implementation here
return;
}

// Add more operations here and mark them with [OperationContract]
}
}
}

Because Visual Studio will add the necessary references to our project and Web.config, we don't need to worry about these.
Next, we will create two methods, both with the [OperationContract] attribute. To demonstrate access to the methods, we will create a method to add two numbers together, and also one to subtract a number from another:

[OperationContract]
public Double Add(Double num1, Double num2)
{
return num1 + num2;
}
[OperationContract]
public Double Subtract(Double num1, Double num2)
{
return num1 - num2;
}

If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!

This is all for our Service. Now we can move to our ASPX page, and we will add a ScriptManager to the page. We will also need to reference the Service we just created, in order for us to access it via AJAX:

We just add a Service Reference to the Service we just created, which will allow us to access the methods of this Service within our code. Next, we will create a basic HTML form to allow the user to input numbers to use the addition method in our WCF Service:

+ =


Notice the onclick attribute we give to the button. This will reference a JavaScript function we will add to the page. Create a JavaScript block at the bottom of the page, and add the following:

}

function onAddSuccess(result) {
document.getElementById('addAnswer').value = result;
}

Server Intellect offers Windows Hosting Dedicated Servers at affordable prices. I'm very pleased!

Here, we are calling the Service method to make the addition, and if successful, we output the answer to the answer text box. All of this is done instantaneously, without any postbacks, using JavaScript and the WCF Service. This is because the ScriptManager is handling all of our Asynchronous calls for us, and makes it extremely easy for us to implement such functionality.
We can expand this further by implementing the second method, to include subtraction. First, add more textboxes and a second button to the HTML Form:

- =


Again, notice the onclick attribute, calling a JavaScript function, which will look something like this:

function DoSubtraction() {
Service1.Subtract(document.getElementById('subtractNum1').value, document.getElementById('subtractNum2').value, onSubtractSuccess);
}

function onSubtractSuccess(result) {
document.getElementById('subtractAnswer').value = result;
}

Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!

So we create a similar function as the addition one, but instead, call the Subtract method of the WCF Service.
We use no code-behind, as all functionality is on the front-end and is executed in real-time. Our ASPX page will look something like this:


..


+ =






- =









}
function DoSubtraction() {
Service1.Subtract(document.getElementById('subtractNum1').value, document.getElementById('subtractNum2').value, onSubtractSuccess);
}

function onAddSuccess(result) {
document.getElementById('addAnswer').value = result;
}
function onSubtractSuccess(result) {
document.getElementById('subtractAnswer').value = result;
}

When this page is run, you will see a basic HTML form, but when numbers are inserted into the two number fields and submit is clicked - you receive the calculation instantly. The application feels just like a desktop application, or as if it's written purely in JavaScript.



Download Project Source - Enter your Email to be emailed a link to download the Full Source Project used in this Tutorial!



100% SPAM FREE! We will never sell or rent your email address!