Usability AJAX and other ASP.NET Features

2,551 views

Published on


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

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,551
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
33
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Peter Gfader shows asp.net AJAX
  • Java current version 1.6 Update 171.7 released next year 2010Dynamic languages Parallel computingMaybe closures
  • XSP is a standalone web server written in C# that can be used to run your ASP.NET applications with minimal effort.
  • Open solution from last weekWhere is the database connection stored?show database connection settingsall forms share same connection
  • Olga,NovikPaul,RyanJohn,GoulderHeng,LuHongLi,DangFrancois,TranDerek,KouchJessie,NandLeo,MansillaSaurabh,GargJulia,SusantoMaris,GregorioMarwan,ChamasRay,O'BrienGeoffrey,LaytonSkattarSingh,HundalGerard,O'connorShelley,ChenBryan,ChelliahDaniel,HowesLevi,RobertsKunjal,SolankiPatrick,O'NeillJamal,HazimAnthony,ParkerSridevi,GangichettuOlga,NovikPaul,RyanJohn,GoulderHeng,LuHongLi,DangFrancois,TranDerek,KouchJessie,NandLeo,MansillaSaurabh,GargJulia,SusantoMaris,GregorioMarwan,ChamasRay,O'BrienGeoffrey,LaytonSkattarSingh,HundalGerard,O'connorShelley,ChenBryan,ChelliahDaniel,HowesLevi,RobertsKunjal,SolankiPatrick,O'NeillJamal,HazimAnthony,ParkerSridevi,GangichettuOlga,NovikPaul,RyanJohn,GoulderHeng,LuHongLi,DangFrancois,TranDerek,KouchJessie,NandLeo,MansillaSaurabh,GargJulia,SusantoMaris,GregorioMarwan,ChamasRay,O'BrienGeoffrey,LaytonSkattarSingh,HundalGerard,O'connorShelley,ChenBryan,ChelliahDaniel,HowesLevi,RobertsKunjal,SolankiPatrick,O'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's got style, a groovy style, and a car that just won't stop. When the going gets tough, he'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'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's true I hire my body out for pay, hey hey. I've gotten burned over Cheryl Tiegs, blown up for Raquel Welch. But when I end up in the hay it's only hay, hey hey. I might jump an open drawbridge, or Tarzan from a vine. 'Cause I'm the unknown stuntman that makes Eastwood look so fine.There's a voice that keeps on calling me. Down the road, that's where I'll always be. Every stop I make, I make a new friend. Can't stay for long, just turn around and I'm gone again. Maybe tomorrow, I'll want to settle down, Until tomorrow, I'll just keep moving on.This is my boss, Jonathan Hart, a self-made millionaire, he's quite a guy. This is Mrs H., she's gorgeous, she'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't easy, 'cause when they met it was MURDER!Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he'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's fan-riffic!Ten years ago a crack commando unit was sent to prison by a military court for a crime they didn'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
  • Site is ugly
  • User Experience consists of usability, look and feelWe want to improve the feel and usability
  • ease with which people can employ a particular tool or other human-made object in order to achieve a particular goal
  • Make the site feel alive
  • Code generatorhttp://secretgeek.net/wscg.htmDrill down searchFacebookphotogallery
  • How can we make our users happy
  • http://www.google.com.au/webhp?complete=0&hl=enhttp://www.google.com.au/webhp?complete=1&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
  • http://www.google.com.au/webhp?complete=0&hl=enhttp://www.google.com.au/webhp?complete=1&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
  • 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)
  • http://www.go2web20.net/
  • http://www.asp.net/ajax/ajaxcontroltoolkit/samples/
  • XML Databinding<asp:XmlDataSource> control enables data source binding against XML filesOptional XPath expression to scope results<asp:DataList> supports binding against <asp:XMLDataSource> 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<asp:buttonPostBackUrl=“b.aspx” runat=“server”/>Can be declaratively or programmatically setPostback “target page” has full access to server controls for “originating page”Access controls via “Page.PreviousPage” property<%@ PreviousPageVirtualPath=“a.aspx” %>
  • URL-routing for web forms No dependency on MVCFriendly URL handling for web formsConfiguration model for url routing
  • Someone links to your wrong AboutUs page
  • Uses HTTP 301 headerShow Firebug output for this 2 URLs
  • http://weblogs.asp.net/scottgu/archive/2009/06/03/iis-search-engine-optimization-toolkit.aspxhttp://www.iis.net/extensions/SEOToolkit
  • 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.
  • Easy install with the web platform installer
  • 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)
  • http://www.ssw.com.au/SSW/Standards/default.aspx
  • Usability AJAX and other ASP.NET Features

    1. 1. UsabilityAJAX and other ASP.NET Features<br />Presented by Peter Gfader<br />Senior Software Architect<br />
    2. 2. Peter Gfader<br />SSA @ SSW<br />Loves C# and .NET (Java not anymore)<br />Specializes in <br />Windows Forms<br />ASP.NET<br />TFS testing<br />Automated tests<br />Silverlight<br />
    3. 3. Homework?<br />Add validation controls onto the EditTemplate of the FormView.<br /> <br />Required Fields<br /> ...<br />Regular Expression<br />Postal Code (must be a number)<br />
    4. 4. Course Website<br />http://sharepoint.ssw.com.au/Training/UTSNET/<br />Course Timetable<br />Course Materials<br />
    5. 5. Mono <br />Supports ASP.NET 1.1 and most of ASP.NET 2.0http://mono-project.com/FAQ:_ASP.NET<br />Web server<br />Hosting Mono<br />Apache with mod_mono<br />FastCGI<br />XSP<br />http://mono-project.com/ASP.NET<br />Fist session questions<br />
    6. 6. Postback<br />Last week<br />
    7. 7. Postback<br />Bring data to web<br />Databinding<br />Last week<br />Data<br />Data source<br />
    8. 8. Postback<br />Bring data to web<br />Databinding<br />Passing parameters<br />Validation<br />Last week<br />Client<br />Show/view<br />Data<br />Enter<br />Client<br />Server<br />
    9. 9. Database connection with LINQ2SQL<br />Where is it?<br />How can I change it?<br />How do I maintain it across different servers/installations?<br />Last week - Additionals<br />
    10. 10. Session 8: Rich Web Forms AJAX & Other Features<br />
    11. 11. Agenda<br />User experience<br />Usability<br />AJAX<br />Cross Page Post-backs<br />Validation Groups<br />Maintaining Scroll Positions<br />Control Focus, Default Buttons, Error Focus<br />
    12. 12. Agenda<br />Client Script Handlers<br />XML Databinding<br />URL Rewriting/Mapping for Vanity Urls<br />ASP.NET 4<br />SSW Rules to better…<br />
    13. 13. http://www.ebay.com.au/<br />Search drill down<br />http://www.altavista.com/image/<br />Searching for images<br />http://secretgeek.net/W3SCG.asp<br />Code generator<br />Browsing experience - bad<br />
    14. 14. Site is slow<br />Site is a static something<br />Site is back and forth of data<br />Flicker on load<br />Focus gets lost on working with page<br />Page gives no feedback during input<br />Losing context during navigation<br />Site is not alive<br />Pain<br />
    15. 15. User experience<br />
    16. 16. User experience<br />
    17. 17. UX - Look<br />
    18. 18. UX - Usability<br />
    19. 19. Make site feel alive<br />React fast<br />Interact with user<br />“Joy of use”<br />UX - Feel<br />
    20. 20. http://www.facebook.com/<br />Photo gallery<br />http://www.live.com/?scope=images<br />Drill down<br />http://www.google.com/ig<br />http://maps.google.com/<br />http://docs.google.com<br />http://secretgeek.net/wscg.htm<br />Code generator<br />Browsing experience - Good<br />
    21. 21. How can we improve UX<br />
    22. 22. AJAX?<br />
    23. 23. What is AJAX?<br />Not a cleaning product...<br />A technology that enables rich interactive web applications<br />RIA<br />Asynchronous JavascriptAnd XML<br />
    24. 24. How does AJAX work?<br />Page loads up [23KB]<br />Parts of the page uses javascript to send a request to the webserver/webservice asking for some data [3 KB]<br />The javascript on the page then renders the returned data on the current page without needing to refresh the whole page[8 KB]<br />
    25. 25. How does ASP.NET AJAX work?<br />UpdatePanel<br />posts partial page back<br />ScriptManager<br />manages client script for ASP.NET AJAX<br />
    26. 26. Why should I use AJAX?<br />We just retrieve the information we need<br />In the past we had to retrieve the whole page again!<br />Makes your applications more responsive<br />Users can browse around during AJAX call<br />Users don’t get lost by presenting them a new page<br />
    27. 27. Who uses AJAX?<br />Google was a big proponent of AJAX<br />Almost all new sites use some form of AJAX<br />http://www.go2web20.net/<br />
    28. 28. How do I use AJAX?<br /><ul><li>AJAX Extensions</li></ul>http://ajaxcontroltoolkit.codeplex.com/<br />Download the Control Toolkit<br />
    29. 29.
    30. 30. Recap - Microsoft AJAX<br />Easy way to enable AJAX on your web site<br />UpdatePanel<br />UpdateProgress<br />Many user contributed controls in the AJAX Toolkit. http://ajax.asp.net/ajaxtoolkit<br />Highlights:<br />Autocomplete (like google suggest)<br />Calendar<br />Filtered Text Box<br />
    31. 31. Commercial AJAX Frameworks for .NET<br />Component Art <br />www.componentart.com<br />RadControls<br />www.telerik.com<br />Infragistics<br />www.infragistics.com<br />
    32. 32. Other cool features<br />URL Rewriting<br />XML Databinding<br />Validation Groups<br />Cross Page Posting<br />
    33. 33. What’s new in ASP.NET 4.0<br />
    34. 34. SEO – Routing & Permanent Redirect... Google Juice<br />Live Data Binding...<br />Enhancements to Dynamic Data<br />MVC<br />QueryExtender Control<br />Deployment<br />ASP.NET 4<br />
    35. 35. What looks nicer?<br />
    36. 36. Ugly URLs<br />http://www.ssw.com.au/ssw/Products/ProdCategoryList.aspx?GroupCategoryID=10DOTNET<br />http://www.ssw.com.au/ssw/Products/ProdCategoryList.aspx?GroupCategoryID=1SQL<br />Nice URLs<br />http://www.ssw.com.au/Products/DotNet<br />http://www.ssw.com.au/Products/SQLServer<br />Make URLs look nice<br />P01<br />
    37. 37. Broken link!<br />
    38. 38. protectedvoidApplication_BeginRequest(object sender, EventArgs e)<br />{<br /> if (Request.FilePath == "/about-us.aspx") <br />    {<br />         Response.Redirect ("/about.aspx", true);<br />    }<br /> }<br />Response.Redirect<br />
    39. 39. protectedvoidApplication_BeginRequest(object sender, EventArgs e)<br />{<br />     if (Request.FilePath == "/about-us.aspx")<br />     {<br />         Response.RedirectPermanent("/about.aspx", true);<br />     }<br />}<br />Response.RedirectPermanent<br />P02<br />
    40. 40. What is the difference then?<br />Response.Redirect("/products.aspx", true);<br />Response.RedirectPermanent("/about.aspx", true);<br />Behind the scenes<br />
    41. 41. Response.Status = "301 Moved Permanently";<br />Response.StatusCode = 301;   <br />Response.AddHeader("Location","/new-page.asp");<br />Response.End();<br />Note: Can be done already with ASP.NET<br />
    42. 42. ?<br />Add code to Global.asax to log 404s to a database (OLD_URL, NEW_URL)<br />Maintain the NEW_URL field<br />Change Global.asax to:<br />Look up the 404 in the database<br />If you find a broken link do a permanent redirect to the new URL<br />Otherwise insert broken link<br />404 Maintenance #1<br />
    43. 43. ?<br />Bing Webmaster center, <br />Google Webmaster tools, <br />ELMAH, <br />IIS SEO toolkit<br />404 Maintenance #2<br />
    44. 44. Recommendations and How-to’s<br />Make content search engine-friendly<br />Improve volume and quality of traffic<br />Control how search engines access and display Web content <br />Inform search engines about locations that are available for indexing<br />Show broken pages<br />IIS SEO toolkit<br />
    45. 45. Rewrite and redirect URLs<br />Handles requests before ASP.NET is aware of (performance!!)<br />Rewrite module for IIS7<br />P03<br />
    46. 46.
    47. 47.
    48. 48. Allow client side data binding in javascript<br />Can bind to <br />JSON objects<br />ADO.NET Data Services<br />Live Binding<br />P04<br />
    49. 49. Two way binding in ASP.NET (like Silverlight or WPF)<br /><ulid="imageListView"class="list sys-template"><br /> <li><br /> <spanclass="name">{{ Name }}</span><br /> <spanclass="value">{{ Description }}</span><br /> </li><br /> </ul><br />Live Binding<br />
    50. 50. Instead of <%# Eval(“FirstName”) %><br />Use XAML style binding<br />{{FirstName}} – One way/One time binding<br />{ binding FirstName, mode=twoWay } – Two way binding<br />Support for converters<br />{binding Height, convert=toFeet, convertBack=fromFeet}<br />Summary - Live Binding is cool<br />
    51. 51. New field templates for URLs and Email Addresses<br />Support for inheritance in the data model<br />Support for Many to Many in EF<br />Support for Enums<br />Dynamic Data Enhancements<br />
    52. 52. ASP.NET rocks!!<br />
    53. 53. SSW Standards and Rules<br />
    54. 54. Google Ajax playground<br />http://code.google.com/apis/ajax/playground/<br />http://code.google.com/apis/ajaxlibs/<br />FireBug<br />http://getfirebug.com/<br />YSlow<br />http://developer.yahoo.com/yslow/<br />Ajax Tutorial<br />http://www.w3schools.com/Ajax/<br />Resources<br />
    55. 55. 3things…<br />PeterGfader@ssw.com.au<br />http://peitor.blogspot.com<br />twitter.com/peitor<br />
    56. 56. Thank You!<br />Gateway Court Suite 10 81 - 91 Military Road Neutral Bay, Sydney NSW 2089 AUSTRALIA <br />ABN: 21 069 371 900 <br />Phone: + 61 2 9953 3000 Fax: + 61 2 9953 3105 <br />info@ssw.com.auwww.ssw.com.au <br />

    ×