Create an Ajax enabled WCF service and invoking it using client-side code

In this post I would like to show you again with a hands-on example how to create an Ajax enabled WCF Service and invoke it using the Ajax Script Manager web server control.

This is going to be a very simple example and it is for people who are not familiar with WCF and in general with SOA architecture. My main concern here is to show how you can invoke that service (service method) using client side code.

In a later post I will show you something similar using JQuery.

Let's move on with our hands on example.I will create a simple service that adds two numbers when called.In the web form we will have two textboxes and a button. The 2 textboxes will contain the parameters we will pass the to the WCF service.

1) Launch Visual Studio. I will use the ultimate edition. You can use the Web Developer Express edition. Create an empty website and choose C# as the development language

2) Add a new item to your site, a web form. Leave the default name. Inside the <body> tags add the following markup

    First Number:<input type="text" id="txtnuma"/><br />
    Second Number:<input type="text" id="txtnumb" /><br />
        <input type="button"  value="ADD" onclick="AddNums()"/>
 
        <br />
 
        <span id="additionres"></span>

3) Add a new item to your site, an Ajax-enabled WCF Service. Name it MyCalculatorService.svc. In the MyCalculatorService.cs add the following code.

 [OperationContract]
	public string Add(int num1, int num2)
        {
 
            int res;
 
            res = num1 + num2;
 
 
        return res.ToString();
        }

 

4) In the default.aspx page drag and drop a ScriptManager web server control. I use the Services tag to specify the path to the service.

  <asp:ScriptManager ID="ScriptManager1" runat="server">
 
<Services>
 
<asp:ServiceReference Path="~/MyCalculatorService.svc" />
        
</Services>
</asp:ScriptManager>

 

The whole markup for the default.aspx is

 

    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
 
        <Services>
 
        <asp:ServiceReference Path="~/MyCalculatorService.svc" />
        
        </Services>
        </asp:ScriptManager>
 
 
     First Number:<input type="text" id="txtnuma"/><br />
    Second Number:<input type="text" id="txtnumb" /><br />
        <input type="button"  value="ADD" onclick="AddNums()"/>
 
        <br />
 
        <span id="additionres"></span>
 
    </div>
    </form>

 

5) Now we need to add the code for the Javascript function (AddNums()) that will be invoked when the button is clicked and will pass the arguments to the remote service.This is the JavaScript code.You should place it in the head section of the page.

 

    <script type="text/javascript">
 
 
 
  function AddNums() {
 
 
 MyCalculatorService.Add($get("txtnuma").value, $get("txtnumb").value,onSuccess);
 
        }
 
 
   function onSuccess(result) {
 
 
        var myres = $get("additionres");
        myres.innerHTML = result;
 
      }
 
 
    </script>

 

We get the values from the textboxes using $get which is short for document.getElementByID . We do have another parameter(onSuccess method) which is required by our client. This method will be called asynchronously. This is called a callback method.

Then we add a new function onSuccess. This is going to receive a result which is the result of the Ajax-enabled WCF service method (Add). The result will be the string that our service returns. 

Then I just get the value that the Ajax-enabled WCF service returns and assign it to my <span> element that has an ID of "additionres".

6) Run your website and add 2 numbers in the textboxes. Click the button. If you have followed everything correctly so far, you will get a response back from the WCF Service.

Email me if you need the source code.

Hope it helps!!!

No Comments