ASP.NET AJAX with Visual Studio 2008

asp.net ajax with visual studio 2008

email [email_address] Caleb Jenkins Senior Consultant Training Mentor blog developingUX.com twitter .com/calebjenkins

www.DevelopingUX.com www.ImprovingEnterprises.com http://CommunityCast.tv http://ineta.org

asp.net ajax with visual studio 2008

? business results

the ux lever offers new market opportunities differentiates product/service provides operational efficiency and business insight raises the bar

ux business results

limitations of web applications

Traditional Web Applications use costly Postbacks for Server operations and UI operations. No “ integrated ” way to work with client side scripting

A synchronous J avaScript A nd X ML

Not a “new” technology – It’s a specific way of using existing technologies.

Used in Outlook Web Access (IE 5)

Transfer just the “ data ” between browser and server

<XML DATA> JSON DATA; REST SOAP

Side Note:

not all AJAX uses XML

Another popular data transfer mechanism is JSON (Pronounced: Jason)

J ava S cript O bject N otation

JSON is much faster than XML for browser to process

not all XML is SOAP WebServices

another type of WebServices is a light weight REST service (popular with PHP and Ruby on Rails)

AJAX sounds better than AJAJ

Difficulties with AJAX

Too “Close to the wire ”

Heavy DHTML plumbing required

Browser compatibilities with DHTML

AJAX can also refer to a “ web 2.0 ” site

Embodies not only AJAX data calls, but an over all adherence to good User Experience ( UX ) principals.

Usability

CSS/ (x)HTML Standards

Overall Immersive Web Experience

ASP.NET AJAX has features to support both : AJAX Data Calls and Rich UX

Side Note:

ASP.NET AJAX Web Server IE Firefox Safari Browser Clients JSON Bridge Support Membership & Personalization Support ASP.NET Server Control Integration ASP.NET AJAX Client JavaScript Libraries MicrosoftAjax.js MicrosoftAjax.en-us.js MicrosoftAjax.debug.js MicrosoftAjaxTimer.js MicrosoftAjaxWebForms.js IIS & ASP.NET Apache & PHP ColdFusion

Client Centric

Two Basic Development Models Server Centric

Client Centric

leaner on the wire smart client architecture longer development time less IDE support UI and Data on the wire keep viewstate intact better developer productivity ASP.NET type IDE support Server Centric

Server-Centric Programming Model Browser Presentation (HTML/CSS) ASP.NET Application Services Page Framework, Server Controls Client Script Framework Client Application Services Component/UI Framework, Controls ASP.NET Application Pages UI Behavior (Managed Code) Input Data Updated UI + Behavior Initial Rendering (UI + Behavior)

Client-Centric Programming Model Browser Presentation (HTML/CSS) AJAX Service Proxies UI Behavior (Script) ASP.NET Application Services Page Framework, Server Controls ASP.NET Application Pages Web Services Atlas Script Framework Client Application Services Component/UI Framework, Controls Initial Rendering (UI + Behavior) Data Data

AJAX Application

Do not trust client input

Do not enforce business rules on the client

Do not think that this is for “Everything”

Is it bookmark-able?

Search Engine Spiderable ( SEO )?

Do I need to be able use the back button? { consider history extender }

Consider my API and API Security

No-No’s and Gotchas!

External Services My Application Client Bridge Proxy (Script) External Service Server Pages UI + Logic (HTML + Script) Bridge Config Initiate Request Cache Lookup Create Service Request Invoke Service Process Service Response Update Display

asp.net/ajax/showcase examples

ajax.asp.net /downloads/

Separate download

Library of free ASP.NET AJAX enabled controls

ASP.NET 2.0 and .NET 3.5 (w / w/o source) available

Download from http://ajax.asp.net

Collaborative source model

All source freely available with modification license

Microsoft & non-Microsoft developers contribute

Already contains 35+ really cool controls

Goal is to get 50-100 great controls

Biggest challenge creating new controls?

Thinking of behaviors that aren’t already offered!

Control Toolkit

Demo

“ Hello World” with the UpdatePanel ScriptManager, UpdatePanel, Triggers, UpdateProgress

protected void UpdatePanel1_PreRender(object sender, EventArgs e) { // This code will only be executed if the partial postback // was raised by a __doPostBack('UpdatePanel1', '') if (Request[" __EVENTTARGET "] == UpdatePanel1. ClientID ) { // Insert magic here. } } what about when you want to execute code only if a particular UpdatePanel is targeted? check the __EVENTTARGET: UpdatePanel Events use triggers check for !IsPostBack and !IsInAsyncPostBack

UpdatePanel Events know your asp.net page life cycle UpdatePanel Button updatepanel_ load button_ click updatepanel_ prerender

Demo

Working with Extenders ASP.NET AJAX Control Toolkit

2008

Demo

Working with Visual Studio 2008 ASP.NET 3.5 Preview, Debug, JavaScript Intellisense

custom extender controls provide framework for hooking up properties and links between server and client side components provide framework for hooking up properties and links between server and client side components

custom extender controls provide framework for hooking up properties and links between server and client side components

ASP.NET AJAX Components types of client components

Demo

Building Your Own Extender Extender Walkthrough: Confirm Button Extender

IE7 with Developer Toolbar

FireFox with Web Developer ToolBar

FireFox with FireBug

Nikhil’s Web Developer Helper http://projects.nikhilk.net/Projects/WebDevHelper.aspx

Resources + Tools (!)

How Do I Videos

How Do I Videos

How Do I Videos

“ Official ASP.NET AJAX” - http://ajax.asp.net

Fiddler http://www.fiddlertool.com/fiddler/

JavaScript Bible

Resources + Tools ++

copyright

[all images in this presentation are the property and copyright of their owners… Most of which I just found on the Internet and really have no idea who that might be.] copyright

email [email_address] Caleb Jenkins Senior Consultant Training Mentor blog developingUX.com twitter .com/calebjenkins

www.ImprovingEnterprises.com http://CommunityCast.tv http://ineta.org www.DevelopingUX.com

http://ImprovingEnterprises.com Improving… It’s what we do!