I've been playing around with ASP.NET MVC for some time now and I'd say I'm in love with it. I've seen several blogs posts here and there about it as well. One of the many things which I got really amazed about was the fact that you can use JSON as your return action on the controller.
I’ve seen Steve Michelotti’s blog post about using jQuery to populate an html combo using JsonResult provided by MVC, and as I already said on this blog, I like Mootools JavaScript framework and I use it when I can. Then, just as a small sample, I’ll replicate what Steve did in his post, but I’ll replace jQuery by Mootools.
So, the first step is to download Mootools framework. Just point your brower to http://www.mootools.net/download and get the latest version. The "Moo Team" provides the framework in 2 compression types and also uncompressed. Download the one which is best for your needs. My suggestion would be to donwload the uncompressed and use it on debug/development time, and in production use one of the compressed types.
Now the idea of this sample is to use Mootools' Request.JSON class to assyncronously retrieve a JSON object from the server side application, which in this case will be a JsonResult in an MVC Controller. For those who are not familiar with MVC Controllers, the idea is to respond to a browser request. The response will be an action perfomed on server side. The action can be a ViewResult (displays a web page), EmptyResult (would be something as void method), RedirectResult, RedirectToRouteResult, JsonResult (Returns a JSON object) and ContentResult (returns, pretty much a text). I'm not going to details here about MVC, since there is already a lot of information available in so many places. I’m going to cover JsonResult on this post, and to get started, open Visual Studio and create a new ASP.NET MVC application by clicking File > New > Project. Then Select Web > ASP.NET MVC Web Application, name it what ever you want. For the sample I named it MvcMootools.
For this sample, I have removed all default scripts from the scripts folder, as well as the login feature (that means, the AccountController, AccountView, and the code which renders the LoginControl) from the project since we won't need login for this sample. Then I added Mootools framework, both the core and more. I have also created my own Master Page and my own CSS file and removed the existing ones.
What should this app do?
1) Get a list of Canadian provinces from a specified data source (xml)
2) Display the list of provinces in a html combo box
3) Get information of a specific province and display it in a panel
4) Do some sliding when displaying the panels
Model
I have created the model classes, which would be the definition of the province as a business object and the reader, which is going to retrieve data from our data source and populate the province object. I have created an Xml file which lists provinces from Canada and some (probably outdated) information about them. The province object attributes are: Code, Name, Population, Flag, Motto, Capital, Largest City and Language.
Controller
I have created my own HomeController which has 3 actions: Display the default view, retrieve the list of provinces in Json format and retrieve one single province in Json format.
View
I’ve created the view folder accordingly to the controller, and created the file Index.aspx to match with our default action in the Home controller, and then I added the JavaScript reference to it.
The Scripts
The JavaScript is really simple. All you have to do is populate the ComboBox and add the event handler for the ‘change’ event. So, what does happen here is that when the page loads, it will send a request to the server (/Home.GetProvinces) through Mootools’ Request.JSON class and populate the combo. And when a Province is selected, it sends another request to the server, but this time it passes the province code on the request. So if you select Ontario, it will send the request to the following Url: “/Home/GetProviceInfo/ON”.
// Using Mootools to add the 'load' and 'error' event handlers
// to the window/page
window.addEvents({
'load': function() {
// initializing comboBox and the path for the controllers
ProvinceSource = "/Home/GetProvinces";
ProvinceInfoSource = "/Home/GetProvinceInfo/{province}";
ProvinceCombo = $("cboProvinces");
FillProvincesCombo();
// adds the event handler for 'change' event to the combo box
ProvinceCombo.addEvent("change", function() {
if(EMPTY != this.options[this.selectedIndex].value) {
var ProvinceInfoURL = ProvinceInfoSource.replace("{province}",
this.options[this.selectedIndex].value);
var jsonThing = new Request.JSON({
url: ProvinceInfoURL,
onComplete: function(province) {
showResponse(province);
}
});
jsonThing.send();
} else {
$("response_div").innerHTML = EMPTY;
}
});
},
'error': function() {
alert('An error occured. Check your browser details.');
}
});
// Fills the comboBox of the Provinces
var FillProvincesCombo = function() {
var option = new Option("Please Select", EMPTY);
ProvinceCombo.options.length = 0;
// firefox doesn't like "ProvinceCombo.add(option);"
ProvinceCombo.options[0] = option;
var jsonRequest = new Request.JSON({
url: ProvinceSource,
onComplete: function(provinces) {
// so I had to create this counter
var c = 1;
provinces.each(function(province) {
var option = new Option(province.Name, province.Code);
// and add each option to a specific index
ProvinceCombo.options[c] = option;
// and, of course, increse the value of the index
c++;
});
}
});
jsonRequest.send();
}
I have also created a function to display the information of a selected province with an animation.
// does the div transition and displays the information
var showResponse = function(json) {
var responseDiv = $("response_div");
var slideHandler = new Fx.Slide('response_div', {
mode: 'horizontal', duration: 300
});
if(EMPTY != ProvinceCombo.options[ProvinceCombo.selectedIndex].value) {
slideHandler.slideOut();
}
setTimeout(function() {
slideHandler.slideIn();
responseDiv.innerHTML = EMPTY;
responseDiv.innerHTML = div_template
.replace(/{code}/g, json.Code)
.replace(/{name}/g, json.Name)
.replace(/{largest}/g, json.LargestCity)
.replace(/{population}/g, json.Population)
.replace(/{motto}/g, json.Motto)
.replace(/{language}/g, json.Language)
.replace(/{capital}/g, json.Capital)
.replace(/{flag}/g, json.Flag);
}, 300);
responseDiv.fade(1);
}
And that’s pretty much it. I strongly suggest you to download the sample application and take a look on the code.
Download Project