Ajax for the rest of us: Atlas, the profile store and web based forms

Article
02/18/2006

While Ajax is getting lots of buzz in the new Web 2.0 style applications it enables I was struck recently by the impact this programming style could have on possibly the most popular web application: web based forms!

I hate filling out web forms, in fact one of the only things I hate worse than filling out web forms is doing it twice! Several times recently I have been in the middle of filling out a form and lost all by work. There are several reasons for it:

1. Hitting back button to find some data

2. clicking on a link which navigates the browser to another place

3. timing out on the server

4. the ups and downs of wi-fi

If any of these (or many other) common things happen, you have to restart fillout the form. Argg! I certainly understand that the website only wants forms that are complete for data integrity reasons, but surely something could be done!

Enter Atlas... As you may know Atlas is an extension to ASP.NET 2.0 that makes Ajax style development super easy. With Atlas + the profile store offered in ASP.NET 2.0 it is very easy to build a much more user friendly form. Clearly there is some network\server load for this which could be optimized down via a timer on the client if the load becomes an issue. However the nice thing about this style is that there is no user visible delay as everything is done asynchronously.

My goal was to store form data asynchronously on the server in a per user state cache as it typed in. And then reload it from the server (again, asynchronously) if the user navigates away and then back to this page. This allows the user’s data to be sticky. The profile service works with any sort of authentication scheme, here I am using NTLM. This doesn’t show up in the code below at all and works equally well with a more traditional user name and password system.

Just install the Jan Atlas bits, open a new atlas web site and try these few easy steps...

1. Update web.config with the schema of the data you want to store. Here is what my section looks like:

</properties>

</profile>

2. The labels and textboxs to your ASPX page. Notice I set a client side on change event on the textbox

<tr>

<td>

</td>

</td>

</td>

</tr>

I only show one here, you will need to do the others..

3. Do a little setup work to make it easier to deal with the html elements on the page in Jscript

var txtName = document.getElementById('txtName');

var txtAddress1 = document.getElementById('txtAddress1');

var txtAddress2 = document.getElementById('txtAddress2');

var txtState = document.getElementById('txtState');

var txtCity = document.getElementById('txtCity');

var txtZip = document.getElementById('txtZip');

var txtCountry = document.getElementById('txtCountry');

var txtPhone = document.getElementById('txtPhone');

4. When selection leaves the text box, the on change event is raised. Here we need to store the value of the textbox into the local profile store. It will refresh the server asynchronously. This is where the magic of Atlas comes in. Web.Profiles is part of the client side Atlas Jscript framework

function onNameChange () {

Web.Profile.properties.Name = txtName.value;

Web.Profile.save();

}

5. On page load we need to restore any user state that we have stored from last time. To do this we define two client side Jscript methods. One is called when the page is loaded, the other is called, you guessed it, asynchronously once the profile data has been retrieved from server.

function OnPageLoad() {

Web.Profile.loaded.add(onProfileLoadComplete);

Web.Profile.load();

}

//Called when the profile data has been loaded from the server

function onProfileLoadComplete()

{

txtName.value = Web.Profile.properties.Name;

txtAddress1.value = Web.Profile.properties.Address1;

txtAddress2.value = Web.Profile.properties.Address2;

txtCity.value = Web.Profile.properties.City;

txtState.value = Web.Profile.properties.State;

txtZip.value = Web.Profile.properties.Zip;

txtCountry.value = Web.Profile.properties.Country;

txtPhone.value = Web.Profile.properties.Phone;

}

Here is the resulting app - notice the XmlHttp callbacks listed in the Web Development Helper I have installed...

I can now, without hitting submit, close the browser, navigate away from the page and back – or even open it up the page in a different browser, on a different machine and my data is till saved!

Update 1: While going through the fun of uploading and attaching pictures via Community Server I just about navigated off the entry form and lost this post! Wouldn’t that have been funny, my post about how to avoid bad web user experiences lost by a bad web user experiences ;-). Maybe I should change my example to be a blog entry page...

Update 2: I tried to upload the VS Solution for this app but I am getting an error... If there is interest in it, I will find another way to post it.. let me know.

Update 3: I posted the zip file for the VS2005 project so you can see all the details. Enjoy!

Ajax for the rest of us: Atlas, the profile store and web based forms

Additional resources