rvnug.org

Server Centric Ajax Developmentwith Atlas

Brian Johnston, MCP

Brian C. Lanham, MCP (.NET)

November 2006

Agenda

• What is AJAX and Why is it Important

• How to Use AJAX

• When and Where to Use AJAX

Web Application Architecture

• Web Browser Posts Request to Web Server

• Web Server Responds to Request and Sends Response to Web Browser

• User Makes Additional Requests Based on Data

• Cycle Repeats

ASP.NET Web Development

• ASP.NET Significantly Eases Our Jobs

• The Robust Technology Translates to More Robust Web Applications

• Consistency is Improved, Allowing Us to Build Larger Applications

• Resource Management and Internationalization Support Means a Broader Audience

Problems with Today’s Web Apps

• Users Have Many (often Interrelated) Features, Available on a Single Page

• Ever-Increasing Amounts of Information are Sent to the Users

• Users Continue to Increase the Amount of Storage they Consume

• Web Applications are MUCH More Complex

Row you lazy dogs! Greeks are dying!(or “Ajax to the Rescue”)

• Number of Round Trips

• Bandwidth

• Latency

• Performance

• General User Experience

AJAX in Context

• AJAX is NOT specific to .NET

• AJAX can be thought of as a “Mini Web Browser…Exactly like the real Web browser in every way except 1/3 the size.”

• Microsoft’s Implementation of AJAX for the .NET platform is called “ASP.NET AJAX”

• ASP.NET 2.0 Supports AJAX as do MANY Vendor Controls

Using AJAX – Conceptually

• XmlHttpRequest Object

• JavaScript

• DHTML & Document Object Model (DOM) Support

• XML Data Transport

ASP.NET AJAX Server Controls

Goal: Easily enhance any ASP.NET web applicationApplication UI and core logic still runs on serverAvoid need to master JavaScript and asynchronous programming

Use AJAX techniques to reduce roundtripsEnable incremental page UI updates (avoid full page refreshes)Scenarios: data navigation and editing, form validation, auto refresh

Enable richer interactivity for existing ASP.NET controlsUse the same controls, object model and events you already knowExtenders to add AJAX behaviors to any ASP.NET controlsExamples: auto-completion, web-parts, drag-and-drop, tooltips

New, richer ASP.NET server controlsServer wrappers for AJAX client controlsExamples: DateTimePicker, RichTextBox, Re-Order List

<atlas:updatepanel> control

Container control that enables “updatable” regions in a pageAtlas provides a XmlHttp based postback infrastructure

Some non-updatable content and controls...

<asp:UpdatePanel id=“u1” runat=“server”> <ContentTemplate>

This content can be dynamically updated!

<asp:label id="Lablel1” runat=“server”/> <asp:button id=“button1” text=“Push Me!” runat=“server”/>

<ContentTemplate></asp:UpdatePanel>

More non-updatable content and controls...

Simple UpdatePanel Demo

<asp:UpdatePanel> Under the Covers

AJAX intercepts post-back submit actions on client

Uses XMLHttp to fire postback action to server

Postback events fire like normal on server

Only content of updatepanel regions returned

Changed updatepanel regions replaced on client

<asp:UpdatePanel> Postbacks

All post-back actions for controls declared within an updatepanel control will cause Ajax-based post-backs with incremental page refresh

Post-back action for controls outside of an updatepanel control will by default cause normal postbacks

<asp:UpdatePanel> Postbacks

‘ the below button will cause a normal full-page postback and update<asp:button id=“NormalPostBack” onclick=“btn1_click” runat=“server”/>

<asp:UpdatePanel id=“u1” runat=“server”> <ContentTemplate>

Updatable content...

‘ the below button will cause an Ajax postback and refresh <asp:button id=“AjaxPostback” onclick=“btn2_click” runat=“server”/>

</ContentTemplate></asp:UpdatePanel>

<asp:UpdatePanel> Triggers

Triggers can be used to associate UpdatePanels on the page with postback controls declared outside of the UpdatePanel

<asp:ControlEventTrigger>Refresh the UpdatePanel when a control event fires

<asp:ControlValueTrigger> Update the UpdatePanel when a control value changes

<asp:UpdatePanel> Triggers

<asp:button id=“AjaxPostback” onclick=“btn1_click” runat=“server”/>

<asp:UpdatePanel id=“u1” runat=“server”> <ContentTemplate>

This content will be updated when a button is clicked outside of the UpdatePanel contentemplate...

</ContentTemplate>

<Triggers> <asp:ControlEventTrigger controlId=“AjaxPostBack” EventName=“Click”/> </Triggers>

</asp:UpdatePanel>

UpdatePanel with Triggers

<asp:UpdatePanel> Refresh Modes

Multiple UpdatePanel Controls can be added to a pageSometimes you only want to update one panel…

UpdatePanel control supports two update modes:“Always” = Refresh every-time an Ajax postback occurs“Conditional” = Refresh when specific Ajax postback occurs

Conditional refreshes can be done via triggers:<asp:ControlEventTrigger> -- Update on control event fires<asp:ControlValueTrigger> -- Update when value changes

Conditional refreshes can also be triggered via code:UpdatePanel1.Update() method causes that panel to refresh

<asp:UpdatePanel> Refresh Modes

<asp:button id=“AjaxPostback” onclick=“btn1_click” runat=“server”/><asp:textbox id=“TextBox1” runat=“server”/>

<asp:UpdatePanel id=“u1” mode=“Conditional” runat=“server”> <ContentTemplate>

This content will only be updated when a button is clicked outside of the UpdatePanel contentemplate, or if the TextBox1.Text property changes

</ContentTemplate>

<Triggers> <asp:ControlEventTrigger controlId=“AjaxPostBack” EventName=“Click” /> <asp:ControlValueTrigger controlId=“TextBox1” PropertyName=“Text”/> </Triggers>

</asp:UpdatePanel>

Conditional UpdatePanel Demo

<asp:UpdateProgress> control

Delivers ability to provide “status” UI while waiting on response from a server

Remember that “A” in “Ajax” stands for AsynchronousNeed to provide way for users to understand latencyNeed to provide way for users to cancel requests

UpdateProgress control can be placed anywhere on pageTemplated control allows any content (e.g. animated .gif)Can use CSS to position/style anywhere

<asp:UpdateProgress> control

<asp:UpdatePanel id=“u1” mode=“Conditional” runat=“server”> <ContentTemplate> <asp:gridview id=“GridView1” runat=“server”> ... </asp:gridview> </ContentTemplate>

</asp:UpdatePanel>

<asp:UpdateProgress>

<ProgressTemplate> <div class="updateprogress"> <img src="images/progress_animation.gif" /> Updating... </div> </ProgressTemplate>

</asp:UpdateProgress>

<asp:UpdateProgress> control

<asp:UpdateProgress>

<ProgressTemplate> <div class="updateprogress">

<img src="images/progress_animation.gif" /> Updating... <asp:linkbutton id=“abortButton” text=“Cancel” runat=“server”/>

</div> </ProgressTemplate>

</asp:UpdateProgress>

UpdateProgress Demo

<asp:TimerControl>

<asp:TimerControl> is a simple control that can be used to refresh updatepanel controls based on time duration

<asp:TimerControl>

<asp:TimerControl ID="Timer1" runat="server" Enabled="true" Interval="5000" OnTick="UpdateTimestamp“/>

This page will update with the server timestamp every 5 seconds.

<asp:UpdatePanel ID="upanel" runat="server"> <ContentTemplate> <asp:Label ID="Timestamp" runat="server"></asp:Label> </ContentTemplate>

<Triggers> <atlas:ControlEventTrigger ControlID="Timer1" EventName="Tick"/> </Triggers></asp:UpdatePanel>

TimerControl Demo

<asp:AutoCompleteExtender>

Enables textbox auto-complete supportCallback to web-service on server for word listSupports both .asmx and WCF based web-services (both using the built-in Atlas JSON bridge)

Useful example of “extender” controlsExtenders allow pointing to existing server controls

Other “extender” controls that are being planned: Watermark, popup, drag/drop, masked edit, date-time picker, tool tips, etc.

<asp:AutoCompleteExtender>

<asp:textbox id=“CustomerSearch” runat=“server”/>

<asp:AutoCompleteExtender ID="AutoComplete" runat="server">

<asp:AutoCompleteProperties Enabled="true" ServiceMethod="GetCustomerName" ServicePath="~/CustomerService.asmx" TargetControlID="CustomerSearch" />

</asp:AutoCompleteExtender>

<asp:AutoCompleteExtender>

public class CustomerSearch : System.Web.Services.WebService {

[WebMethod] public string[] GetCustomerName(string prefixText, int count) { // todo: take prefixText and generate suggestion list }}

AutoCompleteExtender Demo

Oh Boy! Where do I start?

• AJAX is NOT a Panacea• Performance is still an issue

• AJAX is NOT Significantly Architectural• You Can Refactor to Implement it after the Initial

Release

• AJAX is Generally NOT Supported on Down-Level (Mobile) Browsers

Aw Dad! So When Can I Play?

• Status Areas & Long-Running Processes

• Simple Feedback Forms

• Large Amounts of (Hierarchical) Data

• Sit-Rep Panels

• Auto-Save Features

AJAX 411

• Beginning AJAX with ASP.NET• http://www.amazon.com/Beginning-Ajax-ASP-NET-Wallace-McClure/dp/04717854

4X/sr=8-1/qid=1162776118/ref=pd_bbs_sr_1/102-5586067-6518501?ie=UTF8&s=books

• Scott Guthrie’s Blog• http://weblogs.asp.net/scottgu/

• ASP.NET AJAX Site• http://ajax.asp.net/

Thank You for Attending!