{{ !articles[0].partner.isSponsoringArticle ? "Platinum" : "Portal" }} Partner
dotnet,jquery,visual studio,data access,odata,dev,wcf data services

Combining WCF Data Services, JSONP and jQuery

During Mike Flasko’s session at MIX11, Combining WCF Data Services, JSONP and jQueryhe 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 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: 

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’ve created a web form that will hold the JSONP call example. Here is the code that makes the call: 

<!DOCTYPE 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>
    <form id="form1" runat="server">
    <output id="result">
    <script type="text/javascript">
        function (response) { 
            $.each(response.d, function (index, value) {
                var div = document.createElement('div');
                div.innerHTML = value.Title;

Lets explore the web form code:
At first I use Microsoft CDN in order to retrieve the jQuery library. Then, I’ve created a 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:
Run Results


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 exists in other domains from your client side. In a follow up post I’ll show the same example using the new datajs library.

Published at DZone with permission of {{ articles[0].authors[0].realName }}, DZone MVB. (source)

Opinions expressed by DZone contributors are their own.

{{ tag }}, {{tag}},

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks