JSONP with ASP.NET Web API

Certainly Brian's answer is the correct one, however if you already are using the Json.Net formatter, which gives you pretty json dates and faster serialization, then you can't just add a second formatter for jsonp, you have to combine the two. It is a good idea to use it anyway, as Scott Hanselman has said that the release of ASP.NET Web API is going to use the Json.Net serializer by default.

public class JsonNetFormatter : MediaTypeFormatter
    {
        private JsonSerializerSettings _jsonSerializerSettings;
        private string callbackQueryParameter;

        public JsonNetFormatter(JsonSerializerSettings jsonSerializerSettings)
        {
            _jsonSerializerSettings = jsonSerializerSettings ?? new JsonSerializerSettings();

            // Fill out the mediatype and encoding we support
            SupportedMediaTypes.Add(new MediaTypeHeaderValue("application/json"));
            Encoding = new UTF8Encoding(false, true);

            //we also support jsonp.
            SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/javascript"));
            MediaTypeMappings.Add(new UriPathExtensionMapping("jsonp", "application/json"));
        }

        public string CallbackQueryParameter
        {
            get { return callbackQueryParameter ?? "jsoncallback"; }
            set { callbackQueryParameter = value; }
        }

        protected override bool CanReadType(Type type)
        {
            if (type == typeof(IKeyValueModel))
                return false;

            return true;
        }

        protected override bool CanWriteType(Type type)
        {
            return true;
        }

        protected override Task<object> OnReadFromStreamAsync(Type type, Stream stream, HttpContentHeaders contentHeaders,
            FormatterContext formatterContext)
        {
            // Create a serializer
            JsonSerializer serializer = JsonSerializer.Create(_jsonSerializerSettings);

            // Create task reading the content
            return Task.Factory.StartNew(() =>
            {
                using (StreamReader streamReader = new StreamReader(stream, Encoding))
                {
                    using (JsonTextReader jsonTextReader = new JsonTextReader(streamReader))
                    {
                        return serializer.Deserialize(jsonTextReader, type);
                    }
                }
            });
        }

        protected override Task OnWriteToStreamAsync(Type type, object value, Stream stream, HttpContentHeaders contentHeaders,
            FormatterContext formatterContext, TransportContext transportContext)
        {
            string callback;
            var isJsonp = IsJsonpRequest(formatterContext.Response.RequestMessage, out callback);

            // Create a serializer
            JsonSerializer serializer = JsonSerializer.Create(_jsonSerializerSettings);

            // Create task writing the serialized content
            return Task.Factory.StartNew(() =>
            {
                using (JsonTextWriter jsonTextWriter = new JsonTextWriter(new StreamWriter(stream, Encoding)) { CloseOutput = false })
                {
                    if (isJsonp)
                    {
                        jsonTextWriter.WriteRaw(callback + "(");
                        jsonTextWriter.Flush();
                    }

                    serializer.Serialize(jsonTextWriter, value);
                    jsonTextWriter.Flush();

                    if (isJsonp)
                    {
                        jsonTextWriter.WriteRaw(")");
                        jsonTextWriter.Flush();
                    }
                }
            });
        }

        private bool IsJsonpRequest(HttpRequestMessage request, out string callback)
        {
            callback = null;

            if (request.Method != HttpMethod.Get)
                return false;

            var query = HttpUtility.ParseQueryString(request.RequestUri.Query);
            callback = query[CallbackQueryParameter];

            return !string.IsNullOrEmpty(callback);
        }
    }

Here is an updated version of the JsonpMediaTypeFormatter for use with WebAPI RC:

public class JsonpMediaTypeFormatter : JsonMediaTypeFormatter
{
    private string callbackQueryParameter;

    public JsonpMediaTypeFormatter()
    {
        SupportedMediaTypes.Add(DefaultMediaType);
        SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/javascript"));

        MediaTypeMappings.Add(new UriPathExtensionMapping("jsonp", DefaultMediaType));
    }

    public string CallbackQueryParameter
    {
        get { return callbackQueryParameter ?? "callback"; }
        set { callbackQueryParameter = value; }
    }

    public override Task WriteToStreamAsync(Type type, object value, Stream stream, HttpContentHeaders contentHeaders, TransportContext transportContext)
    {
        string callback;

        if (IsJsonpRequest(out callback))
        {
            return Task.Factory.StartNew(() =>
            {
                var writer = new StreamWriter(stream);
                writer.Write(callback + "(");
                writer.Flush();

                base.WriteToStreamAsync(type, value, stream, contentHeaders, transportContext).Wait();

                writer.Write(")");
                writer.Flush();
            });
        }
        else
        {
            return base.WriteToStreamAsync(type, value, stream, contentHeaders, transportContext);
        }
    }


    private bool IsJsonpRequest(out string callback)
    {
        callback = null;

        if (HttpContext.Current.Request.HttpMethod != "GET")
            return false;

        callback = HttpContext.Current.Request.QueryString[CallbackQueryParameter];

        return !string.IsNullOrEmpty(callback);
    }
}

johperl, Thomas. The answer given by Peter Moberg above should be correct for the RC version as the JsonMediaTypeFormatter that he inherits from uses the NewtonSoft Json serializer already, and so what he has should work with out any changes.

However, why on earth are people still using out parameters, when you could just do the following

public override Task WriteToStreamAsync(Type type, object value, Stream stream, HttpContentHeaders contentHeaders, TransportContext transportContext)
        {
            var isJsonpRequest = IsJsonpRequest();

            if(isJsonpRequest.Item1)
            {
                return Task.Factory.StartNew(() =>
                {
                    var writer = new StreamWriter(stream);
                    writer.Write(isJsonpRequest.Item2 + "(");
                    writer.Flush();
                    base.WriteToStreamAsync(type, value, stream, contentHeaders, transportContext).Wait();
                    writer.Write(")");
                    writer.Flush();
                });
            }

            return base.WriteToStreamAsync(type, value, stream, contentHeaders, transportContext);
        }

        private Tuple<bool, string> IsJsonpRequest()
        {
            if(HttpContext.Current.Request.HttpMethod != "GET")
                return new Tuple<bool, string>(false, null);

            var callback = HttpContext.Current.Request.QueryString[CallbackQueryParameter];

            return new Tuple<bool, string>(!string.IsNullOrEmpty(callback), callback);
        }

Rick Strahl's implementation worked best for me with RC.

JSONP only works with Http GET request. There is a CORS support in asp.net web api which works well with all http verbs.

This article may be helpful to you.

Here's an updated version with several improvements, which works with the RTM version of Web APIs.

• Selects the correct encoding, based on the request's own Accept-Encoding headers. The new StreamWriter() in the previous examples would simply use UTF-8. The call to base.WriteToStreamAsync may use a different encoding, resulting in corrupted output.
• Maps JSONP requests to the application/javascript Content-Type header; the previous example would output JSONP, but with the application/json header. This work is done in the nested Mapping class (cf. Best content type to serve JSONP?)
• Foregoes the construction and flushing overhead of a StreamWriter and directly gets the bytes and writes them to the output stream.
• Instead of waiting on a task, use the Task Parallel Library's ContinueWith mechanism to chain several tasks together.

Code:

public class JsonpMediaTypeFormatter : JsonMediaTypeFormatter
{
  private string _callbackQueryParameter;

  public JsonpMediaTypeFormatter()
  {
    SupportedMediaTypes.Add(DefaultMediaType);
    SupportedMediaTypes.Add(new MediaTypeHeaderValue("application/javascript"));

    // need a lambda here so that it'll always get the 'live' value of CallbackQueryParameter.
    MediaTypeMappings.Add(new Mapping(() => CallbackQueryParameter, "application/javascript"));
  }

  public string CallbackQueryParameter
  {
    get { return _callbackQueryParameter ?? "callback"; }
    set { _callbackQueryParameter = value; }
  }

  public override Task WriteToStreamAsync(Type type, object value, Stream writeStream, HttpContent content,
                                          TransportContext transportContext)
  {
    var callback = GetCallbackName();

    if (!String.IsNullOrEmpty(callback))
    {
      // select the correct encoding to use.
      Encoding encoding = SelectCharacterEncoding(content.Headers);

      // write the callback and opening paren.
      return Task.Factory.StartNew(() =>
        {
          var bytes = encoding.GetBytes(callback + "(");
          writeStream.Write(bytes, 0, bytes.Length);
        })
      // then we do the actual JSON serialization...
      .ContinueWith(t => base.WriteToStreamAsync(type, value, writeStream, content, transportContext))

      // finally, we close the parens.
      .ContinueWith(t =>
        {
          var bytes = encoding.GetBytes(")");
          writeStream.Write(bytes, 0, bytes.Length);
        });
    }
    return base.WriteToStreamAsync(type, value, writeStream, content, transportContext);
  }

  private string GetCallbackName()
  {
    if (HttpContext.Current.Request.HttpMethod != "GET")
      return null;
    return HttpContext.Current.Request.QueryString[CallbackQueryParameter];
  }

  #region Nested type: Mapping

  private class Mapping : MediaTypeMapping
  {
    private readonly Func<string> _param; 

    public Mapping(Func<string> discriminator, string mediaType)
      : base(mediaType)
    {
      _param = discriminator;
    }

    public override double TryMatchMediaType(HttpRequestMessage request)
    {
      if (request.RequestUri.Query.Contains(_param() + "="))
        return 1.0;
      return 0.0;
    }
  }

  #endregion
}

I'm aware of the "hackiness" of the Func<string> parameter in the inner class constructor, but it was the fastest way to get around the problem it solves -- since C# only has static inner classes, it can't see the CallbackQueryParameter property. Passing the Func in binds the property in the lambda, so Mapping will be able to access it later on in TryMatchMediaType. If you have a more elegant way, please comment!

Updated

public class JsonpMediaTypeFormatter : JsonMediaTypeFormatter
    {
        private string callbackQueryParameter;

        public JsonpMediaTypeFormatter()
        {
            SupportedMediaTypes.Add(DefaultMediaType);
            SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/javascript"));

            MediaTypeMappings.Add(new UriPathExtensionMapping("jsonp", DefaultMediaType));
        }

        public string CallbackQueryParameter
        {
            get { return callbackQueryParameter ?? "callback"; }
            set { callbackQueryParameter = value; }
        }

        public override Task WriteToStreamAsync(Type type, object value, Stream writeStream, HttpContent content, TransportContext transportContext)
        {
            string callback;

            if (IsJsonpRequest(out callback))
            {
                return Task.Factory.StartNew(() =>
                {
                    var writer = new StreamWriter(writeStream);
                    writer.Write(callback + "(");
                    writer.Flush();

                    base.WriteToStreamAsync(type, value, writeStream, content, transportContext).Wait();

                    writer.Write(")");
                    writer.Flush();
                });
            }
            else
            {
                return base.WriteToStreamAsync(type, value, writeStream, content, transportContext);
            }
        }

        private bool IsJsonpRequest(out string callback)
        {
            callback = null;

            if (HttpContext.Current.Request.HttpMethod != "GET")
                return false;

            callback = HttpContext.Current.Request.QueryString[CallbackQueryParameter];

            return !string.IsNullOrEmpty(callback);
        }
    }

For those of you who are using the HttpSelfHostServer this section of code will fail on HttpContext.Current, since it doesn't exist on the self host server.

private Tuple<bool, string> IsJsonpRequest()
{
if(HttpContext.Current.Request.HttpMethod != "GET")
 return new Tuple<bool, string>(false, null);
 var callback = HttpContext.Current.Request.QueryString[CallbackQueryParameter];
 return new Tuple<bool, string>(!string.IsNullOrEmpty(callback), callback);
 }

However you can intercept the self host "context" via this override.

public override MediaTypeFormatter GetPerRequestFormatterInstance(Type type, HttpRequestMessage request, MediaTypeHeaderValue mediaType)
        {
            _method = request.Method;
            _callbackMethodName =
                request.GetQueryNameValuePairs()
                       .Where(x => x.Key == CallbackQueryParameter)
                       .Select(x => x.Value)
                       .FirstOrDefault();

            return base.GetPerRequestFormatterInstance(type, request, mediaType);
        }

The request.Method will give you "GET", "POST", etc. and the GetQueryNameValuePairs can retrieve the ?callback parameter. Thus my revised code looks like:

private Tuple<bool, string> IsJsonpRequest()
 {
     if (_method.Method != "GET")
     return new Tuple<bool, string>(false, null);

     return new Tuple<bool, string>(!string.IsNullOrEmpty(_callbackMethodName), _callbackMethodName);
}

Hope this helps some of you. This way you don't necessarily need a HttpContext shim.

C.

go for this:
install Json.Net (mvc uses it anyways but update it just in case), go here:
http://json.codeplex.com/
just open the package manager console and type 'Install-Package Newtonsoft.Json'
then create your object like so:

[DataContract]
[JsonObject]
public class ProjectJson
{
    [DataMember(Name = "name")]
    [JsonProperty("name")]
    public string Name { get; set; }
    [DataMember(Name = "id")]
    [JsonProperty("id")]
    public int Id { get; set; }
    [DataMember(Name = "date")]
    [JsonProperty("date")]
    public string Date { get; set; }
    [DataMember(Name = "imgageSrc")]
    [JsonProperty("imgageSrc")]
    public string ImgageSrc { get; set; }
    [DataMember(Name = "graphImageSrc")]
    [JsonProperty("graphImageSrc")]
    public string GraphImageSrc { get; set; }
    [DataMember(Name = "data")]
    [JsonProperty("data")]
    public ProjectJsonData Data { get; set; }
}
[DataContract(Name = "data")]
[JsonObject("data")]
public class ProjectJsonData
{
    [DataMember(Name = "wind")]
    [JsonProperty("wind")]
    public int Wind { get; set; }
    [DataMember(Name = "rain")]
    [JsonProperty("rain")]
    public int Rain { get; set; }
    [DataMember(Name = "temp")]
    [JsonProperty("temp")]
    public int Temp { get; set; }
    [DataMember(Name = "humidity")]
    [JsonProperty("humidity")]
    public int Humidity { get; set; }
    [DataMember(Name = "sun")]
    [JsonProperty("sun")]
    public int Sun { get; set; }
    [DataMember(Name = "alerts")]
    [JsonProperty("alerts")]
    public int Alerts { get; set; }
}

now use the controller code:

        [Authorize]
    public ActionResult GetJsonProjects(string id)
    {
        // id - user id
        var projects = new List<ProjectJson>
            {
                new ProjectJson{
                    Name = "Avocado Site 4",
                    Id = 48,
                    Date = "12/10/2012",
                    ImgageSrc = "images/image.jpg",
                    GraphImageSrc = "images/graph-02.png",
                    Data = new ProjectJsonData{
                        Wind = 20,
                        Rain = 45,
                        Temp = 24,
                        Humidity = 45,
                        Sun = 1335,
                        Alerts = 3
                    }
                }
            };
        return Content(JsonConvert.SerializeObject(project));
    }

now if its a big json (maxJsonLength property issue) i recommend this article:
http://brianreiter.org/2011/01/03/custom-jsonresult-class-for-asp-net-mvc-to-avoid-maxjsonlength-exceeded-exception/

worked like a charm for me! use it like so:

[Authorize]
    public ActionResult GetJsonSensors(int id)
    {
        //some json generation code 
        List<string> data = new List<string>()
        return new LargeJsonResult() { Data = data , MaxJsonLength = int.MaxValue, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }

in addition if you need some jsonp stuff for development (hack to allow web apps to retrieve data across domains) i recommend you use:
https://gist.github.com/nikmd23/1944346
simple and easy solution , i modified it so: added this function:

    public string ExecuteResult(object data)
    {
        var serializer = new DataContractJsonSerializer(this.Data.GetType());
        String output = String.Empty;
        using (var ms = new MemoryStream())
        {
            serializer.WriteObject(ms, this.Data);
            output = Encoding.UTF8.GetString(ms.ToArray());
        }
        return output;
    }

and changed the response.write like so:

response.Write(string.Format("{0}({1});", this.JsonCallback, ExecuteResult(Data)));

it doesn't get easier! if you need the jsonp to support big json dont forget to modify the web.config of the project like so:

<configuration>
 .
 .
 .
 .
</configSections>
<system.web.extensions>
 <scripting>
  <webServices>
   <jsonSerialization maxJsonLength="2147483646" />
  </webServices>
 </scripting>
</system.web.extensions>
<connectionStrings>
 .
 .
 .
 .
 .
</configuration>

hope iv helped!