Introduction

A couple weeks ago I was asked to start looking into the capabilites of jQuery at work.  Let’s be honest here, I was pumped about this opportunity.  There’s been lots of buz around jQuery and I’d been looking for a chance to get my hands dirty.  While the syntax can initially seem rather cryptic, it really is well worth the effort to sit down and learn it.  It’s an invaluable tool to have in your arsenal if you’re doing any type of web development work.

Doing basic stuff in jQuery is easy $(“#myDivId).appendTo(“Hello world”); .  However, I found figuring out the proper syntax for making WCF calls with complex objects a challenge.  Mostly this was because of a serious deficit of good examples.  This post is an attempt to capture what I learned for anyone who’s interested.  Here I’ll show you how to configure each piece of an Asp.Net web application to support making Ajax calls with jQuery.  Hopefully this will save you some of the headaches that I went through. 

When talking to WCF services through jQuery there are several pieces that need to fit together to make everything work:

1. The WCF Service
2. The Web.config
3. The jQuery code
4. Also any objects that will be passed around must be tagged with the proper attibutes

Say we have a basic asp.net project that looks like this:

The idea is we want Javascript that lives in the Default.js file to be able to talk to a WCF Service (PeopleService.svc) via jQuery.  Notice that I’ve included the jQuery and json2 javascript files as well. 

WCF Service

Starting from the bottom, the first step is properly configuring your WCF Service.  In this case I’ve seperated the service into an interface and an implementation.  Mostly this is because that’s the way that Visual Studio adds it to a project by default and I want to make this easy for people to follow.  Here’s the Interface:

using System.Collections.Generic;
using System.Net.Security;
using System.ServiceModel;
using System.ServiceModel.Web;

namespace JPPete.Jquery.Intro.WebServices
{
    [ServiceContract(Namespace = "http://jppete.com/jquery/intro",
      Name = "IPeopleService",
      SessionMode = SessionMode.NotAllowed,
      ProtectionLevel = ProtectionLevel.None)]
    public interface IPeopleService
    {
        [OperationContract]
        [WebInvoke(
            Method = "POST",
            BodyStyle = WebMessageBodyStyle.Wrapped,
            ResponseFormat = WebMessageFormat.Json)]
        string GetStatus();

        [OperationContract]
        [WebInvoke(
            Method = "POST",
            BodyStyle = WebMessageBodyStyle.Wrapped,
            ResponseFormat = WebMessageFormat.Json)]
        void AddPerson(Person person);

        [OperationContract]
        [WebInvoke(
            Method = "POST",
            BodyStyle = WebMessageBodyStyle.Wrapped,
            ResponseFormat = WebMessageFormat.Json)]
        void AddPeople(IList<Person> people);

        [OperationContract]
        [WebInvoke(
            Method = "POST",
            BodyStyle = WebMessageBodyStyle.Wrapped,
            ResponseFormat = WebMessageFormat.Json)]
        IList<Person> GetPeople();
    }
}

The key here is adding the WebInvoke attribute to your interface methods.  This adds additional metadata to your service that tells it what to expect from callers (see documentation).  In our case we want the service to be able to interpret JSON messages.

Here is the implementation: 

using System.Collections.Generic;
using System.ServiceModel.Activation;

namespace JPPete.Jquery.Intro.WebServices
{
    [AspNetCompatibilityRequirements(
        RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class PeopleService : IPeopleService
    {
        private static List<Person> _people;
        /// <summary>
        /// List of People objects for demo purposes
        /// </summary>
        private static List<Person> People
        {
            get
            {
                if (_people == null)
                {
                    _people = new List<Person>
                      {
                          new Person
                          {
                              Age = 20,
                              FirstName = "Joe",
                              LastName = "Smith"
                          },
                          new Person
                          {
                              Age = 25,
                              FirstName = "John",
                              LastName = "Peterson"
                          },
                          new Person
                          {
                              Age = 60,
                              FirstName = "Joan",
                              LastName = "Smith"
                          }
                      };
                }
                return _people;
            }
        }

        #region IPeopleService Members

        /// <summary>
        /// Gets the status of the service
        /// </summary>
        /// <returns></returns>
        public string GetStatus()
        {
            return "Ready";
        }

        /// <summary>
        /// Adds the input person to the local collection
        /// </summary>
        /// <param name="person"></param>
        public void AddPerson(Person person)
        {
            People.Add(person);
        }

        /// <summary>
        /// Adds the input people to the local collection
        /// </summary>
        /// <param name="people"></param>
        public void AddPeople(IList<Person> people)
        {
            People.AddRange(people);
        }

        /// <summary>
        /// Gets the list of people from the service
        /// </summary>
        /// <returns></returns>
        public IList<Person> GetPeople()
        {
            return People;
        }

        #endregion
    }
}

Take note of the AspNetCompatibilityRequirements attribute.  This is essentially tagging your WCF Service as a web service that is compatible with asp.net, which opens it up to ajax requests and gives you access to HTTP Session State and several other Asp.Net features.  Keep in mind that tagging a WCF service with this attribute basically makes it behave like an asmx web service.  This means that it is available only via HTTP (see documentation ).

Web.Config

<system.serviceModel>
		<behaviors>
			<serviceBehaviors>
				<behavior name="JPPete.Jquery.Intro.WebServices.PeopleServiceBehavior">
					<serviceMetadata httpGetEnabled="true"/>
					<serviceDebug includeExceptionDetailInFaults="false"/>
				</behavior>
			</serviceBehaviors>
			<endpointBehaviors>
				<behavior name="PersonServiceEndpointBehavior">
					<webHttp/>
				</behavior>
			</endpointBehaviors>
		</behaviors>
		<services>
			<service behaviorConfiguration="JPPete.Jquery.Intro.WebServices.PeopleServiceBehavior" name="JPPete.Jquery.Intro.WebServices.PeopleService">
				<endpoint address="" binding="webHttpBinding" contract="JPPete.Jquery.Intro.WebServices.IPeopleService" behaviorConfiguration="PersonServiceEndpointBehavior">
					<identity>
						<dns value="localhost"/>
					</identity>
				</endpoint>
			</service>
		</services>
	</system.serviceModel>

Setting up the Web.Config for basic scenarios is pretty straightforward.  There are only a couple modifications you need to make to the default ServiceModel entries that get created automatically in Visual Studio.  First, you need to add an endpointBehavior section.  Second, you need to add a behaviorConfiguration attribute in your service>endpoint element.  Finally, you need to set the endpoint binding attribute to webHttpBinding (this works with the WebInvoke attribute we applied to the interface methods above).  Some parts of this will vary considerably based on your specifc scenario, but this should be enough to get you started.

 Calling the service with jQuery

 Where this got hairy for me was figuring out the syntax for jQuery.  Below are several examples of how you would consume these services using jQuery:

Calling GetStatus()

function getStatus() {
    //Make ajax request...
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "WebServices/PeopleService.svc/GetStatus",
        processData: false,
        dataType: "json",
        //If the call succeeds
        success:
        function(response) {
            alert(
                'Ping was successfull.  The service status is: ' + response.GetStatusResult);
        },
        //If the call fails
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.responseText);
        }
    });
}

Calling AddPerson()

function addPerson() {
    var person = {
        "person":
            {
                "FirstName": "Jane",
                "LastName": "Doe",
                "Age": 25
            }
        };

    //Make ajax request...
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "WebServices/PeopleService.svc/AddPerson",
        processData: false,
        dataType: "json",
        data: JSON.stringify(person),
        //If the call succeeds
        success:
        function(response) {
            alert('Person added successfully');
        },
        //If the call fails
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.responseText);
        }
    });
}

Calling AddPeople() 

function addPeople() {
    var person1 =
        {
            "FirstName": "Jane",
            "LastName": "Doe",
            "Age": 25
        };

    var person2 =
        {
            "FirstName": "John",
            "LastName": "Doe",
            "Age": 25
        };

    var people = new Array(person1, person2);

    var peopleInput = { "people": people };

    //Make ajax request...
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "WebServices/PeopleService.svc/AddPeople",
        processData: false,
        dataType: "json",
        data: JSON.stringify(peopleInput),
        //If the call succeeds
        success:
        function(response) {
            alert('People added successfully');
        },
        //If the call fails
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.responseText);
        }
    });

}

Calling GetPeople()

function getPeople() {
    //Make ajax request...
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "WebServices/PeopleService.svc/GetPeople",
        processData: false,
        dataType: "json",
        //If the call succeeds
        success:
        function(response) {
            //loop and display the results
            $.each(response.GetPeopleResult, function(i) {
                alert(
                    "FirstName: " + this.FirstName +
                    " LastName: " + this.LastName +
                    " Age: " + this.Age);
            });
        },
        //If the call fails
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.responseText);
        }
    });
}

Once you nail the sytax here everything falls into place. 

Person.cs

For those who aren’t familiar with WCF you have to tag your object with the DataContractAttribute and all of the members that you want WCF to translate with the DataMemberAttribute.

using System.Runtime.Serialization;

namespace JPPete.Jquery.Intro
{
    [DataContract]
    public class Person
    {
        [DataMember]
        public string FirstName { get; set; }
        [DataMember]
        public string LastName { get; set; }
        [DataMember]
        public int Age { get; set; }
    }
}
 

Hope this helps someone.  I’ll look forward to any comments or feedback.  Happy coding!