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>
{
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.
