JSONP in ASP.NET MVC 3
When consuming a JSON REST API using AJAX the message is send as a XMLHttpRequest. Due to security reasons this is not allowed cross domain. Instead of returning the data as core JSON, JSONP is often used. The data will then not be parsed by the JSON parser but evaluated by the JavaScript interpreter.
Returning JSONP data does not come out of the box in ASP.NET MVC 3, but you can write a simple wrapper like this:
using System.Web.Mvc;
public class JsonpResult : JsonResult
{
private const string CALLBACK_QUERYSTRING = "callback";
private const string CALLBACK_CONTENTTYPE = "application/x-javascript";
public override void ExecuteResult(ControllerContext controllerContext)
{
if (controllerContext != null)
{
var request = controllerContext.HttpContext.Request;
object callback = request[CALLBACK_QUERYSTRING];
if (callback == null)
{
controllerContext.RouteData.Values.TryGetValue(CALLBACK_QUERYSTRING, out callback);
}
var hasCallback = !string.IsNullOrWhiteSpace(callback ==null ? "" : callback as string);
if (hasCallback)
{
SetContentTypeIfEmpty();
var response = controllerContext.HttpContext.Response;
response.Write(callback);
response.Write("(");
base.ExecuteResult(controllerContext);
response.Write(")");
}
else
{
base.ExecuteResult(controllerContext);
}
}
}
private void SetContentTypeIfEmpty()
{
if (string.IsNullOrWhiteSpace(base.ContentType))
{
base.ContentType = CALLBACK_CONTENTTYPE;
}
}
}
It is now possible to just replace the jsonresult with jsonpresult in the code. If no callback is given it will work as normal.
//return new JsonResult(); return new JsonpResult();
When sending the request GET http://localhost/Website/Products/All?callback=myCallbackFunction the data will be wrapped like this: (same method used in last blogpost)
Asp.NET MVC 3 and JSON
Creating a ASP.NET MVC 3 REST API returning JSON data is actually really simple.
If you have a MVC 3 Visual Studio project template and you add a Controller the default HomeController will be added:
public class HomeController : Controller { public ActionResult Index() { return View(); } }
If you want this Index to return Json data the only thing needed is return JsonResult instead of a View.
//return View(); return new JsonResult();
To give an example I have created a ProductsController returning 3 products with the properties ProductId, Name and Price.
[AcceptVerbs(HttpVerbs.Get)] public JsonResult All() { var data = GetProducts(); return new JsonpResult { Data = data, JsonRequestBehavior = JsonRequestBehavior.AllowGet }; }
Notice that you have to set JsonRequestBehavior.AllowGet. If forgotten you will get the self-explanatory errormessage:
This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet.
When sending the request GET http://localhost/Website/Products/All, the method will return my three products:
(using Chrome with the extension JSONView)
As simple as that 
My favorite Web Application Architecture
This is my first blogpost and I thought I should start writing about the web application architecture i normally choose these days, –if I am allowed by the client to refactor or start from scratch. Hopefully more blogposts will come out of this.
The first thing I do is splitting the Web Application in a html part and a JSON REST API part. Typically the Visual Studio folder structure looks like this:
- WebApplication1.WebSite
- WebApplication1.RestApi
HTML
I use the Razor viewengine in combination with Knockout.js to write the databinding and other than this the HTML is mostly consisting of a bunch of DIVs and script elements with jquery $.get or $.post’s. Normally I am that lucky in projects that I do not have to care about the “colors and stuff”, there is normally another guy taking care of the CSS. My main focus is therefore to get the databinding right and have a nice and clean architecture “downwards”.
REST API
I design the REST API service methods with the view in mind. So instead of having a super-generic method that works for “all web pages” I rather have several specific ones. I want to have as little logic in the client side as possible. I can then design my viewmodel-classes to consist of just the data needed, both translated and formated the way i want.
CQRS style: When working with the REST API I like to split the GET and POSTs as done in CQRS.
- The GET-methods are fetching data from the database through a simple ORM like for example: EF, Dapper, Massive or Simple.Data. If working with a documentdatabase as for example RAVENDB the queries will go directly to its DocumentSession.
- The POST-methods will have the business logic and sometimes be long running processes. A reliable service bus as nServiceBus is therefore to prefer. When working with long running and asynchronous processes special care must be taken when designing the UserInterface (HMTL pages). They can normally not be designed as done when working with request-response-based applications.
Environment:
If the team developers are writing tests and the application above is on GitHub using TeamCity with Continuous Deployment, then my day is perfect!
Degree Consulting Group har konsulenter til leie innenfor utvikling i .NET, SharePoint, Windows Phone, Java og Flex.
Vi tilbyr også drift av IT-systemer for små og mellomstore bedrifter til gode priser.
For mer informasjon om oss, ta en kikk på vår hjemmeside www.degree.no
Degree Dev Blogg
Siste innlegg
- LINQ – how to build queries dynamically
- XenApp 6.5 – STA could not be contacted
- Windows Azure Storage Emulator – Blob service does not start
- ORM & Linq – Know your queries and indexes!
- ADFS 2.0 / Claims authentication / Sharepoint 2010
Lenker
Tags
Kommentarer
- bengu on The type or namespace name ‘log4net’ could not be found
- Shah on Sharepoint 2010 – how to show error details when debugging
- Andreas on TransactionScope – atomic transactions in C#
- Peter Parker on TransactionScope – atomic transactions in C#
- Stian on Custom mapping? No, I use Automapper!
