Andy BeaulieuAndy BeaulieuMCT, MCSDMCT, MCSDhttp://www.andybeaulieu.comhttp://www.andybeaulieu.com
What We Will CoverWhat We Will Cover What is AJAX?What is AJAX?
– Some example sites using AJAXSome example sites using AJAX
– AJAX TechnologyAJAX Technology
– ““The Competition” - some other libraries for AJAX under .NETThe Competition” - some other libraries for AJAX under .NET
Building Server-Centric AJAX ApplicationsBuilding Server-Centric AJAX Applications
– Using UpdatePanel and UpdateProgress ControlsUsing UpdatePanel and UpdateProgress Controls
Building Client-Centric AJAX ApplicationsBuilding Client-Centric AJAX Applications
– Eye Candy Eye Candy
– Data CompletionData Completion
– Calling a Web Service, DataSetsCalling a Web Service, DataSets
Extending AJAXExtending AJAX
Tools and ResourcesTools and Resources
What is AJAX?What is AJAX?
AJAX buzzwordAJAX buzzword
– Web development technique for creating more Web development technique for creating more interactive and responsive web applications using interactive and responsive web applications using available browser technologiesavailable browser technologies
– AJAX == Asynchronous JavaScript and XMLAJAX == Asynchronous JavaScript and XML
refers to the ability of a browser to request data from refers to the ability of a browser to request data from the server in the background (asynchronously) the server in the background (asynchronously)
– AJAX buzzword has been extended to include “Eye AJAX buzzword has been extended to include “Eye Candy”Candy”
Various effects such as animation, fades, shadows, Various effects such as animation, fades, shadows, etc.etc.
3
Some Example AJAX SitesSome Example AJAX SitesVirtual Earth, Google Maps, etc…Virtual Earth, Google Maps, etc…
6
Some Example AJAX SitesSome Example AJAX SitesPersonalized Portals, Mashups (pageflakes.com)Personalized Portals, Mashups (pageflakes.com)
7
Some Example AJAX SitesSome Example AJAX Sites
8
Sink My Ship (www.sinkmyship.com) Sink My Ship (www.sinkmyship.com)
AJAX TechnologyAJAX Technology DHTML DOMDHTML DOM
– Browser DOM manipulated through JavaScript to dynamically Browser DOM manipulated through JavaScript to dynamically display and interact with informationdisplay and interact with information
– CSS styles are accessible through DOMCSS styles are accessible through DOM
JavaScriptJavaScript
– Loosely typed scripting languageLoosely typed scripting language
– Mostly used as the “glue” to wire things together on a pageMostly used as the “glue” to wire things together on a page
– Can quickly become hard to maintainCan quickly become hard to maintain
XMLHttpRequest object XMLHttpRequest object
– Exchange data asynchronously with the web serverExchange data asynchronously with the web server
– Any data format will work - HTML fragments, text, XML, JSONAny data format will work - HTML fragments, text, XML, JSON
– Introduced in 1998 for IE 5.0Introduced in 1998 for IE 5.0
9
““The Competition”The Competition”There are other AJAX libraries There are other AJAX libraries for .NET…for .NET…
Ajax.NET ProfessionalAjax.NET Professional
http://www.ajaxpro.info/http://www.ajaxpro.info/
Uses attributes to make methods callable through Uses attributes to make methods callable through AJAXAJAX
Includes DataSet wrapper for manipulating Includes DataSet wrapper for manipulating DataSets in the browserDataSets in the browser
No “eye candy” effectsNo “eye candy” effects
A comparison of many more Ajax Libraries…A comparison of many more Ajax Libraries…
http://www.daniel-zeiss.de/AJAXComparison/Results.htmhttp://www.daniel-zeiss.de/AJAXComparison/Results.htm
What about WPF/E and Flash? What about WPF/E and Flash?
Not AJAX, but these also offer cross-platform, responsive Not AJAX, but these also offer cross-platform, responsive web UI’sweb UI’s
What is Microsoft What is Microsoft ASP.NET Ajax?ASP.NET Ajax?
High productivity AJAX developmentHigh productivity AJAX development
Builds on top of ASP.NET 2.0Builds on top of ASP.NET 2.0
Works cross-browserWorks cross-browser
End-to-End FrameworkEnd-to-End Framework
ExtensibleExtensible
Download at http://ajax.asp.net/Download at http://ajax.asp.net/
Architecture DiagramArchitecture Diagram
ASP.NET “Atlas” Server ExtensionsASP.NET “Atlas” Server Extensions
“Atlas” Server
Controls
“Atlas” Server
Controls
App Services Bridge
App Services Bridge
Web Services Bridge
Web Services Bridge
““Atlas” Server Atlas” Server FrameworkFramework
““Atlas” Client Framework and Atlas” Client Framework and ServicesServices
“Atlas” Client Script Library“Atlas” Client Script Library
Controls, Components
Controls, Components
Script CoreScript Core
Base Class LibraryBase Class Library
Component Model and UI FrameworkComponent Model and UI Framework
Browser Compatibility
Browser Compatibility
“Atlas” Client Application Services
“Atlas” Client Application Services
Local Store, …
Local Store, …
BrowserIntegration
BrowserIntegration
ASP.NET 2.0ASP.NET 2.0
Application Services
Application Services
Page Framework,
Server Controls
Page Framework,
Server Controls
““Atlas”-enabled Atlas”-enabled ASP.NET PagesASP.NET Pages
““Atlas”-enabled Atlas”-enabled ASP.NET PagesASP.NET Pages
Web ServicesWeb Services(ASMX or WCF)(ASMX or WCF)
Web ServicesWeb Services(ASMX or WCF)(ASMX or WCF)
HTML, Script,HTML, Script,““Atlas”Atlas”MarkupMarkup
HTML, Script,HTML, Script,““Atlas”Atlas”MarkupMarkup
““Atlas”Atlas”ServiceServiceProxiesProxies
““Atlas”Atlas”ServiceServiceProxiesProxies
There are TWO There are TWO Programming ModelsProgramming Models
Server-Centric Programming ModelServer-Centric Programming ModelUtilize knowledge of ASP.NET Server Controls (grids, etc).Utilize knowledge of ASP.NET Server Controls (grids, etc).
Good for adding AJAX to existing ApplicationsGood for adding AJAX to existing Applications
Not as efficient as Client-Centric ModelNot as efficient as Client-Centric Model
Client-Centric Programming ModelClient-Centric Programming ModelEnhanced JavaScriptEnhanced JavaScript
Namespaces, Behaviors, Declarative Namespaces, Behaviors, Declarative Programming through XML ScriptProgramming through XML Script
More efficient than Server-CentricMore efficient than Server-Centric
UpdatePanel and UpdatePanel and UpdateProgress UpdateProgress
ControlsControls
Server-Centric Programming ModelServer-Centric Programming Model
Enriching ASP.NET ApplicationsEnriching ASP.NET Applications
Ajax-Enabling PagesAjax-Enabling Pages
– Add a ScriptManager controlAdd a ScriptManager control
Enable Partial Rendering on ScriptManager (true by default)Enable Partial Rendering on ScriptManager (true by default)
– Continue to use the postback model, but work out-of-bandContinue to use the postback model, but work out-of-band
– Only portions of the page are rendered on the serverOnly portions of the page are rendered on the server
– Existing page is updated using scriptExisting page is updated using script
Extend Existing ControlsExtend Existing Controls
– Add rich client-side behavior to enable key scenariosAdd rich client-side behavior to enable key scenarios
– AutoCompleteExtender, etc.AutoCompleteExtender, etc.
ASP.NET Ajax Script Framework is an enabling technologyASP.NET Ajax Script Framework is an enabling technology
– Control developers have a richer target to build forControl developers have a richer target to build for
– Page developers continue to use server controlsPage developers continue to use server controls
Enable key “AJAX” and user experience scenarios Enable key “AJAX” and user experience scenarios in an incremental manner while preserving the in an incremental manner while preserving the
existing server controls and server-side existing server controls and server-side development modelsdevelopment models
Example Key ScenariosExample Key Scenarios
Dynamically update controlsDynamically update controls
– User selects CountryUser selects Country
States are populated based on country selectionStates are populated based on country selection
Cities are populated based on state selectionCities are populated based on state selection
– User selects ProductUser selects Product
Available accessories are populated based on product Available accessories are populated based on product selectionselection
AutoCompleteAutoComplete
– Populates optional dropdown with Server dataPopulates optional dropdown with Server data
Client-centric Web ApplicationsClient-centric Web Applications
Disciplined and more manageable scriptDisciplined and more manageable script
– OOP in JavaScriptOOP in JavaScript
– .NET-like APIs on core script objects.NET-like APIs on core script objects
– Classes to encapsulate data and logic, and attach to Classes to encapsulate data and logic, and attach to HTML in an unobtrusive mannerHTML in an unobtrusive manner
– Declarative XML script to define behavior of application Declarative XML script to define behavior of application (more designer-oriented)(more designer-oriented)
– Cross-browser abstraction layer to provide a uniform DOM Cross-browser abstraction layer to provide a uniform DOM APIAPI
AJAX Control ToolkitAJAX Control Toolkit
Provide a script framework that makes it possible Provide a script framework that makes it possible to create next-generation interactive applications, to create next-generation interactive applications, and to interact easily with the server and services and to interact easily with the server and services
while scripting in a disciplined manner.while scripting in a disciplined manner.
Eye Candy and Data Eye Candy and Data CompletionCompletion
Client-Centric Programming ModelClient-Centric Programming Model
Calling a Web Calling a Web Service from Service from
JavaScriptJavaScriptand returning a and returning a
DataSetDataSet
Client-Centric Programming ModelClient-Centric Programming Model
Extending ASP.NET AjaxExtending ASP.NET Ajax
Ajax Control Toolkit is a community driven, Ajax Control Toolkit is a community driven, open source project hosted at Codeplex.open source project hosted at Codeplex.
DEMO: Open and Run the Control Toolkit DEMO: Open and Run the Control Toolkit ProjectProject
You can create your own Control You can create your own Control Extenders like those in the Toolkit!Extenders like those in the Toolkit!
Design-time support is providedDesign-time support is provided
Enhanced JavaScript through library Enhanced JavaScript through library provides namespaces, events, properties, provides namespaces, events, properties, and more.and more.
Share your Control creations on Codeplex!Share your Control creations on Codeplex!
Creating your Own Creating your Own Control ExtenderControl Extender
Client-Centric Programming ModelClient-Centric Programming Model
Extending ASP.NET AjaxExtending ASP.NET Ajax
Files Created by the Extender ProjectFiles Created by the Extender Project
****Behavior.js - ****Behavior.js - contains JavaScript that you write contains JavaScript that you write to execute on the client. Behaviors are attached to to execute on the client. Behaviors are attached to controls.controls.
****Extender.cs - ****Extender.cs - this is where you will add this is where you will add properties that you want exposed by your control at properties that you want exposed by your control at design time.design time.
****Designer.vb -****Designer.vb -This is a class used for Design-This is a class used for Design-Time functionality in VS (usually do not have to modify)Time functionality in VS (usually do not have to modify)
Extending ASP.NET AjaxExtending ASP.NET AjaxCreating Properties in an Ajax ControlCreating Properties in an Ajax Control
Declare the Property in the Behavior’s prototype:Declare the Property in the Behavior’s prototype:
Declare the Property in the Extender (for the Designer):Declare the Property in the Extender (for the Designer):[ExtenderControlProperty][DefaultValue("")]public int fps{
get {return GetPropertyIntValue("fps");
}set {
SetPropertyIntValue("fps", value);}
}
get_property : function() { return this._property; }, set_property : function(value) {
this._property = value; },
Extending ASP.NET AjaxExtending ASP.NET Ajax
Creating Events in an Ajax ControlCreating Events in an Ajax Control
Declare the Event:Declare the Event:
Raise the event:Raise the event:
this._raiseEvent(‘this._raiseEvent(‘eventNameeventName', ', eventargseventargs ); );
add_eventName : function(handler) { this.get_events().addHandler(‘eventName', handler); }, remove_eventName : function(handler) { this.get_events().removeHandler(‘eventName', handler); },
Session SummarySession Summary
Ajax is a key part of the ASP.NET storyAjax is a key part of the ASP.NET story
ASP.NET Ajax GoalsASP.NET Ajax Goals
– Make it super easy to incorporate AJAX patterns, and Make it super easy to incorporate AJAX patterns, and create rich user experiences, and leverage the browsercreate rich user experiences, and leverage the browser
– Create a natural progression from Web applications to Create a natural progression from Web applications to Smart clients using a common application modelSmart clients using a common application model
preview builds for greater transparency, more preview builds for greater transparency, more opportunities for feedback to have impactopportunities for feedback to have impact
Important NOTES!!Important NOTES!!
Tools to downloadTools to download
– Web Development Helper Web Development Helper http://projects.nikhilk.net/Projects/WebDevHelper.aspxhttp://projects.nikhilk.net/Projects/WebDevHelper.aspx
– IE Developer ToolbarIE Developer Toolbarhttp://www.microsoft.com/downloads/details.aspx?http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en2d5e1db91038&displaylang=en
– Fiddler http://www.fiddlertool.comFiddler http://www.fiddlertool.com
IE7 broke the ability to set breakpoints in IE7 broke the ability to set breakpoints in JavaScript when placed inside a <script> tag in a JavaScript when placed inside a <script> tag in a page. VS 2005 SP1 may fix this…page. VS 2005 SP1 may fix this…
Intro to Forms Authentication with ASP.NET Ajax - Intro to Forms Authentication with ASP.NET Ajax - http://ajax.asp.net/docs/tutorials/UsingFormsAuthehttp://ajax.asp.net/docs/tutorials/UsingFormsAuthenticationTutorial.aspxnticationTutorial.aspx
ResourcesResources
ASP.NET Ajax Web siteASP.NET Ajax Web site
– http://ajax.asp.net/ http://ajax.asp.net/
– Bits, Forums, Quickstarts, Docs, UpdatesBits, Forums, Quickstarts, Docs, Updates
BlogsBlogs
– http://www.nikhilk.nethttp://www.nikhilk.net
– http://weblogs.asp.net/scottguhttp://weblogs.asp.net/scottgu
– http://weblogs.asp.net/bleroyhttp://weblogs.asp.net/bleroy