JSONP in ASP.NET Web API Quick Get Started

S.Sathik Ali

5.00/5 (3 votes)

Aug 4, 2013

CPOL

2 min read

82338

This tip contains the basic introduction to the JSONP, Same-Origin and Cross-Origin Resource Sharing concepts and quick get started with JSONP in ASP.NET Web API.

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

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

Install the JSONP MediaTypeFormatter by entering the following command using NuGet Package Manager console in Visual Studio.
```
Install-Package WebApiContrib.Formatting.Jsonp
```

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);
        }
    }

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 }
            );

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 }
            );