UsabilityAJAX and other ASP.NET FeaturesPresented by Peter GfaderSenior Software Architect
Peter GfaderSSA @ SSWLoves C# and .NET (Java not anymore)Specializes in Windows FormsASP.NETTFS testingAutomated testsSilverlight
Homework?Add validation controls onto the EditTemplate of the FormView. Required Fields	...Regular ExpressionPostal Code (must be a number)
Course Websitehttp://sharepoint.ssw.com.au/Training/UTSNET/Course TimetableCourse Materials
Mono Supports ASP.NET 1.1 and most of ASP.NET 2.0http://mono-project.com/FAQ:_ASP.NETWeb serverHosting MonoApache with mod_monoFastCGIXSPhttp://mono-project.com/ASP.NETFist session questions
PostbackLast week
PostbackBring data to webDatabindingLast weekDataData source
PostbackBring data to webDatabindingPassing parametersValidationLast weekClientShow/viewDataEnterClientServer
Database connection with LINQ2SQLWhere 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
AgendaUser experienceUsabilityAJAXCross Page Post-backsValidation GroupsMaintaining Scroll PositionsControl Focus, Default Buttons, Error Focus
AgendaClient Script HandlersXML DatabindingURL Rewriting/Mapping for Vanity UrlsASP.NET 4SSW Rules to better…
http://www.ebay.com.au/Search drill downhttp://www.altavista.com/image/Searching for imageshttp://secretgeek.net/W3SCG.aspCode generatorBrowsing experience - bad
Site is slowSite is a static somethingSite is back and forth of dataFlicker on loadFocus gets lost on working with pagePage gives no feedback during inputLosing context during navigationSite is not alivePain
User experience
User experience
UX - Look
UX - Usability
Make site feel aliveReact fastInteract with user“Joy of use”UX - Feel
http://www.facebook.com/Photo galleryhttp://www.live.com/?scope=imagesDrill downhttp://www.google.com/ighttp://maps.google.com/http://docs.google.comhttp://secretgeek.net/wscg.htmCode generatorBrowsing experience - Good
How can we improve UX
AJAX?
What is AJAX?Not a cleaning product...A technology that enables rich interactive web applicationsRIAAsynchronous JavascriptAnd XML
How does AJAX work?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 ASP.NET AJAX work?UpdatePanelposts partial page backScriptManagermanages client script for ASP.NET AJAX
Why should I use AJAX?We just retrieve the information we needIn the past we had to retrieve the whole page again!Makes your applications more responsiveUsers can browse around during AJAX callUsers don’t get lost by presenting them a new page
Who uses AJAX?Google was a big proponent of AJAXAlmost all new sites use some form of AJAXhttp://www.go2web20.net/
How do I use AJAX?AJAX Extensionshttp://ajaxcontroltoolkit.codeplex.com/Download the Control Toolkit
Recap - Microsoft AJAXEasy way to enable AJAX on your web siteUpdatePanelUpdateProgressMany user contributed controls in the AJAX Toolkit. http://ajax.asp.net/ajaxtoolkitHighlights:Autocomplete (like google suggest)CalendarFiltered Text Box
Commercial AJAX Frameworks for .NETComponent Art www.componentart.comRadControlswww.telerik.comInfragisticswww.infragistics.com
Other cool featuresURL RewritingXML DatabindingValidation GroupsCross Page Posting
What’s new in ASP.NET 4.0
SEO – Routing & Permanent Redirect... Google JuiceLive Data Binding...Enhancements to Dynamic DataMVCQueryExtender ControlDeploymentASP.NET 4
What looks nicer?
Ugly URLshttp://www.ssw.com.au/ssw/Products/ProdCategoryList.aspx?GroupCategoryID=10DOTNEThttp://www.ssw.com.au/ssw/Products/ProdCategoryList.aspx?GroupCategoryID=1SQLNice URLshttp://www.ssw.com.au/Products/DotNethttp://www.ssw.com.au/Products/SQLServerMake URLs look niceP01
Broken link!
protectedvoidApplication_BeginRequest(object sender, EventArgs e){    if (Request.FilePath == "/about-us.aspx")     {         Response.Redirect ("/about.aspx", true);    } }Response.Redirect
protectedvoidApplication_BeginRequest(object sender, EventArgs e){     if (Request.FilePath == "/about-us.aspx")     {         Response.RedirectPermanent("/about.aspx", true);     }}Response.RedirectPermanentP02
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 fieldChange Global.asax to:Look up the 404 in the databaseIf you find a broken link do a permanent redirect to the new URLOtherwise insert broken link404 Maintenance #1
?Bing Webmaster center, Google Webmaster tools, ELMAH, IIS SEO toolkit404 Maintenance #2
Recommendations and How-to’sMake content search engine-friendlyImprove volume and quality of trafficControl how search engines access and display Web content Inform search engines about locations that are available for indexingShow broken pagesIIS SEO toolkit
Rewrite and redirect URLsHandles requests before ASP.NET is aware of (performance!!)Rewrite module for IIS7P03
Allow client side data binding in javascriptCan bind to JSON objectsADO.NET Data ServicesLive BindingP04
Two way binding in ASP.NET (like Silverlight or WPF)<ulid="imageListView"class="list sys-template">        <li>            <spanclass="name">{{ Name }}</span>            <spanclass="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 bindingSupport for converters{binding Height, convert=toFeet, convertBack=fromFeet}Summary - Live Binding is cool
New field templates for URLs and Email AddressesSupport for inheritance in the data modelSupport for Many to Many in EFSupport for EnumsDynamic Data Enhancements
ASP.NET rocks!!
SSW Standards and Rules
Google Ajax playgroundhttp://code.google.com/apis/ajax/playground/http://code.google.com/apis/ajaxlibs/FireBughttp://getfirebug.com/YSlowhttp://developer.yahoo.com/yslow/Ajax Tutorialhttp://www.w3schools.com/Ajax/Resources
3things…PeterGfader@ssw.com.auhttp://peitor.blogspot.comtwitter.com/peitor

Usability AJAX and other ASP.NET Features

Editor's Notes

  • #2 Peter Gfader shows asp.net AJAX
  • #3 Java current version 1.6 Update 171.7 released next year 2010Dynamic languages Parallel computingMaybe closures
  • #6 XSP is a standalone web server written in C# that can be used to run your ASP.NET applications with minimal effort.
  • #10 Open solution from last weekWhere is the database connection stored?show database connection settingsall forms share same connection
  • #14 Olga,NovikPaul,RyanJohn,GoulderHeng,LuHongLi,DangFrancois,TranDerek,KouchJessie,NandLeo,MansillaSaurabh,GargJulia,SusantoMaris,GregorioMarwan,ChamasRay,O&apos;BrienGeoffrey,LaytonSkattarSingh,HundalGerard,O&apos;connorShelley,ChenBryan,ChelliahDaniel,HowesLevi,RobertsKunjal,SolankiPatrick,O&apos;NeillJamal,HazimAnthony,ParkerSridevi,GangichettuOlga,NovikPaul,RyanJohn,GoulderHeng,LuHongLi,DangFrancois,TranDerek,KouchJessie,NandLeo,MansillaSaurabh,GargJulia,SusantoMaris,GregorioMarwan,ChamasRay,O&apos;BrienGeoffrey,LaytonSkattarSingh,HundalGerard,O&apos;connorShelley,ChenBryan,ChelliahDaniel,HowesLevi,RobertsKunjal,SolankiPatrick,O&apos;NeillJamal,HazimAnthony,ParkerSridevi,GangichettuOlga,NovikPaul,RyanJohn,GoulderHeng,LuHongLi,DangFrancois,TranDerek,KouchJessie,NandLeo,MansillaSaurabh,GargJulia,SusantoMaris,GregorioMarwan,ChamasRay,O&apos;BrienGeoffrey,LaytonSkattarSingh,HundalGerard,O&apos;connorShelley,ChenBryan,ChelliahDaniel,HowesLevi,RobertsKunjal,SolankiPatrick,O&apos;NeillJamal,HazimAnthony,ParkerSridevi,GangichettußßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßHi $1 $2,We have 10000000 dollars to get out of Nigeria. If would help us with the transfer we will give you a cut.Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He&apos;s got style, a groovy style, and a car that just won&apos;t stop. When the going gets tough, he&apos;s really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he&apos;s fan-riffic!Ulysses, Ulysses - Soaring through all the galaxies. In search of Earth, flying in to the night. Ulysses, Ulysses - Fighting evil and tyranny, with all his power, and with all of his might. Ulysses - no-one else can do the things you do. Ulysses - like a bolt of thunder from the blue. Ulysses - always fighting all the evil forces bringing peace and justice to all.Thunder, thunder, thundercats, Ho! Thundercats are on the move, Thundercats are loose. Feel the magic, hear the roar, Thundercats are loose. Thunder, thunder, thunder, Thundercats! Thunder, thunder, thunder, Thundercats! Thunder, thunder, thunder, Thundercats! Thunder, thunder, thunder, Thundercats! Thundercats!I never spend much time in school but I taught ladies plenty. It&apos;s true I hire my body out for pay, hey hey. I&apos;ve gotten burned over Cheryl Tiegs, blown up for Raquel Welch. But when I end up in the hay it&apos;s only hay, hey hey. I might jump an open drawbridge, or Tarzan from a vine. &apos;Cause I&apos;m the unknown stuntman that makes Eastwood look so fine.There&apos;s a voice that keeps on calling me. Down the road, that&apos;s where I&apos;ll always be. Every stop I make, I make a new friend. Can&apos;t stay for long, just turn around and I&apos;m gone again. Maybe tomorrow, I&apos;ll want to settle down, Until tomorrow, I&apos;ll just keep moving on.This is my boss, Jonathan Hart, a self-made millionaire, he&apos;s quite a guy. This is Mrs H., she&apos;s gorgeous, she&apos;s one lady who knows how to take care of herself. By the way, my name is Max. I take care of both of them, which ain&apos;t easy, &apos;cause when they met it was MURDER!Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He&apos;s got style, a groovy style, and a car that just won&apos;t stop. When the going gets tough, he&apos;s really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he&apos;s fan-riffic!Ten years ago a crack commando unit was sent to prison by a military court for a crime they didn&apos;t commit. These men promptly escaped from a maximum security stockade to the Los Angeles underground. Today, still wanted by the government, they survive as soldiers of fortune. If you have a problem and no one else can help, and if you can find them, maybe you can hire the A-team.Regards,Prince Gfader of Nigeria
  • #15 Site is ugly
  • #17 User Experience consists of usability, look and feelWe want to improve the feel and usability
  • #19 ease with which people can employ a particular tool or other human-made object in order to achieve a particular goal
  • #20 Make the site feel alive
  • #21 Code generatorhttp://secretgeek.net/wscg.htmDrill down searchFacebookphotogallery
  • #22 How can we make our users happy
  • #25 http://www.google.com.au/webhp?complete=0&amp;hl=enhttp://www.google.com.au/webhp?complete=1&amp;hl=enInstead of posting back and receiving the whole page when you click a buttonOnly get back the bits that have changedOnly send to the server the parameters for updating something (e.g. keyword in a search)This is what happens:User clicks a button to update somethingJavascript makes a post back behind the sceneA request is made to the server and the AJAX components on the server figure out which chunks to send backJavascript on the client side process the data and update the page dynamically
  • #26 http://www.google.com.au/webhp?complete=0&amp;hl=enhttp://www.google.com.au/webhp?complete=1&amp;hl=enInstead of posting back and receiving the whole page when you click a buttonOnly get back the bits that have changedOnly send to the server the parameters for updating something (e.g. keyword in a search)This is what happens:User clicks a button to update somethingJavascript makes a post back behind the sceneA request is made to the server and the AJAX components on the server figure out which chunks to send backJavascript on the client side process the data and update the page dynamically
  • #27 As you saw in the earlier example using AJAX Efficiency!If you have a large page (200KB)Each postback will return a page roughly the same size even if you are only updating a labelWith AJAX only the updated label (plus some viewstate and extra AJAX markers) get sent back (~5KB)We can see the actual responses and requests using tools like IE Developer Toolbar, FireBug (Firefox), HTTP FiddlerMore interactive user experienceWhile the user is waiting for an action to occur he/she can be looking at other parts of the siteLike windows formsUsers can see what’s going on (e.g. a progress bar or other loading animation)
  • #28 http://www.go2web20.net/
  • #30 http://www.asp.net/ajax/ajaxcontroltoolkit/samples/
  • #33 XML Databinding&lt;asp:XmlDataSource&gt; control enables data source binding against XML filesOptional XPath expression to scope results&lt;asp:DataList&gt; supports binding against &lt;asp:XMLDataSource&gt; Use “XPath(expression)” statement in templates“XPathSelect(expression)” selects a node listTip: Can be used on mockups!Validation GroupsEnable validation controls to only apply in response to a specific button/actionToday validation controls apply “all or nothing”Indicated via “ValidationGroup” propertySupported by all Validation and Postback controlsControls in ValidationGroup validate with postbackProgrammatic Support for Validating GroupsIf (Page.Validate(“group_name”)) ThenPage.IsValid evaluates ValidationGroupPostbackCross Page PostingASP.NET 2.0 Supports Cross Page PostbacksScenario: Search or lookup button at top of pagePostback target via “PostBackUrl” property&lt;asp:buttonPostBackUrl=“b.aspx” runat=“server”/&gt;Can be declaratively or programmatically setPostback “target page” has full access to server controls for “originating page”Access controls via “Page.PreviousPage” property&lt;%@ PreviousPageVirtualPath=“a.aspx” %&gt;
  • #37 URL-routing for web forms No dependency on MVCFriendly URL handling for web formsConfiguration model for url routing
  • #38 Someone links to your wrong AboutUs page
  • #41 Uses HTTP 301 headerShow Firebug output for this 2 URLs
  • #45 http://weblogs.asp.net/scottgu/archive/2009/06/03/iis-search-engine-optimization-toolkit.aspxhttp://www.iis.net/extensions/SEOToolkit
  • #46 Solves both problems: redirecting broken pages and creating nice URLsVarious rule actions. Instead of rewriting a URL, a rule may perform other actions, such as issue an HTTP redirect, abort the request, or send a custom status code to HTTP client.
  • #47 Easy install with the web platform installer
  • #48 Nice graphical rule editorRegex pattern matching for requests and rewritesURL rewrite module v2 adds support for outbound response rewriting Fix up the content of any HTTP response by using regular expression pattern matching (e.g. modify links in outgoing response)
  • #54 http://www.ssw.com.au/SSW/Standards/default.aspx