UsabilityAJAX and other ASP.NET Features

Presented by Peter Gfader

Senior Software Architect

SSA @ SSW

Loves C# and .NET (Java not anymore)

Specializes in

Windows Forms ASP.NET TFS testing Automated tests Silverlight

Peter Gfader

Homework?

Add validation controls onto the EditTemplate of the FormView. 

Required Fields...

Regular ExpressionPostal Code (must be a number)

http://sharepoint.ssw.com.au/Training/UTSNET/

Course Timetable

Course Materials

Course Website

Postback

Last week

Client

Post requestwith data Serve

rResponse

Postback

Bring data to web

Databinding

Last week

DataData source

Postback

Bring data to web

Databinding

Passing parameters

Validation

Last week

Client

Data

Show/view

Enter

Client Server

Database connection with LINQ2SQL

Where is it? How can I change it? How do I maintain it across different

servers/installations?

Last week - Additionals

Session 8: Rich Web Forms AJAX & Other Features

User experience

Usability

AJAX Cross Page Post-backs Validation Groups Maintaining Scroll Positions Control Focus, Default Buttons, Error Focus

Agenda

Client Script Handlers

XML Databinding

URL Rewriting/Mapping for Vanity Urls

ASP.NET 4

SSW Rules to better…

Agenda

http://www.ebay.com.au/

Search drill down

http://www.altavista.com/image/

Searching for images

http://secretgeek.net/W3SCG.asp

Code generator

Browsing experience - bad

Site is slow

Site is a static something

Site is back and forth of data

Flicker on load

Focus gets lost on working with page

Page gives no feedback during input

Losing context during navigation

Site is not alive

Pain

User experience

User experience

UX - Look

UX - Usability

Make site feel alive

React fast

Interact with user

“Joy of use”

UX - Feel

http://www.facebook.com/

Photo gallery

http://www.live.com/?scope=images

Drill down

http://www.google.com/ig

http://maps.google.com/ http://docs.google.com

http://secretgeek.net/wscg.htm

Code generator

Browsing experience - Good

How can we improve UX

AJAX?

Not a cleaning product...

A technology that enables rich interactive web applications

RIA

Asynchronous Javascript And XML

What is AJAX?

Page loads up [23KB]

Parts of the page uses javascript to send a request to the webserver/webservice asking for some data [3 KB]

The javascript on the page then renders the returned data on the current page without needing to refresh the whole page[8 KB]

How does AJAX work?

UpdatePanel

posts partial page back

ScriptManager

manages client script for ASP.NET AJAX

How does ASP.NET AJAX work?

We just retrieve the information we need

In the past we had to retrieve the whole page again!

Makes your applications more responsive

Users can browse around during AJAX call

Users don’t get lost by presenting them a new page

Why should I use AJAX?

Google was a big proponent of AJAX

Almost all new sites use some form of AJAX

http://www.go2web20.net/

Who uses AJAX?

AJAX Extensions

http://ajaxcontroltoolkit.codeplex.com/

Download the Control Toolkit

How do I use AJAX?

Easy way to enable AJAX on your web site UpdatePanel UpdateProgress

Many user contributed controls in the AJAX Toolkit. http://ajax.asp.net/ajaxtoolkit

Highlights: Autocomplete (like google suggest) Calendar Filtered Text Box

Recap - Microsoft AJAX

Component Art

www.componentart.com

RadControls

www.telerik.com

Infragistics

www.infragistics.com

Commercial AJAX Frameworks for .NET

URL Rewriting

XML Databinding

Validation Groups

Cross Page Posting

Other cool features

What’s new in ASP.NET 4.0

SEO – Routing & Permanent Redirect... Google Juice

Live Data Binding...

Enhancements to Dynamic Data

MVC

QueryExtender Control

Deployment

ASP.NET 4

What looks nicer?

Ugly URLs

http://www.ssw.com.au/ssw/Products/ProdCategoryList.aspx?GroupCategoryID=10DOTNEThttp://www.ssw.com.au/ssw/Products/ProdCategoryList.aspx?GroupCategoryID=1SQL

Nice URLs

http://www.ssw.com.au/Products/DotNet http://www.ssw.com.au/Products/SQLServer

Make URLs look nice

P01

Broken link!

protected void Application_BeginRequest(object sender, EventArgs e)

{ if (Request.FilePath == "/about-us.aspx")     {         Response.Redirect ("/about.aspx", true);    } }

Response.Redirect

protected void Application_BeginRequest(object sender, EventArgs e)

{     if (Request.FilePath == "/about-us.aspx")     {         Response.RedirectPermanent("/about.aspx",

true);     }}

Response.RedirectPermanent

P02

What is the difference then?

Response.Redirect("/products.aspx", true); Response.RedirectPermanent("/about.aspx", true);

Behind the scenes

Response.Status = "301 Moved Permanently";Response.StatusCode = 301;   Response.AddHeader("Location","/new-page.asp");Response.End();

Note: Can be done already with ASP.NET

?

Add code to Global.asax to log 404s to a database (OLD_URL, NEW_URL)

Maintain the NEW_URL field

Change Global.asax to:

Look up the 404 in the database If you find a broken link do a permanent redirect to the

new URL Otherwise insert broken link

404 Maintenance #1

?

1. Bing Webmaster center,

2. Google Webmaster tools,

3. ELMAH,

4. IIS SEO toolkit

404 Maintenance #2

Recommendations and How-to’s

Make content search engine-friendly Improve volume and quality of traffic Control how search engines access and display Web

content Inform search engines about locations that are

available for indexing Show broken pages

IIS SEO toolkit

Rewrite and redirect URLs

Handles requests before ASP.NET is aware of (performance!!)

Rewrite module for IIS7

P03

Allow client side data binding in javascript

Can bind to

JSON objects ADO.NET Data Services

Live Binding

P04

Two way binding in ASP.NET (like Silverlight or WPF)

<ul id="imageListView" class="list sys-template"> <li> <span class="name">{{ Name }}</span> <span class="value">{{ Description

}}</span> </li> </ul>

Live Binding

Instead of <%# Eval(“FirstName”) %>

Use XAML style binding

{{FirstName}} – One way/One time binding { binding FirstName, mode=twoWay } – Two

way binding

Support for converters

{binding Height, convert=toFeet, convertBack=fromFeet}

Summary - Live Binding is cool

New field templates for URLs and Email Addresses

Support for inheritance in the data model

Support for Many to Many in EF

Support for Enums

Dynamic Data Enhancements

ASP.NET rocks!!

SSW Standards and Rules

Google Ajax playground

http://code.google.com/apis/ajax/playground/ http://code.google.com/apis/ajaxlibs/

FireBug

http://getfirebug.com/

YSlow

http://developer.yahoo.com/yslow/

Ajax Tutorial

http://www.w3schools.com/Ajax/

Resources

3 things…

PeterGfader@ssw.com.a

u

http://

peitor.blogspot.com

twitter.com/peitor

Thank You!

Gateway Court Suite 10 81 - 91 Military Road Neutral Bay, Sydney NSW 2089 AUSTRALIA

ABN: 21 069 371 900

Phone: + 61 2 9953 3000 Fax: + 61 2 9953 3105

info@ssw.com.auwww.ssw.com.au