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!
8 comments on this article
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
The UR Card is a new product serving the needs of the tourists to South Africa. It is a 1-stop medical insurance prepaid debit discount card. Being able to utilize three different features in one simple application makes the UR Card the traveller s unique best friend christian louboutin outlet christian louboutin outlet .
UR TransactionsThe UR Card is a MasterCard based new card application for South Africa. With its easy and transparent price structure and its easy usability it is a great alternative for carrying cash or being involved in complicated bank charge structures. black red heels black red heels After processing electronic transactions (EFT) or simple cash deposits at any Standard Bank branch, you will be able to swipe the card, withdraw at any ATM or even transfer funds with in the UR Card