dev302: asp.net ajax patterns

23
Tanapol Pavadachochai Lead Developer Genxas Songsak Channarukul, Ph.D. Assumption University Thaisharp.net founder

Upload: builiem

Post on 14-Feb-2017

228 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: DEV302: ASP.NET AJAX Patterns

Tanapol PavadachochaiLead DeveloperGenxas

Songsak Channarukul, Ph.D.Assumption University Thaisharp.net founder

Page 2: DEV302: ASP.NET AJAX Patterns

Introduction to ASP.NET AJAX

AJAX Sample

Partial RenderingEnabling AJAX with UpdatePanels

Optimizing UpdatePanels Usage

AJAX with Web Services

Logical Navigation

ASP.NET Control Toolkit

Core Architecture of ASP.NET AJAX

Page 3: DEV302: ASP.NET AJAX Patterns

Asynchronous JavaScript and XML

Improving end-user perception and usability

Faster, smoother, intuitive

Visually appealing

Personalized

Improving network/bandwidth usage

Partial rendering

Light-weight web service calls

Improving development approach to scripting

Namespaces, interfaces, inheritance

Properties, events, dispose

Page 4: DEV302: ASP.NET AJAX Patterns

Available at http://ajax.asp.net

ASP.NET AJAX v1.0

Baseline – will be integrated into ASP.NET

ASP.NET AJAX Futures CTP

Features that are not yet ready to be part of base product.

AJAX Control Toolkit

Built on ASP.NET AJAX, goal is to be community developed and supported

Adds AJAXy behavior to ASP.NET Controls

Page 5: DEV302: ASP.NET AJAX Patterns

AJAX Sample

Page 6: DEV302: ASP.NET AJAX Patterns

Partial rendering via UpdatePanels

Web services – AutoCompletionTextBox

Customized progress

Water Markup TextBox

Page 7: DEV302: ASP.NET AJAX Patterns

Preserves postback programming model

UpdatePanels declare regions to update

Easy and declarative

Stateful (equivalent to a postback)

Init

Load State

Process Postback

Load

Postback Events

Save State

PreRender

Render

Unload

PageRequestManager

Form Submit

Form Data + Custom Header

Partial Rendering Response

Click

Page 8: DEV302: ASP.NET AJAX Patterns

Enable AJAX with UpdatePanels

Page 9: DEV302: ASP.NET AJAX Patterns

Partial rendering via UpdatePanels

Better user experience

Ease of usage

Server control

More efficiency on network traffic (have better way to gain more efficiency)

Page 10: DEV302: ASP.NET AJAX Patterns

Optimizing UpdatePanels Usage

Page 11: DEV302: ASP.NET AJAX Patterns

Optimize what to update and when

UpdateMode=“Conditional”

Use triggers, Update() for granular control

Postbacks are still postbacks

Which user actions should be postbacks?

Carefully evaluate AutoPostBack

Consider alternative means of interactivity

Page 12: DEV302: ASP.NET AJAX Patterns

Data and operations exposed as web services

Support for SOAP (.asmx) and RESTful models

JSON format, object serialization

Higher-level networking stack

Sys.Net.WebRequest – abstracts XMLHttpRequest

Script proxies for .asmx enable simple method call model

Ideal for stateless requests

Lean wire format

Generally useful in client-centric apps

Alternative to partial updates where appropriate

Page 13: DEV302: ASP.NET AJAX Patterns

Complementary models

Partial rendering – when you need state, server-side control logic

Pros: easy to use, control properties, page state

Cons: full postback, one at a time

Web services – when your logic is stateless

Pros: light-weight, parallel

Cons: need to write necessary code to package UI as parameters

Page 14: DEV302: ASP.NET AJAX Patterns

AJAX with Web Services

Page 15: DEV302: ASP.NET AJAX Patterns

Postbacks flood navigation history with intermediate steps

AJAX-based pages often have no history

Back button goes the whole way back to the previous page

How can we improve navigation?

App defines a set of logical views

App controls which updates transition between views

Logical views added to navigation history

Bonus: bookmarking and indexing

Page 16: DEV302: ASP.NET AJAX Patterns

Logical Navigation

Page 17: DEV302: ASP.NET AJAX Patterns

Joint project between the community and

Microsoft

Built upon the ASP.NET 2.0 AJAX Extensions

Aims to be the biggest and best collection of

web-client components available

Page 18: DEV302: ASP.NET AJAX Patterns

ASP.NET AJAX Control Toolkit

Page 19: DEV302: ASP.NET AJAX Patterns

General:

Building AJAX apps using ASP.NET –

Page developers get rich controls and behaviors

Component developers get a well-orchestrated framework

Building rich client apps

Server and Client components

Client FX (JS)

Type System,Type safety, OO concepts, Browser compatComponent, Control, BehaviorService & app service proxies

Server FX

ExtenderControlScriptControl

ScriptManagerUpdatePanel ..

Page 20: DEV302: ASP.NET AJAX Patterns

Type.registerNamespace(‘Custom’)

Custom.MyClass = function(..) {

Custom.MyClass.initializeBase(..)

}

Custom.MyClass.prototype = {

get/set_propertyMember: function()

methodMember: function(),

add/remove_eventMember: function()

}

Custom.MyClass.registerClass(

‘Custom.MyClass’, Sys.UI.Control)

new Error.argumentNull(..)

Sys.UI.Control.isInstanceOfType(

myClass_instance)

NamespacesCtor

‘Class members’

Define class and inheritance

‘typed’ exceptions

Reflection-like APIs

Debug and release scripts for development and production environments

Page 21: DEV302: ASP.NET AJAX Patterns

ScriptManager: Manages the AJAX app in the server

Declarative and programmatic script references

Handles scripts for:

Debug and release patterns

Path-based and assembly-based script resources

..

ExtenderControl, WebScriptControl,

ScriptDescriptors for ‘instance’ scripts

ScriptReferences for ‘library’ scripts

Page 22: DEV302: ASP.NET AJAX Patterns

AJAX enables rich, next-generation apps

ASP.NET AJAX makes it easy

Integrate AJAX patterns into ASP.NET model

Simple out-of-the-box functionality

Solid platform with extensibility to go further

1.0 shipped! Ready for primetime

Page 23: DEV302: ASP.NET AJAX Patterns