Scribd
Upload
55 views35 pages

Beantown Ajax

The document discusses ASP.NET AJAX, which allows asynchronous JavaScript and XML requests in ASP.NET applications. It defines AJAX and outlines key ASP.NET AJAX components like the ScriptManager, UpdatePanel, and Extender Controls. Examples of popular AJAX sites are provided. The benefits and challenges of using AJAX are described, as well as how frameworks like ASP.NET AJAX address complexity and browser compatibility issues.

Uploaded by

katherine
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
55 views35 pages

Beantown Ajax

The document discusses ASP.NET AJAX, which allows asynchronous JavaScript and XML requests in ASP.NET applications. It defines AJAX and outlines key ASP.NET AJAX components like the ScriptManager, UpdatePanel, and Extender Controls. Examples of popular AJAX sites are provided. The benefits and challenges of using AJAX are described, as well as how frameworks like ASP.NET AJAX address complexity and browser compatibility issues.

Uploaded by

katherine
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 35

ASP.

NET AJAX
Eric Tobia 12/7/2006 Beantown .NET UG

Outline
Defining AJAX ASP.NET AJAX Including ASP.NET AJAX Script Manager Update Panel Client Networking - Web/Script Services Extender Controls - Control Toolkit Client Side JavaScript Development

AJAX Sites
GMail http://mail.google.com Google Maps http://maps.google.com Outlook Web Access PageFlakes - http://www.pageflakes.com/ Smart Scoreboard - http://www.smartscoreboard.com/

Acronym
Asynchronous JavaScript And XML

Standard ASP.NET Application


Initial Web Page Request (WebPage.aspx)

Full Post Backs


`

Client (Web Browser)

Web Server

AJAX Application
Initial Web Page Request (WebPage.aspx)

Async Requests

Invisible To The User


`

Client (Web Browser)

Client side script updates the content of the page using the data returned from the async requests

Web Server

Potential Benefits

Make web apps more responsive


Provide

continuous feedback Update only a portion of the page Users dont have to:
Wait for the entire page to refresh Re-orient themselves after a page refresh

Provide real time updates


Simulate

pushing data to the browser Example: A list of stock prices that update without refreshing the whole page

Challenges
Users will start to expect AJAX features Most ASP.NET devs are used to a server side programming model

Sophisticated

AJAX applications require a deep knowledge of JavaScript

Poor tool support for JavaScript in VS


Coding

JS can be time consuming Coding JS can be error prone

Browser incompatibilities

Potential Solution

AJAX Frameworks/Libraries
Make

developers more productive Abstract away complexity


browser compatibility issues

LOTS of AJAX Frameworks


150+

AJAX Frameworks* 16 for .NET* Well go with ASP.NET AJAX for this talk
*Source: http://www.ajaxpatterns.org

Two Frameworks In One

Server Side
Uses

server controls to enable AJAX Very little (if any) JavaScript coding required

Client Side

Library for client side JavaScript development

Sys.* namespaces

Heavy

use of JavaScript or xml-script

Disclaimer
Beta Software There are still some issues Use with caution

Including ASP.NET AJAX


Web.Config MS AJAX Web Site template What about the Web Application Project Template?

Script Manager

Heart of ASP.NET AJAX Required for using ASP.NET AJAX Registers AJAX Client Library Enables partial page rendering (Update Panels) Can be used for registering custom scripts Script Reference JS Proxy Classes For Web Services Service Reference

Update Panel
Update regions of the web page Quickest path to AJAX enabling an ASP.NET site Async Postback/Partial Rendering Post back interception

Update Panel

Update Mode
Always Conditional

Triggers
Children External

Demos
Enhance Existing Pages Update Progress Bar Timer Control

ASP.NET Page Life Cycle

The ScriptManagers PageRequestManager steps in during PreRender() and replaces the Pages Render() method with one that renders Update Panel content.

Client Page Life Cycle Events


Page

Request Manager Events

intializeRequest beginRequest pageLoading pageLoaded endRequest

Client Page Life Cycle Events


// Example of page request event hooking in JS var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_initializeRequest(InitializeRequest/*handler*/); function InitializeRequest(sender, args) { var prm = Sys.WebForms.PageRequestManager.getInstance(); if(ShouldCancelThisRequest(args)) { prm.abortPostBack(); } }

Web/Script Services
Access web services from client side JavaScript Serialize custom classes to JSON

JavaScript

Object Notation

JSON
{"breakfast-menu": { "food":[ {"name": "Belgian Waffles", "price": "5.95", "description": "two of our famous Belgian Waffles with ...", "calories": "650" }, {"name": "Strawberry Belgian Waffles", "price": "7.95", "description": "light Belgian waffles covered with ...", "calories": "900" } ] }
Source: http://www.softwaresecretweapons.com/jspwiki/Wiki.jsp?page=AJAXWithoutXML

JSON
{
"type": "menu", "value": "File", "items": [ {"value": "New", "action": "CreateNewDoc"}, {"value": "Open", "action": "OpenDoc"}, {"value": "Close", "action": "CloseDoc"} ] }

Source: http://en.wikipedia.org/wiki/JSON

Demos
Async web service using JSON AutoCompleteExtender

Extender Controls
ASP.NET server controls Target an existing web control

TargetControlId

Provide designer support Build your own

Control

Toolkit Extender Project

Visual Studio Template

AJAX Control Toolkit


28 Widgets (Mostly Extender Controls) Open Source (CodePlex)

http://www.codeplex.com

Demos
Control Toolkit Samples Filtered Text Box/Watermark

Client Side JavaScript Development


ASP.NET AJAX Client Library Dudewheres my intellisense for JS? Orcas Dudewheres my designer support for xml-script? Orcas

Client Side Controls (JS)


AJAX Control Sys.Preview.UI.Label Sys.Preview.UI.Image Sys.Preview.UI.HyperLink Sys.Preview.UI.Button Sys.Preview.UI.CheckBox Sys.Preview.UI.Select Sys.Preview.UI.TextBox HTML Element <span>, <label> <img> <a href="..."> <input type="button">,<input type="submit">, <input type="reset">,<button> <input type="checkbox"> <select> <input type="text">,<input type="password">, <textarea>

Client Side Controls (JS)


// initialize controls with dom elements
var label = new Sys.Preview.UI.Label($get(MyLabel")); label.set_text(Hello World); var checkbox = new Sys.Preview.UI.CheckBox($get(MyChkBox")); checkbox.set_checked(true); var link = new Sys.Preview.UI.HyperLink($get(MyLink")); link.set_navigateURL("http://www.google.com");

XML Script
This XML-Script would be part of a larger ASPX page
<script type="text/xml-script"> <page xmlns:script="http://schemas.microsoft.com/xml-script/2005"> <components> <label id="MyLabel" /> <button id="MyFirstButton"> <click> <setProperty target="MyLabel" property="cssClass" value=lameStyle"/> </click> </button> <button id="MySecondButton"> <click> <setProperty target="MyLabel" property="cssClass" value=coolStyle"/> </click> </button> </components> </page> </script> MyLabel, MyFirstButton, and [ASPX PAGE]

MySecondButton are elements on the page. lameStyle and coolStyle are CSS classes.

ASP.NET AJAX
Atlas ..and then there were 3

ASP.NET

AJAX 1.0 Beta 2 AJAX Futures CTP AJAX Control Toolkit

documented, will be fully supported


not documented, community supported open source

ASP.NET

ASP.NET

From Atlas to ASP.NET AJAX


Atlas ASP.NET AJAX
ASP.NET AJAX 1.0 Beta 2 Microsoft.Web.Extensions.dll Atlas CTP Microsoft.Web.Atlas.dll

AJAX Futures CTP (Nov) Microsoft.Web.Preview.dll

Atlas Control Toolkit AtlasControlToolkit.dll

AJAX Control Toolkit AjaxControlToolkit.dll

ASP.NET AJAX 1.0 Beta 2

Server
ScriptManager UpdatePanel

JSON

serialization (Web Services)

Client
Type

extensions Partial Rendering (Sys.WebForms)

ASP.NET AJAX Futures CTP

Server
AutoCompleteExtender DragOverlayExtender

Client
Sys.Preview.UI.* xml-script Client

(Button, Label, TextBox, etc.)

side data binding

Thanks!

You might also like