Using "/base" to create and consume a JSON string
So, you want to create and use javascript objects in Umbraco!
Not a problem. I'll be showing you an example using "/base", Json.NET and a little bit of what I'm doing with Contour at the moment.
/base
Umbraco's "/base" is an extendable
system for creating raw feeds directly from Umbraco using very
basic Url's. These feeds are typically in XML format but
it's very easy to create a JSON feed instead of an XML one. The way
/base works is by mapping a method to a URL through a config file
(see the above link for an introduction).
JSON
In javascript you can use JSON (JavaScript Object Notation) to
access data. A JSON object is just an array of strings, like
so:
"person": {
"name": "Sebastiaan Janssen",
"country": "The Netherlands"
}
You can access the information in this object by evaluating this string in javascript. Let's say the above JSON string was in a variable called "json":
var result = eval("(" + json + ")");
var name = result.person[0].name;
The variable "name" will now be filled with the string "Sebastiaan Janssen". To make sure the evaluation will work, you need to surround the JSON string with braces, which is what I've done on the first line.
Json.NET
So how great would it be if you could just output any old .net
class as a JSON string, so you could easily use it in javascript?
With Json.NET you can do just that! Have a look at
a simple example in the source of my RESTContour package. The
GetJsonForObject method accepts any object and spits out a JSON
string, great!
Putting it all together
So let's combine all of the above. Create a method that outputs a
string, the string will contain some JSON. Normally, a call to a
/base method will result in some XML output, but we want a
string.
In the restExtensions.config file there's a "permission" node, add a new attribute returnXml="false" to it so that the output will just be a string.
Now we can make an AJAX call (using a little jQuery) to the /base URL and evaluate the result. Going back to the RESTContour example class mentioned above, I am going to get all of the available Contour forms and alert the form names.
$(document).ready(function () {
var getFormUrl = "/base/getContourForm/GetAllForms";
$.ajax({
url: getFormUrl,
success: function (data) {
var result = eval("(" + data + ")");
for (var i = 0; i < result.length; i++) {
alert(result[i].Name);
}
}
});
});
As said, you can output just about any object as a JSON string using base, which can be very useful, try it out!
Mind sharing what your usage scenario was to use this technique?
We have a contact form in Flash, which needs to send e-mail in the same way as on the non-flash site. On the normal site we use Contour and there is currently no way to use Contour in Flash.
So I created the RESTContour package to be able to just send Flash' form values to Contour. This call specifically is handy so that Flash can figure out what the form's GUID should be, so the Flash gets all of the forms, finds the one that's called "Contact" and uses the GUID to do the submit to another /base extension (/base/sendContourForm/CreateRecord/?formGuid=...).
Does that help?
thanks, I was wondering if I could need this one day but hey that's one very specific use case.
FYI you don't need to do:
$(document).ready(function() {...});
You can just do:
$(function() { ... });
jQuery treats them the same way :)
A couple of notes:
* use $.parseJSON instead of eval. It's quicker when native JSON parsing is present and in all circumstances more secure. The easiest way to do the above is $.getJSON().
* when using .NET 3.5 and above, the System.Web.Script.Serialization.JavaScriptSerializer is available. This will take care of most scenarios, and doesn't require an extra DLL.
And thanks for posting this: despite the above nitpicks, you got me on the right track very quickly.
Great post, it helped me a lot.
Is there a way to post JSON back to the server? there is an umbraco wiki page talking about posting simple strings back but what if you want to send more complicated objects?
thanks
L