nik codes


JSON with Padding (JSONP) is a slight “hack” to allow for cross origin ajax requests. Instead of making requests the standard ajax way, leveraging XMLHttpRequest, JSONP techniques make requests by writing a <script> tag into the DOM with the src attribute set to the appropriate URL. Because browsers do not limit the origin of scripts loaded via the <script> tag, data, via JavaScript, can be loaded from any of the hundreds of API’s and endpoints that support JSONP.

Consuming JSONP services is ridiculously easy and has had support built into jQuery since version 1.2.

$(function () {
        dataType: 'jsonp',
        url: '',
        success: function (data) {

In this case, the data that is returned from the server is logged to the browser console, but any JavaScript could be executed.

Enabling JSONP on top of an existing JSON endpoint (server side) is fairly simple. It requires changing the HTTP response content type, and wrapping the resultant JSON string in a JavaScript function call (the padding part).

Unfortunately, ASP.NET MVC does not ship with JSONP support out of the box, but it is easy to add with the great extensibility points available in MVC. Here is an implementation of an MVC ActionResult which would enable any controller to begin to return proper JSONP results.

using System;
using System.Text;
using System.Web;
using System.Web.Mvc;
using System.Web.Script.Serialization;

namespace NikCodes.ActionResults
    public class JsonpResult : ActionResult
        public string CallbackFunction { get; set; }
        public Encoding ContentEncoding { get; set; }
        public string ContentType { get; set; }
        public object Data { get; set; }

        public JsonpResult(object data):this(data, null){}
        public JsonpResult(object data, string callbackFunction)
            Data = data;
            CallbackFunction = callbackFunction;

        public override void ExecuteResult(ControllerContext context)
            if (context == null) throw new ArgumentNullException("context");

            HttpResponseBase response = context.HttpContext.Response;

            response.ContentType = string.IsNullOrEmpty(ContentType) ? "application/x-javascript" : ContentType;

            if (ContentEncoding != null) response.ContentEncoding = ContentEncoding;

            if (Data != null)
                HttpRequestBase request = context.HttpContext.Request;

                var callback = CallbackFunction ?? request.Params["callback"] ?? "callback";

#pragma warning disable 0618 // JavaScriptSerializer is no longer obsolete
                var serializer = new JavaScriptSerializer();
                response.Write(string.Format("{0}({1});", callback, serializer.Serialize(Data)));
#pragma warning restore 0618

This action result simply takes in an object, serializes it using the standard MVC serialization method and wraps it up in a callback function. It supports jQuery’s JSONP implementation transparently. Using it couldn’t be simpler:

public ActionResult ActionMethod()
    var data = GetDataSomehow();
    return new JsonpResult(data);
    //constructor overload for overriding callback function
    //return new JsonpResult(data, "callback function"); 

Of course, cross origin resource sharing (CORS) is much more powerful that JSONP, and will ultimately replace it – but until then, or as long as we have < IE 10, we will still have to leverage this technique.

Download the code, try it out. Let me know if this is valuable enough to put on NuGet.

– By

Single Post Navigation

4 thoughts on “An ASP.NET MVC JSONP ActionResult

  1. arpad on said:

    Works great! I’ve been searching for some elegant solution and this is perfect.

  2. This was great! With a small number of modifications, I was able to get it to work within my MVC application for returning Views. Thanks a lot and keep up the good work!

  3. That worked great for me too..

Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s

%d bloggers like this: