Right, essentially the Web browser submits information back to the server and renders a response without refreshing the entire page.
An obvious example here is clicking a button to submit a rating, like with Amazon [go to http://www.amazon.com/Doctor-Who-Complete-David-Tennant/dp/B000JBWWP6/ref=sr_1_12?ie=UTF8&s=dvd&qid=1223001940&sr=1-12].
I started using ASP.NET Ajax in the olden days when it was still called Atlas in a community technical preview. Kind of crazy to think that was over two years ago, and quite a bit has changed, though not as much as you might think.
The first time I used Ajax was when we put together a workforce calculator pilot for the IRS. Like all pilots, this has been is production use without code changes for the past two years.
Yes, I know this can be done with client-server or Silverlight. Heck, I know there are some of you who could have done it in FlashML or a Java app. The problem we have consistently had is that clients (even Booz Allen people) don’t want to install anything new on their machines, even the .NET framework. The obvious beauty here is that nothing had to be loaded on the user’s machine to make it work, but you still get a client/server “feel”.
We didn’t really go crazy with this, we really just wanted to create something that didn’t refresh the entire screen every time a value was changed or a calculation was made. With that we stuck to using the UpdatePanel around areas of the page that we wanted to update without causing a screen refresh. Which leads to the obvious question, what’s an UpdatePanel?
The backbone for ASP.NET Ajax is the ScriptManager tag. It’s a single tag and just doesn’t look like very much. It’s most interesting property is EnablePartialRendering which, when set to true, generates the plumbing that allows controls in an UpdatePanel to suppress the entire refresh during post back.
It’s pretty important to note that you can only have one of these on a page at a time and it must be inside the form tag, so I always put it in the master file and generally forget about it after that.
Well, did I say forget about it? There’s one incredibly important thing to remember about Ajax. It’s not, by any means, Section 508 compliant. Assuming some of you are new and may not know what I mean, does anyone want to give a 10 second explanation of 508 and why we should follow it?
So, in a nutshell, Section 508 applies to people with disabilities.
Those of us who have lived in the DC area for a couple of years (okay, maybe 15 or more) should remember the big hoopla that happened with Metro where the doors would open and close with a ding-dong chime half a second before the doors closed. Sure enough blind people and people in wheelchairs were getting stuck. Not to mention that you’d never know which train you were getting on; was it blue or orange? The yellow or green line, oh, wait, green didn’t exist then. Needless to say trains were refitted and we now have a nice voice telling us the train, direction and a verbal warning of closing doors.
Section 508 did that, and mandated it for all government Web applications too (except SharePoint apparently, which has some odd exception). I knew you were wondering where I was going with that story. Government Web sites need to be equally usable by blind people (color and otherwise), deaf people and people in wheelchairs.
Keep in mind that right now I’m focusing on using the UpdatePanel and built in controls with ASP.NET Ajax. I mentioned EnablePartialRendering a bit earlier. Setting EnablePartialRendering to false will turn off all of the Ajax postback interception, so your Web site will function just as if it didn’t have any Ajax, with full page redraws and everything. On every site we’ve built we’ve added into the master file a check box allowing users to turn off Ajax. When they check the box the page posts back setting a profile setting for the user and the code behind turns off partial rendering for that user. Pretty easy.
Of course this only works for built in Ajax functionality like the Update panel. Other Ajax controls, like the open source Ajax Control Toolkit will still use their rich functionality. So you’ll have to check internally and provide additional methods to make the site accessible. And no, I’m not going into that today.
So, let’s set-up a quick site.
- 1. Open Visual Studio 2008
- 2. Create a new ASP.NET Web Site
- 3. [View Split Mode]
- 4. Point out the built-in Ajax Extensions
- 5. Drag a ScriptManager control on the page
- 6. Set its EnablePartialRendering to True
- 7. Add a DataSet file
- 8. Add a TableAdapter
- 9. Connect to a database
- 10. Create a tableadapter to a database table
- 11. Save the DataSet
- 12. Return to default.aspx
- 13. Add an object data source
- 14. Configure it to use the dataset
- 15. Add a GridView
- 16. Set it to use the datasource, using default values
- 17. Check off allow editing
- 18. Set PageSize to 100
- 19. Run the application and show scrolling and editing
- 20. Stop the application
- 21. Return to Default.aspx
- 22. Add an UpdatePanel with the code in a ContentTemplate
- 23. Set UpdateMode = Always
- 24. Re-run the application
- 25. Scroll down and edit a row
- 26. Stop the application
- Demonstrate making the page accessible
- 27. Paste in the profile provider in Web.Config from the example
- 28. Paste in a checkbox in Default.aspx from the example
- 29. Paste in the property code in default.aspx.vb from the example
- 30. Re-run the application scrolling to bottom
- 31. Edit row
- 32. Check box
- 33. Scroll back down
- 34. Edit row and notice refresh and scrolling don’t work.
So, if Ajax is so great, why not use it everywhere?
One thing to keep in mind is what happens behind the scenes during a postback with the UpdatePanel. The entire postback event occurs every time. So, if you pull data from the database in the page_load event, make darned sure you have IsPostBack = false. Otherwise you’ll refresh the data every single time. Say you’re on Amazon’s product page and you click three stars to rate something. Do you really want all the page content to be re-rendered, or just have the rating get updated in the database and the stars redrawn?
We all know that you should put EnableViewState to false everywhere possible, but this is especially true in Ajax. There are times you may have a large view state and you’ll find that updates render more slowly than if you’d just refreshed the whole page.
On PSDR we had a DataGrid with an Ajax panel around it so that sorting and paging would occur without reloading the whole page. That’s fine, until you realize the grid had text boxes always visible on every row. And we ended up having hundreds of rows. With each textbox in each row having another Ajax control from the toolkit associated with it. The response time got so slow that the postbacks actually timed out. After turning off the EnablePartialRendering for the page everything worked fine. Well, a little slow, but fine.
At this point you should have one question on your mind… This is great and all, but what do I need to do to develop with this and deploy my applications? If that wasn’t on your mind, it should be now based on the pink elephant effect.
All you need to get set-up is to download the Essential Components from http://ajax.asp.net which works with the .NET Framework 1.1 and 2.0.
To deploy you just need the application is to include a reference to the System.Web.Extensions.dll and System.Web.Extenstions.Design.dll. I always put those in the bin folder and create the references locally so that when I push it for release in a client environment the dll’s are there and they don’t have to register anything in the GAC.
By default Ajax is included in the .NET 3.5 framework, but I haven’t actually developed an application using it yet, and so I haven’t tested this out.
So, there has clearly been enough talking by me. At this point I wanted to run through a quick demo throwing an Ajax site together.
There are a couple of sites where we use Ajax but I just didn’t have time to touch on.
Guthrie, S. (2008, October 2). Scott Guthrie's Blog (General Manager within the Microsoft Developer Division). Retrieved October 2, 2008, from ScottGu's Blog: http://weblogs.asp.net/scottgu/
Khothari, N. (2008, October 2). Nikil Khothari's Blog. Retrieved October 2, 2008, from nikhilk.net: http://www.nikhilk.net/
Mahemoff, M. (2008, October 2). Ajax Patterns. Retrieved October 2, 2008, from Ajax Patterns (The publicly editable repository of all things Ajax): http://ajaxpatterns.org
Microsoft. (2008, October 2). Public Sector Developer Weblog. Retrieved October 2, 2008, from MSDN: http://blogs.msdn.com/publicsector/default.aspx
SCHAEFEK. (2006, October 30). 2006 General Government Departments: Distribution of Ratings by Number and Percentage of Employees at Each Rating Level. Retrieved October 2, 2008, from Colorado Government: http://www.colorado.gov/DPA/dhr/oversight/docs/ratings/2006/gengovt.pdf
· Beach Boardwalk by shaunl (iStockPhoto)
· Wagon Wheel by photog (DeviantArt)
· The Simple Things by snorf (DeviantArt)
· Egg’s Nest by Gruye (DeviatnArt)
· Backbone by RomainD (DeviantArt)
· Metro by elfish88 (DeviantArt)
· Trinity Library by elementalist (DeviantArt)
· Construction by OnurY (DeviantArt)