Code Camp SA

University of South AustraliaI spent the weekend in Adelaide for Code Camp SA. Code Camp SA is Adelaide's version of Code Camp Oz in Wagga Wagga, which I also attended and spoke at.

The event was well organised with excellent facilities and catering. Saturday night there was a social dinner at a local pizza restaurant for the tried and true nerd / pizza combination.

I gave my presentation, 8 Reasons Why ASP.NET MVC is better than Webforms on the first day before lunch. To keep things interesting I was followed by Tatham Oddie keeping things balanced with 8 Reasons Why Webforms is better than MVC. His argument was based around the difficulty of creating composite UIs with MVC, which is a valid criticism. 

Here is the ASP.NET MVC example code from my talk, including a nifty bulk geocoder for google maps.


Simple AJAX with jQuery

jQuery AJAXJQuery includes powerful ajax features for enriching the experience of a web application. This post will describe the simplest case, using ajax to replace part of a page with new content from the server. The server-side technology can be anything, however ASP.NET webforms makes things more difficult.

An example situation where this technique might be useful is in a master-detail scenario. As the user selects a item from a list the details of that item should be displayed somewhere else on the page. Here is my list of items and the container that will hold the details when an item is selected:

<p><a href="#" onclick="AJAX.ajaxLoad(1);">Option 1</a></p>
<p><a href="#" onclick="AJAX.ajaxLoad(2);">Option 2</a></p>
<p><a href="#" onclick="AJAX.ajaxLoad(3);">Option 3</a></p>

<div id="details">Please select an option from the list above.</div>

You can see that when an option is selected a javascript function called AJAX.ajaxLoad() will be invoked. This function will use jQuery to perform an ajax request to the server, and then update the page with the result. By default jQuery will cache all requests in internet explorer. To disable this behaviour use $.ajaxSetup().

var AJAX = {}; // declare a namespace

AJAX.ajaxLoad = function(id) {
    
    $.ajaxSetup ({
        // Disable caching of AJAX responses */
        cache: false
    });

    $('#details').load('/url_to_get_details/' + id);    
}

This method will call /url_to_get_details/id which must return a html fragment which will be placed in the details div, overwriting anything that is already there.