Usability AJAX and other ASP.NET Features
-
Upload
peter-gfader -
Category
Education
-
view
2.283 -
download
0
description
Transcript of Usability AJAX and other ASP.NET Features
![Page 1: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/1.jpg)
UsabilityAJAX and other ASP.NET Features
Presented by Peter Gfader
Senior Software Architect
![Page 2: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/2.jpg)
SSA @ SSW
Loves C# and .NET (Java not anymore)
Specializes in
Windows Forms ASP.NET TFS testing Automated tests Silverlight
Peter Gfader
![Page 3: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/3.jpg)
Homework?
Add validation controls onto the EditTemplate of the FormView.
Required Fields...
Regular ExpressionPostal Code (must be a number)
![Page 4: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/4.jpg)
http://sharepoint.ssw.com.au/Training/UTSNET/
Course Timetable
Course Materials
Course Website
![Page 5: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/5.jpg)
Postback
Last week
Client
Post requestwith data Serve
rResponse
![Page 6: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/6.jpg)
Postback
Bring data to web
Databinding
Last week
DataData source
![Page 7: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/7.jpg)
Postback
Bring data to web
Databinding
Passing parameters
Validation
Last week
Client
Data
Show/view
Enter
Client Server
![Page 8: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/8.jpg)
Database connection with LINQ2SQL
Where is it? How can I change it? How do I maintain it across different
servers/installations?
Last week - Additionals
![Page 9: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/9.jpg)
Session 8: Rich Web Forms AJAX & Other Features
![Page 10: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/10.jpg)
User experience
Usability
AJAX Cross Page Post-backs Validation Groups Maintaining Scroll Positions Control Focus, Default Buttons, Error Focus
Agenda
![Page 11: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/11.jpg)
Client Script Handlers
XML Databinding
URL Rewriting/Mapping for Vanity Urls
ASP.NET 4
SSW Rules to better…
Agenda
![Page 12: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/12.jpg)
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
![Page 13: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/13.jpg)
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
![Page 14: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/14.jpg)
User experience
![Page 15: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/15.jpg)
User experience
![Page 16: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/16.jpg)
UX - Look
![Page 17: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/17.jpg)
UX - Usability
![Page 18: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/18.jpg)
Make site feel alive
React fast
Interact with user
“Joy of use”
UX - Feel
![Page 19: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/19.jpg)
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
![Page 20: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/20.jpg)
How can we improve UX
![Page 21: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/21.jpg)
AJAX?
![Page 22: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/22.jpg)
Not a cleaning product...
A technology that enables rich interactive web applications
RIA
Asynchronous Javascript And XML
What is AJAX?
![Page 23: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/23.jpg)
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?
![Page 24: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/24.jpg)
UpdatePanel
posts partial page back
ScriptManager
manages client script for ASP.NET AJAX
How does ASP.NET AJAX work?
![Page 25: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/25.jpg)
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?
![Page 26: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/26.jpg)
Google was a big proponent of AJAX
Almost all new sites use some form of AJAX
http://www.go2web20.net/
Who uses AJAX?
![Page 27: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/27.jpg)
AJAX Extensions
http://ajaxcontroltoolkit.codeplex.com/
Download the Control Toolkit
How do I use AJAX?
![Page 28: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/28.jpg)
![Page 29: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/29.jpg)
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
![Page 30: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/30.jpg)
Component Art
www.componentart.com
RadControls
www.telerik.com
Infragistics
www.infragistics.com
Commercial AJAX Frameworks for .NET
![Page 31: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/31.jpg)
URL Rewriting
XML Databinding
Validation Groups
Cross Page Posting
Other cool features
![Page 32: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/32.jpg)
What’s new in ASP.NET 4.0
![Page 33: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/33.jpg)
SEO – Routing & Permanent Redirect... Google Juice
Live Data Binding...
Enhancements to Dynamic Data
MVC
QueryExtender Control
Deployment
ASP.NET 4
![Page 34: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/34.jpg)
What looks nicer?
![Page 35: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/35.jpg)
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
![Page 37: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/37.jpg)
protected void Application_BeginRequest(object sender, EventArgs e)
{ if (Request.FilePath == "/about-us.aspx") { Response.Redirect ("/about.aspx", true); } }
Response.Redirect
![Page 38: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/38.jpg)
protected void Application_BeginRequest(object sender, EventArgs e)
{ if (Request.FilePath == "/about-us.aspx") { Response.RedirectPermanent("/about.aspx",
true); }}
Response.RedirectPermanent
P02
![Page 39: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/39.jpg)
What is the difference then?
Response.Redirect("/products.aspx", true); Response.RedirectPermanent("/about.aspx", true);
Behind the scenes
![Page 40: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/40.jpg)
Response.Status = "301 Moved Permanently";Response.StatusCode = 301; Response.AddHeader("Location","/new-page.asp");Response.End();
Note: Can be done already with ASP.NET
![Page 41: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/41.jpg)
?
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
![Page 42: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/42.jpg)
?
1. Bing Webmaster center,
2. Google Webmaster tools,
3. ELMAH,
4. IIS SEO toolkit
404 Maintenance #2
![Page 43: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/43.jpg)
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
![Page 44: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/44.jpg)
Rewrite and redirect URLs
Handles requests before ASP.NET is aware of (performance!!)
Rewrite module for IIS7
P03
![Page 45: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/45.jpg)
![Page 46: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/46.jpg)
![Page 47: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/47.jpg)
Allow client side data binding in javascript
Can bind to
JSON objects ADO.NET Data Services
Live Binding
P04
![Page 48: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/48.jpg)
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
![Page 49: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/49.jpg)
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
![Page 50: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/50.jpg)
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
![Page 51: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/51.jpg)
ASP.NET rocks!!
![Page 52: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/52.jpg)
SSW Standards and Rules
![Page 53: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/53.jpg)
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
![Page 55: Usability AJAX and other ASP.NET Features](https://reader033.fdocuments.us/reader033/viewer/2022061301/54d7f1034a7959ba528b4584/html5/thumbnails/55.jpg)
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