Download My ASP.NET AJAX Roadshow Demos

  • Article


Sooo many people have asked for my AJAX demos from the Roadshow and I haven't posted them mainly because of their dependence on the stock web service. For one thing I didn't write the wrapper so I'd need permission to share it and for another it means you need an internet connection just to run the demo. So instead of that, I've hacked together a "dummy" service and hooked that up to the demo instead.

So, fill your boots. I should mention a few things though:

  • I got a bit bored creating the dummy service (RemoteWebService.asmx) so some of the values it returns are just nonsense strings - feel free to be a little more creative
  • There's also a wrapper web service (LocalWebService.asmx) that's intended to run on the same domain as my ASP.NET AJAX site and is enabled as callable from JavaScript with the [ScriptService] attribute. I use this towards the end of the demo to update the instant quote panel.
  • The <connectionStrings> section in web.config sets it up to use a local SQL Server instance. If you're using SQL Express, just remove the <connectionStrings> section. If you're using SQL Server you'll need to make sure your DB is prep'd for ASP.NET application services which you can do by running aspnet_regsql from the command line.
  • I've added a nasty little hack to each page to give an idea what it's trying to illustrate. To give some background, the demo started off as a single page (StockPrice.aspx) and I built it up as the demo progressed. However, it took too long to do so I had to change my approach and use multiple "pre-canned" pages:
    • [StockPrice1.aspx] Basic non-AJAX stock price lookup page
    • [StockPrice2.aspx] Wrapped the stock lookup in an UpdatePanel to get a partial page refresh
    • [StockPrice3.aspx] Added a delay server side and then provided some user feedback with an UpdateProgress control
    • [StockPrice3.aspx] Added the ability to cancel the update from the UpdateProgress control
    • [StockPrice4.aspx] Added another UpdatePanel - "instant quote" - which is refreshed every x seconds by a Timer control on the page
    • [StockPrice4.aspx] The UpdateProgress control would show when the instant quote panel updated - undesired behaviour. So I would change the AssociatedUpdatePanelID property of the UpdateProgress control to associate it only with the first UpdatePanel
    • [StockPrice4.aspx] I'd use Fiddler to show that the first UpdatePanel was also being refreshed when the Timer fired (and hence a lot of unnecessary data in the response) so I modify the UpdateMode of UpdatePanel1 to condition so it only refreshes on its own triggers
    • [StockPrice4.aspx] Modify the AsyncPostBackErrorMessage of the ScriptManager control to show how to display a simple error message to the user when an error occurs server side in the AsyncPostBack
    • [StockPrice5.aspx] Show a very simple Extender control defined in the FocusBehavior.js and FocusExtender.cs files
    • [StockPrice.aspx] Secure the page and add a new page to authenticate people against the ASP.NET membership system from JavaScript
    • [StockPrice.aspx] Modify the secured page to get a preferred ticker symbol for the user from the ASP.NET profile service from JavaScript
    • [StockPrice.aspx] As a final efficiency refinement Remove the instant quote UpdatePanel and timer and replace with a JavaScript function to call a web service to get the latest price. Again review with Fiddler to show just how little data is now being sent across the wire for each request
    • [CustomerLookup1.aspx] This is a form-filling page example. Version 1 is the basic aspx page, version 2 has some ASP.NET AJAX controls added (UpdatePanel, CollapsiblePanelExtender and CalenderExtender) to make it more user friendly.
  • Note that it's a demo. That means a lot of things have been simplified for the sake of clarity. In particular:
    • There's limited / no error checking
    • I've not used the Sys.Application.load event to hook up my scripts
    • It uses the AJAX Toolkit for some of the "effects" (eg rounded corners, drop-shadow etc) but the intrinsic functionality is all enabled by the AJAX Extensions
    • It only understand a limited set of postcodes (for the CustomerLookup pages) - you can find them / extend the list by referring to the Postcodes.xml file in the App_Data directory 

Technorati tags: asp.net, ajax, demo