Andy Beaulieu

1

• Andy Beaulieu
• MCT, MCSD
• http//www.andybeaulieu.com

2
What We Will Cover

• What is AJAX?
• Some example sites using AJAX
• AJAX Technology
• The Competition - some other libraries for AJAX
  under .NET
• Building Server-Centric AJAX Applications
• Using UpdatePanel and UpdateProgress Controls
• Building Client-Centric AJAX Applications
• Eye Candy
• Data Completion
• Calling a Web Service, DataSets
• Extending AJAX
• Tools and Resources

3
What is AJAX?

• AJAX buzzword
• Web development technique for creating more
  interactive and responsive web applications using
  available browser technologies
• AJAX Asynchronous JavaScript and XML
• refers to the ability of a browser to request
  data from the server in the background
  (asynchronously)
• AJAX buzzword has been extended to include Eye
  Candy
• Various effects such as animation, fades,
  shadows, etc.

3
4
Normal Web Application (non-Ajax)

• Entire page is refreshed every time on a postback
• Browser flashes
• Page Scrolls back to the top
• Inefficient use of bandwidth
• Does not lend itself to interactive applications
  (ie maps, data entry)

Browser Dumb Client
Presentation (HTML/CSS)
5
Ajax Enabled Web Application

• Entire page is loaded on first request only
• Browser acts as Smart Client and can contain UI
  logic (JavaScript)
• Efficient use of bandwidth and server resources
• No more browser flash or scroll to top!
• More interactive UI for things like Data Entry,
  Maps, etc.

Browser Smart Client
Presentation (HTML/CSS)
6
Some Example AJAX SitesVirtual Earth, Google
Maps, etc
6
7
Some Example AJAX SitesPersonalized Portals,
Mashups (pageflakes.com)
7
8
Some Example AJAX Sites
Sink My Ship (www.sinkmyship.com)
8
9
AJAX Technology

• DHTML DOM
• Browser DOM manipulated through JavaScript to
  dynamically display and interact with information
• CSS styles are accessible through DOM
• JavaScript
• Loosely typed scripting language
• Mostly used as the glue to wire things together
  on a page
• Can quickly become hard to maintain
• XMLHttpRequest object
• Exchange data asynchronously with the web server
• Any data format will work - HTML fragments, text,
  XML, JSON
• Introduced in 1998 for IE 5.0

9
10
The CompetitionThere are other AJAX libraries
for .NET

• Ajax.NET Professional
• http//www.ajaxpro.info/
• Uses attributes to make methods callable through
  AJAX
• Includes DataSet wrapper for manipulating
  DataSets in the browser
• No eye candy effects
• A comparison of many more Ajax Libraries
• http//www.daniel-zeiss.de/AJAXComparison/Results.
  htm
• What about WPF/E and Flash?
• Not AJAX, but these also offer cross-platform,
  responsive web UIs

11
What is Microsoft ASP.NET Ajax?

• High productivity AJAX development
• Builds on top of ASP.NET 2.0
• Works cross-browser
• End-to-End Framework
• Extensible
• Download at http//ajax.asp.net/

12
Architecture Diagram
Atlas-enabled ASP.NET Pages
HTML, Script, Atlas Markup
Atlas Service Proxies
Web Services (ASMX or WCF)
Atlas Server Framework
Atlas Client Framework and Services
13
There are TWO Programming Models

• Server-Centric Programming Model
• Utilize knowledge of ASP.NET Server Controls
  (grids, etc).
• Good for adding AJAX to existing Applications
• Not as efficient as Client-Centric Model
• Client-Centric Programming Model
• Enhanced JavaScript
• Namespaces, Behaviors, Declarative Programming
  through XML Script
• More efficient than Server-Centric

14
Server-Centric Programming Model
Browser Application
Presentation (HTML/CSS)
15
UpdatePanel and UpdateProgress Controls
Server-Centric Programming Model
16
Enriching ASP.NET Applications
Enable key AJAX and user experience scenarios
in an incremental manner while preserving the
existing server controls and server-side
development models

• Ajax-Enabling Pages
• Add a ScriptManager control
• Enable Partial Rendering on ScriptManager (true
  by default)
• Continue to use the postback model, but work
  out-of-band
• Only portions of the page are rendered on the
  server
• Existing page is updated using script
• Extend Existing Controls
• Add rich client-side behavior to enable key
  scenarios
• AutoCompleteExtender, etc.
• ASP.NET Ajax Script Framework is an enabling
  technology
• Control developers have a richer target to build
  for
• Page developers continue to use server controls

17
Client-Centric Programming Model
18
Example Key Scenarios

• Dynamically update controls
• User selects Country
• States are populated based on country selection
• Cities are populated based on state selection
• User selects Product
• Available accessories are populated based on
  product selection
• AutoComplete
• Populates optional dropdown with Server data

19
Client-centric Web Applications
Provide a script framework that makes it possible
to create next-generation interactive
applications, and to interact easily with the
server and services while scripting in a
disciplined manner.

• Disciplined and more manageable script
• OOP in JavaScript
• .NET-like APIs on core script objects
• Classes to encapsulate data and logic, and attach
  to HTML in an unobtrusive manner
• Declarative XML script to define behavior of
  application (more designer-oriented)
• Cross-browser abstraction layer to provide a
  uniform DOM API
• AJAX Control Toolkit

20
Eye Candy and Data Completion
Client-Centric Programming Model
21
Calling a Web Service from JavaScriptand
returning a DataSet
Client-Centric Programming Model
22
Extending ASP.NET Ajax

• Ajax Control Toolkit is a community driven, open
  source project hosted at Codeplex.
• DEMO Open and Run the Control Toolkit Project
• You can create your own Control Extenders like
  those in the Toolkit!
• Design-time support is provided
• Enhanced JavaScript through library provides
  namespaces, events, properties, and more.
• Share your Control creations on Codeplex!

23
Creating your Own Control Extender
Client-Centric Programming Model
24
Extending ASP.NET Ajax

• Files Created by the Extender Project
• Behavior.js - contains JavaScript that you
  write to execute on the client. Behaviors are
  attached to controls.
• Extender.cs - this is where you will add
  properties that you want exposed by your control
  at design time.
• Designer.vb -This is a class used for
  Design-Time functionality in VS (usually do not
  have to modify)

25
Extending ASP.NET Ajax

• Creating Properties in an Ajax Control
• Declare the Property in the Behaviors
  prototype
• Declare the Property in the Extender (for the
  Designer)

get_property function() return
this._property , set_property
function(value) this._property value ,
ExtenderControlProperty DefaultValue("") publi
c int fps get return GetPropertyIntValue("f
ps") set SetPropertyIntValue("fps",
value)
26
Extending ASP.NET Ajax

• Creating Events in an Ajax Control
• Declare the Event
• Raise the event this._raiseEvent(eventName',
  eventargs )

add_eventName function(handler)
this.get_events().addHandler(eventName',
handler) , remove_eventName
function(handler) this.get_events().remo
veHandler(eventName', handler) ,
27
Session Summary

• Ajax is a key part of the ASP.NET story
• ASP.NET Ajax Goals
• Make it super easy to incorporate AJAX patterns,
  and create rich user experiences, and leverage
  the browser
• Create a natural progression from Web
  applications to Smart clients using a common
  application model
• preview builds for greater transparency, more
  opportunities for feedback to have impact

28
Important NOTES!!

• Tools to download
• Web Development Helper http//projects.nikhilk.net
  /Projects/WebDevHelper.aspx
• IE Developer Toolbarhttp//www.microsoft.com/down
  loads/details.aspx?familyide59c3964-672d-4511-bb3
  e-2d5e1db91038displaylangen
• Fiddler http//www.fiddlertool.com
• IE7 broke the ability to set breakpoints in
  JavaScript when placed inside a ltscriptgt tag in a
  page. VS 2005 SP1 may fix this
• Intro to Forms Authentication with ASP.NET Ajax -
  http//ajax.asp.net/docs/tutorials/UsingFormsAuthe
  nticationTutorial.aspx

29
Resources

• ASP.NET Ajax Web site
• http//ajax.asp.net/
• Bits, Forums, Quickstarts, Docs, Updates
• Blogs
• http//www.nikhilk.net
• http//weblogs.asp.net/scottgu
• http//weblogs.asp.net/bleroy