JSONP in ASP.NET Web API Quick Get Started

Introduction

While searching the web to get started with JSONP in ASP.NET Web API, I was not able to find a real quick start guide. Rather, I found many discussions and detailed articles. So I thought of collating the information from across the web to provide a real simple quick start guide on JSONP in ASP.NET Web API for beginners.

Background

This is a quick get started with JavaScript Object Notation with Padding (JSONP) in ASP.NET Web API to get data from different domains and also explain about the JSONP, Same-Origin and Cross-Origin Resource Sharing concepts.

Same-Origin Policy Vs. Cross-Origin Resource Sharing (CORS)

Same-origin policy is a concept in browser-side programming languages (such as JavaScript) which allows accessing resources in the same site (same domain) but preventing accessing resources in different domains.

Cross-origin resource sharing (CORS) is a mechanism that allows JavaScript on a web page to make XMLHttpRequests to another domain, not the domain the JavaScript originated from. Such "cross-domain" requests would otherwise be forbidden by web browsers, per the same origin security policy. CORS defines a way in which the browser and the server can interact to determine whether or not to allow the cross-origin request.

What and Why JSONP?

AJAX (XMLHttpRequest) doesn’t allow cross domain communication due to security reasons. JavaScript Object Notation with Padding (JSONP) is a way to grab JSON data from external domains. It’s a better and cleaner alternative to other approaches (web proxy and IFrame) to get data from an external domain / CORS (Cross-Origin Resource Sharing).

References

• http://www.codeproject.com/Articles/42641/JSON-to-JSONP-Bypass-Same-Origin-Policy
• http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

JSONP (JavaScript Object Notation with Padding) = JSON data padded with JavaScript function name

callbackFunc({ "firstName": "Sathik Ali", "lastName": "S" }); 

Enable AJAX Request to Get JSONP Data

We need to set callback and data type attributes of Ajax request as highlighted below:

<script type="text/javascript">
$("#getJsonp").click(function () {
$.ajax({
       	type: 'GET',
              url: "http://localhost:5511/api/values/GetUserName/1",
              callback: 'callbackFunc',
              contentType: "application/json",
              dataType: 'jsonp'
              })
});
 
function callbackFunc(resultData) {
alert(resultData);
}
</script>

Enable ASP.NET Web API to Return JSONP Data

1. Install the JSONP MediaTypeFormatter by entering the following command using NuGet Package Manager console in Visual Studio.

   Install-Package WebApiContrib.Formatting.Jsonp
   

2. Add a FormatterConfig class in App_Start folder:

       public class FormatterConfig
       {
           public static void RegisterFormatters(MediaTypeFormatterCollection formatters)
           {
               var jsonFormatter = formatters.JsonFormatter;
               jsonFormatter.SerializerSettings = new JsonSerializerSettings
               {
                   ContractResolver = new CamelCasePropertyNamesContractResolver()
               };
    
               // Insert the JSONP formatter in front of the standard JSON formatter.
               var jsonpFormatter = new JsonpMediaTypeFormatter(formatters.JsonFormatter);
               formatters.Insert(0, jsonpFormatter);
           }
       }

3. Add the following routes in /App_Start/RouteConfig.cs:

   routes.MapHttpRoute(
                   name: "DefaultApi",
                   routeTemplate: "api/{controller}/{id}/{format}",
                   defaults: new { id = RouteParameter.Optional, format = RouteParameter.Optional }
               );

4. Add the following line in the Application_Start method of Global.ascx.cs:

   FormatterConfig.RegisterFormatters(GlobalConfiguration.Configuration.Formatters);

Points of Interest

If you want your routes mapping with action, please specify the following in App_Start/RouteConfig.cs:

routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{action}/{id}/{format}",
                defaults: new { id = RouteParameter.Optional, format = RouteParameter.Optional }
            );

References

• http://stevenhollidge.blogspot.in/2013/03/how-to-return-jsonp-from-webapi.html
• https://github.com/WebApiContrib/WebApiContrib.Formatting.Jsonp