JSONP in SharePoint 2010 and .NET 3.5

Recently I need to implement JSONP in SharePoint 2010 to address a multi farms scenario. My service layer are built around WCF REST API in .NET 3.5 and in my production environment an upgrade to .NET 4 (that support JSONP via CrossDomainScriptAccessEnabled attribute of WebHttpBinding) or implement any kind of extension is not option.

So, the solution was write the JSONP string directly in the response.

The steps to do this are:

    1. Define an operation that does not return a value (void):
      [OperationContract]
      [WebGet(UriTemplate="jsonpFeed")]
      void GetJsonpFeeds();
    2. Implement the operation:
      • Use JavaScriptSerializer to obtain the JSON string.
      • Wrap the JSON string with callback function call and write the string directly to Http Response (previously is important to change the Response Content Type to application/json).
      public void GetJsonpFeeds()
      {
       JavaScriptSerializer s = new JavaScriptSerializer();
       HttpContext.Current.Response.ContentType = "application/json";
       HttpContext.Current.Response.Output
        .Write("jsonpcallback("+s.Serialize(GetFeeds())+")");
      }
    3. Active the ASP.NET Compatibility in WCF, this is important because if not activate it you can’t access to HttpContext.Current:
      • In the Web.Config (in SharePoint 2010 is activated by default):
        <system.serviceModel>
         <serviceHostingEnvironment 
          aspNetCompatibilityEnabled="true"/>
        </system.serviceModel>
      • And in the service class (via the AspNetCompatibilityRequeriments attribute):
        [AspNetCompatibilityRequirements(
         RequirementsMode=
         AspNetCompatibilityRequirementsMode.Allowed)]
        public class FeedService : IFeedService
    4. Finally implement the AJAX call in the client:
      $(document).ready(function() {
       $('#getFeedsButton').click(function() {
        $.ajax({
         url: 'http://localhost:1040/FeedService.svc/jsonpFeed',
          data: null,
          dataType: "jsonp",
          jsonp: "callback",
          jsonpCallback: "jsonpcallback"
         });
       });
      });
      
      function jsonpcallback(data) {
       $('#feedsList').html('');
        $.each(data, function(i, item) {
         $('#feedsList').append($('<li>' + item.Title + '</li>'));
        });
      }

Download the complete code here

About Rodolfo Finochietti

Uma's and Gino's father, and a programmer ;)

Posted on 06/28/2012, in ASP.NET and tagged . Bookmark the permalink. 2 Comments.

  1. Code is not available

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: