Download ppt - Building the Next Generation of Web Applications with ASP.NET

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


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



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; },


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