Exploring the ASP.NET AJAXExploring the ASP.NET AJAXControl ToolkitControl Toolkit

Robert BoedigheimerRobert Boedigheimer

About the SpeakerAbout the Speaker

MCPD Web, Charter Member MCSD .NET, Early Achiever MCAD .NET, Charter Member Web developer since 1995 Columnist for aspalliance.com

http://aspadvice.com/blogs/robertb/ robertb@aspalliance.com

Why AJAX?Why AJAX?

Perform page updates instead of pagereplacements (flicker-free UI)

Improve user experience with more interactiveweb pages

Take advantage of client capabilities Make “out of band” calls to the server

Why Now?Why Now?

Vast majority of deployed browsers supportthe required building blocks– XmlHttpRequest– Updatable DOM– JavaScript– CSS

DemoDemo

Registration (Before and After)

ASP.NET AJAX 1.0 (Formerly ASP.NET AJAX 1.0 (Formerly ““AtlasAtlas””))

ASP.NET 2.0 AJAX Extensions– Free supported Microsoft AJAX framework– Extends ASP.NET with AJAX features– Separate download, released January 2007

Microsoft AJAX Library– Client side JavaScript framework that adds object-oriented and

cross browser extensions to JavaScript– Usable on other development platforms (PHP, etc)– Installed as part of AJAX Extensions

ASP.NET AJAX Control Toolkit– Shared source project, collaboration between Microsoft and

developer community– Set of Extenders and Controls (34 in release 1.0.10920.0) to

add AJAX functionality to ASP.NET web sites

AJAX Control ToolkitAJAX Control Toolkit

“Server centric” approach to adding AJAX toASP.NET web sites

Useful controls and good example of how tocreate own controls

First release March 2007 Microsoft employees, ~14 non-Microsoft

contributors No official support (forums, voting, source

code included)

AJAX Control Toolkit (cont)AJAX Control Toolkit (cont)

Controls– Accordion

– Rating– TabContainer

– ReorderList

Extenders– Behavior - JavaScript code that adds new functionality to

markup that was created by an ASP.NET control

– ASP.NET control that associates a behavior with a “family” ofcontrols

– Some are “AJAX related” and some pure client JavaScript

AJAX Control Toolkit SetupAJAX Control Toolkit Setup

1. Install ASP.NET AJAX Extensions2. Download and unzip AjaxControlToolkit.zip3. Add to Visual Studio 2005 toolbox4. Create a new web site in Visual Studio 2005

using template “ASP.NET AJAX-Enabled WebSite”

5. Add <asp:ScriptManager> to a page6. Add <controls> section to web.config

– Avoids need for @Register in each page– Consistent tag prefix

DemoDemo

Enhancing an Existing ASP.NET 2.0 PageUsing the AJAX Control Toolkit

AjaxControlToolkit.slnAjaxControlToolkit.sln

SampleWebSite– Live examples of each control and extender– Source code provided

AjaxControlToolkit– Source code for toolkit– Includes AjaxControlToolkit.snk for signing

ToolkitTests– Automated regression tests for toolkit– Use when making modifications to source code yourself

TemplateVSI– Useful when building own extenders

DemoDemo

AJAX Control Toolkit Solution

Performance ConsiderationsPerformance Considerations

<act:ToolkitScriptManager>– AJAX Control Toolkit replacement for standard AJAX

<asp:ScriptManager>– Main benefit is “Script Combining” which combines the various

JavaScript files for a page into a single request (example pagerequests to scriptResource.axd went from 24 down to 5)

<scriptResourceHander>– Web.config setting, defaults to cache (server) and compress (not IE

6)

Release and Debug scripts– ScriptMode – “Release” or “Debug” just affects core AJAX JavaScript

files (MicrosoftAjax.js 82K vs. 254K)

SummarySummary

AJAX Control Toolkit provides– A set of controls and extenders to bring AJAX

functionality to ASP.NET web sites– Greatly improved user experience– “Server centric” approach with very little code required

(server or client JavaScript)

Exploit AJAX without initial concerns– Browser differences (AJAX Library)– Developer’s lack of JavaScript experience– Familiar development style with server controls

ResourcesResources

http://asp.net/ajax http://asp.net/ajax/control-toolkit www.codeplex.com/atlasControlToolkit http://www.asp.net/learn/ajax-videos

QuestionsQuestions

http://aspadvice.com/blogs/robertb/ robertb@aspalliance.com