Combining WCF Data Services, JSONP, and jQuery

Gil Fink

5.00/5 (1 vote)

Apr 25, 2011

CPOL

2 min read

23354

A simple example of making a JSONP call to a WCF Data Service using jQuery.

Introduction

During Mike Flasko’s session at MIX11, he showed how to create a JSONP aware WCF Data Service with a JSONPSupportBehavior attribute that is available for download from MSDN code gallery (and is supposed to be a part of the Microsoft.Data.Services.Extensions namespace). In this post, I’ll show a simple example that uses the attribute and jQuery in order to make a JSONP cross domain call for a WCF Data Service.

Setting up the environment

First, I started by creating two different ASP.NET web applications. The first application includes the calling page and the second includes the WCF Data Service. Then, I created in the second web application an Entity Framework model and the WCF Data Service from that model. I also added the JSONPSupportBehavior.cs class that exists in the link I supplied earlier. The class includes the implementation of JSONPSupportBehavior which implements the WCF IDispatchMessageInspector interface. Also, it includes the JSONPSupportBehaviorAttribute which I use in my code. The code is simple and looks like:

[JSONPSupportBehavior] 
public class SchoolDataService : DataService<SchoolEntities>
{
  // This method is called only once to initialize service-wide policies.
  public static void InitializeService(DataServiceConfiguration config)
  {      
    config.SetEntitySetAccessRule("*", EntitySetRights.AllRead);      
    config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2;
  }
}

Making the JSONP call

In the second web application, I created a web form that will hold the JSONP call example. Here is the code that makes the call:

<!DOCTYPE html>
<html>
<head runat="server">
    <title>JSONP Call</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js" 
                type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <output id="result">
    </output>
    </form>
    <script type="text/javascript">
        $.getJSON('http://localhost:23330/SchoolDataService.svc/' + 
                  'Courses?$format=json&$callback=?', 
        function (response) { 
            $.each(response.d, function (index, value) {
                var div = document.createElement('div');
                div.innerHTML = value.Title;
                $('#result').append(div);
            })
        });        
    </script>
</body>
</html>

Let's explore the web form code: at first, I use Microsoft CDN in order to retrieve the jQuery library. Then, I create an HTML5 output element in order to append to it the output of the call. In the main script, I use jQuery’s getJSON function which is calling the WCF Data Service. Pay attention that in order to get a JSON response from the WCF Data Service, you need to use the $format=json query string parameter. After I retrieve the data, I iterate and create a div element for each course title that was retrieved. This is done in the success function that I wired in the getJSON function call. Here is the output of running the code:

Summary

In the post, I supplied a simple example of making a JSONP call to a WCF Data Service using jQuery. This sort of solution can help you to consume WCF Data Services that exist in other domains from your client side. In a follow up post, I’ll show the same example using the new datajs library.