Something on .net: A Beginner's Guide for "Using WCF in JavaScript using Asp.net Ajax"

Development Platform
Introduction
Using Ajax-Enabled WCF Service item template
Using Service Interface defined in a class library
Configure the Web Application To Use TODO Service
Using Service In JavaScript
Summery
References

Development Platform

Visual Studio 2008 SP1
Dot.net Framework 3.5 SP1
Asp.net Ajax
IIS7 or VS Integrated Web Server [WCF and SVS file configured]
Windows Vista

Introduction

WCF (Windows communication foundation) added lot of new capability in Microsoft application development platform, particularly in case of how applications communicate to each other. In this article we are going to see how WCF can be used directly from clients JavaScript code. Its a very cool future provided by asp.net Ajax. In this article we are not going to cover every theory about WCF internals rather we only remained focused on how to use the service directly from JavaScript. So no behind the scene stuff of how asp.net or dot net runtime manage this feature.

To demonstrate the ideas and facts we are going create a demo solution with two projects. So with no time waste create a blank solution and save it. Now add a class library project to the solution. Name the class library as "ServiceLibrary". Now Add another web application project to the solution and name it as WEBUI. We are going to see two approach to add WCF service that can be consumed from JavaScript.

Using Ajax-Enable WCF Service item template
Using Service Interface defined in a class library

Using Ajax-Enabled WCF Service item template

Its a very strait forward way to use WCF service in JavaScript. Right Click on the web application project and select add new item. Select Ajax-Enabled WCF Service item template name it as "HelloWorldService.svc" and click ok. Wizard will add a HelloWorldService.svc file to solution as expected. This file have a code behind file as well. If you open the HelloWorldService.svc in xml file editor you will see a markup like this

<%@ ServiceHost Language="C#" Debug="true" Service="WebUI.HelloWorldService" 
CodeBehind="HelloWorldService.svc.cs" %>

And if you open the code behind file you will se code some thing like this

namespace WebUI
{
    [ServiceContract(Namespace = "")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class HelloWorldService
    {
        // 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]
    }
}

Visual Studio 2008 automatically add the necessary configuration for you in the web.config file so no need to configure any thing in web.config. Now go ahead and add a method like HelloWorld() which returns a string "HelloWorld" and add [OperationContract] method attribute to the method. we will explain what the attributes are for later in this article. Now add a page to web application project and name it as "HelloWorldTest.aspx". Drag drop a script manager item from visual studio tool box. Inside the ScriptManager tag add service reference of the service. Bellow a example code is give.

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

Now add a button and a textbox to the page and on button click use a JavaScript function to call the service. when you will write the service call function Visual Studio 2008 Html Editor will provide intellisense to write necessary function call. Full code of html part is give bellow.

<form id="form1" runat="server">
<div>
    <script language="javascript" type="text/javascript">
        function GetValueFromServer() {
            HelloWorldService.HelloWorld(onSuccess, onFailure);
        }

        function onSuccess(result) {
            document.getElementById('txtValueContainer').value = result;
        }

        function onFailure(result) {
            window.alert(result);
        }
    </script>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <asp:ServiceReference Path="~/HelloWorldService.svc" />
        </Services>
    </asp:ScriptManager>
    <input id="btnServiceCaller" type="button" value="Get Value" onclick="GetValueFromServer()"; />
    <input id="txtValueContainer" type="text" value="" />
</div>
</form>

Note that when calling the service we have passed two method one is for callback and other one is for error callback. If we need to pass any parameters to the function parameters will go first and then the call back. So if we have a function name getvalue which take two string parameters as argument we are going to call the function as [NameSpaceName].[ServiceName].getvalue("value one","value two",on_success,on_error); where on_sucess and on_error are callback and error callback respectively.

Using Service Interface defined in a class library

So we have looked how to use a Ajax-Enabled WCF Service using item template. Now we are going to see more traditional WCF Service implementation and we are also going to see how we can expose this service for Asp.net Ajax. when we created the class library project by default its not added with the service model and runtime serialization support which is necessary to run WCF. So we got to add the necessary service references. so go ahead and right client on class library project and select add reference and then select the references.

System.Runtime.Serialization

System.ServiceModel

In this phase we are going to use a TODO Management example to demonstrate the whole idea. Add A Service Based Database and then create a TODO Table with ID,Description and Status Field. Now Add A LinkToSQL class file from item template. Drag Drop the table TODO from database to link to SQL Class File designer. Now Click on the designer surface and from property window change the Serialization Mode to Unidirectional. Now our designer generated Link to SQL classes are ready to use for WCF. If you want to use custom user defined types you must set [DataContract] class attribute to your class and you must add [DataMember] property attribute to each property of the class you want to expose to WCF.

Now we are going to add a service interface like this

namespace ServiceLibrary
{
    [ServiceContract(Namespace = "ServiceLibrary")]
    interface IToDoService
    {
        [OperationContract]
        ToDo GetToDo(long ID);
        [OperationContract]
        ToDo AddToDo(ToDo toDo);
        [OperationContract]
        bool DeleteToDo(ToDo todo);
        [OperationContract]
        ToDo UpdateToDo(ToDo todo);
        [OperationContract]
        List<ToDo> GetAllToDo();
    }
}

Note that we have mentioned a name space in side the ServiceContract interface Attribute. This is very important. we are going to use this name as the service name in side the JavaScript to access the services. Now we are going to add the implementation to this service interface the code is given bellow. Please note that in bellow code i have used [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] class attribute, this is must requirement for exposing the service as asp.net Ajax enabled WCF service.

namespace ServiceLibrary
{
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class ToDoService : IToDoService
    {
        #region IToDoService Members
        public ToDo GetToDo(long ID)
        {
            DataClasses1DataContext context = new DataClasses1DataContext();
            var toDos = from p in context.ToDos
                        where p.ID == ID
                        select p;
            List<ToDo> listTodos =  toDos.ToList();
            if (listTodos != null && listTodos.Count > 0)
            {
                return listTodos[0];
            }
            else
            {
                return null;
            }
        }

        //all the methods is not shown

        #endregion
    }
}

Configure the Web Application To Use TODO Service

Now that we have defined all the necessary stuff to run our TODO Application its time to expose the service to the client as a asp.net Ajax enabled WCF service. For this we are going to add a Ajax-Enabled WCF Service .svc file. And we will get rid of the code behind file. or we can add a xml file or text file and then rename it to ToDoService.svc. Open it with xml editor and put directive like bellow

<%@ ServiceHost Language="C#" Debug="true" Service="ServiceLibrary.ToDoService" %>

Now we are going to put necessary configuration to run this service in web.config, the code is given bellow

<system.serviceModel>
        <behaviors>
   <endpointBehaviors>
    <behavior name="AspNetAjaxBehavior">
     <enableWebScript />
    </behavior>
    <behavior name="WebUI.HelloWorldServiceAspNetAjaxBehavior">
     <enableWebScript />
    </behavior>
   </endpointBehaviors>
  </behaviors>
        <serviceHostingEnvironment aspNetCompatibilityEnabled="true" />
        <services>
   </service>
   <service name="ServiceLibrary.ToDoService">
    <endpoint behaviorConfiguration="AspNetAjaxBehavior" binding="webHttpBinding"
     contract="ServiceLibrary.IToDoService" />
   </service>
   <service name="WebUI.HelloWorldService">
    <endpoint address="" behaviorConfiguration="WebUI.HelloWorldServiceAspNetAjaxBehavior"
     binding="webHttpBinding" contract="WebUI.HelloWorldService" />
   </service>
  </services>
    </system.serviceModel>

Now right click on the file and select view in browser to see the service is up and running well. Few things must be mentioned before moving to next phase. You must add serviceHostingEnvironment and set its aspNetCompatibilityEnabled="true" to be able to use wcf service in asp.net with its features like httpContext, Session etc.

Using Service In JavaScript

Now use the service just like HelloWorldService we have previously used. Bellow I have given few example code to make things clear. Bellow the ScriptManager Mark up is given. Note that we have added a clientServiceHelper.js file. We have put all the client to WCF communication JavaScript functions in that file.

<asp:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Path="~/Script/ClientServiceHeler.js" />
            </Scripts>
            <Services>
                <asp:ServiceReference Path="~/ToDoService.svc" />
            </Services>
        </asp:ScriptManager>

We have used asp.net Ajax client side object oriented model to write bellow JavaScript client code which are the part of clientServiceHelper.js.

Type.registerNamespace("ServiceClients");

ServiceClients.ToDoClient = function() {
}

ServiceClients.ToDoClient.prototype = {

    AddToDo: function(todo, callback, errorCallBack) {
        ServiceLibrary.IToDoService.AddToDo(todo, callback, errorCallBack);
    },

    DeleteToDo: function(todo, callback, errorCallBack) {
        ServiceLibrary.IToDoService.DeleteToDo(todo, callback, errorCallBack);
    },

    UpdateToDo: function(todo, callback, errorCallBack) {
        ServiceLibrary.IToDoService.UpdateToDo(todo, callback, errorCallBack);
    },

    GetAllToDo: function(callback, errorCallBack) {
        ServiceLibrary.IToDoService.GetAllToDo(callback, errorCallBack);
    },

    dispose: function() {
        //disposed
    }
}

ServiceClients.ToDoClient.registerClass('ServiceClients.ToDoClient', null, Sys.IDisposable)

// Notify ScriptManager that this is the end of the script.
if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Summery

In this article we have seen how we can use Ajax-Enable WCF Service item template. The we have seen how we can use a service interface based wcf service. we have also seen how to configure web.config to use the services, last of all we have seen how we can add service reference in ScriptManager. Few things must be mentioned before ending this article we can also add service reference in c# code below a simple code example is given.

ScriptManager manager = ScriptManager.GetCurrent(Page);
ServiceReference reference = new ServiceReference("ToDoService.svc");
manager.Services.Add(reference);

If the beginners encounter problem of not understanding any particular portion of the article please drop a message. You can learn the ABC of WCF here. If you have any difficulty configuring WCF in IIS please see this article here.