Combining WCF Data Services, JSONP, and jQuery

Apr 25, 2011

2 min read

Javascript

Windows

.NET

Dev

WCF

Intermediate

jQuery

JSONP

entity-framework

by Gil Fink

Contributor

23k Views

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]

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)