Tuesday, October 14, 2008

Ajax Quick-Start

Ajax Presentation 1

How many of you know what I mean when I refer to Ajax? Okay, what’s it stand for? Right, Asynchronous JavaScript. So, what’s that mean? Anybody?

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].

Ajax Presentation 2

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.

At its core Microsoft has created an Ajax base that is easy to quickly put into practice and also provides the backend JavaScript to allow flexibility and a framework for more powerful Ajax based applications.

Ajax Presentation 3

So, today, I’m going to talk about the easy stuff. I’ll talk about the basic controls you need to get started using Ajax, namely the ScriptManager and the UpdatePanel. I’ll talk about some of the times we’ve used it on projects and some of the things to look out for. I’m not going to talk about extra components like tools by Telerik, ComponentOne, Infragistics or CodePlex or even the Ajax Control Toolkit. I’m also not going to talk JASON… anybody? The JavaScript Object Notation (JSON) implementation for Ajax or calling Web services from JSON. I’m also not going to cover using Ajax in MOSS 2007, mainly because I never got it to work correctly in a quick trial, which may have been because we didn’t have SP1 installed at the time. We’ll save all of that for later if you’re interested.

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?

Ajax Presentation 4

The UpdatePanel is a built-in ASP.Net Ajax control that will wrap around any control (including other Update Panels) to provide the rich postback functionality. You just drop in an UpdatePanel tag and put your controls inside the ContentTemplate. It’s also very easy to tie the UpdatePanel to only certain events using triggers. For example, you may want it to run for a calculate button without refreshing the whole page, but not for a save that redirects the user to a new page when it’s completed. When it comes down to it you should always use triggers so that JavaScript code is only added to the controls you want, not to every event that occurs.

Ajax Presentation 5

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.

When a page is rendered the ScriptManager links a couple JavaScript files which provide all of the Ajax functionality for the page. Really it puts in an HTTP Handler for a dynamically generated JavaScript file ending in .asmx, so don’t go spending hours hunting around the file system for it. These same JavaScript files allow you to write your own JavaScript to access server data or use third party Ajax tools.

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?

Ajax Presentation 6

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.

Screen readers used by blind people to hear Web sites will read through a page once it’s rendered and then only reads the label for whatever field is highlighted as they tab through the form. Unfortunately, when only a section of a page is updated with JavaScript, the reader doesn’t do anything. This means 22,000 people can’t use your site. Not to mention the number of blind people in the general public who may be using it. So, how do we make Web sites Section 508 accessible?

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.

Demonstration Steps

  1. 1. Open Visual Studio 2008
  2. 2. Create a new ASP.NET Web Site
  3. 3. [View Split Mode]
  4. 4. Point out the built-in Ajax Extensions
    1. ScriptManager
    2. ScriptManagerProxy
    3. Timer
    4. UpdatePanel
    5. UpdateProgress
  5. 5. Drag a ScriptManager control on the page
  6. 6. Set its EnablePartialRendering to True
  7. 7. Add a DataSet file
  8. 8. Add a TableAdapter
  9. 9. Connect to a database
  10. 10. Create a tableadapter to a database table
  11. 11. Save the DataSet
  12. 12. Return to default.aspx
  13. 13. Add an object data source
  14. 14. Configure it to use the dataset
  15. 15. Add a GridView
  16. 16. Set it to use the datasource, using default values
  17. 17. Check off allow editing
  18. 18. Set PageSize to 100
  19. 19. Run the application and show scrolling and editing
  20. 20. Stop the application
  21. 21. Return to Default.aspx
  22. 22. Add an UpdatePanel with the code in a ContentTemplate
  23. 23. Set UpdateMode = Always
  24. 24. Re-run the application
  25. 25. Scroll down and edit a row
  26. 26. Stop the application
  27. Demonstrate making the page accessible
  28. 27. Paste in the profile provider in Web.Config from the example
  29. 28. Paste in a checkbox in Default.aspx from the example
  30. 29. Paste in the property code in default.aspx.vb from the example
  31. 30. Re-run the application scrolling to bottom
  32. 31. Edit row
  33. 32. Check box
  34. 33. Scroll back down
  35. 34. Edit row and notice refresh and scrolling don’t work.

So, if Ajax is so great, why not use it everywhere?

Ajax Presentation 7

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?

Again, with a whole postback event occurring, what else happens? All of view state gets passed back to the server, updated, and returned to the browser. Truthfully, the entire page is sent back to the browser, but the JavaScript is smart enough to update only the sections that have changed.

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.

Ajax Presentation 8

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.

Resources

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

Photo Credits

· Beach Boardwalk by shaunl (iStockPhoto)
http://www.istockphoto.com/file_closeup/nature/spring/5991593-beach-boardwalk.php?id=5991593

· Wagon Wheel by photog (DeviantArt)
http://photog.deviantart.com/art/Wagon-Wheel-12942352

· The Simple Things by snorf (DeviantArt)
http://photog.deviantart.com/art/Wagon-Wheel-12942352

· Egg’s Nest by Gruye (DeviatnArt)
http://gruye.deviantart.com/art/Egg-s-Nest-35997617

· Backbone by RomainD (DeviantArt)
http://romaind.deviantart.com/art/BackBone-17253241

· Metro by elfish88 (DeviantArt)
http://elfish88.deviantart.com/art/Metro-27035318

· Trinity Library by elementalist (DeviantArt)
http://elementalist.deviantart.com/art/Trinity-Library-675110

· Construction by OnurY (DeviantArt)
http://onury.deviantart.com/art/Construction-74335946

No comments: