Usability AJAX and other ASP.NET Features
•
0 gostou•2,319 visualizações
User experience Usability AJAX Cross Page Post-backs Validation Groups Maintaining Scroll Positions Control Focus, Default Buttons, Error Focus
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Semelhante a Usability AJAX and other ASP.NET Features
Semelhante a Usability AJAX and other ASP.NET Features (20)
Mais de Peter Gfader
Mais de Peter Gfader (20)
Último
Último (20)
Usability AJAX and other ASP.NET Features
- 1. UsabilityAJAX and other ASP.NET Features Presented by Peter Gfader Senior Software Architect
- 2. Peter Gfader SSA @ SSW Loves C# and .NET (Java not anymore) Specializes in Windows Forms ASP.NET TFS testing Automated tests Silverlight
- 3. Homework? Add validation controls onto the EditTemplate of the FormView. Required Fields ... Regular Expression Postal Code (must be a number)
- 4. Course Website http://sharepoint.ssw.com.au/Training/UTSNET/ Course Timetable Course Materials
- 5. Mono Supports ASP.NET 1.1 and most of ASP.NET 2.0http://mono-project.com/FAQ:_ASP.NET Web server Hosting Mono Apache with mod_mono FastCGI XSP http://mono-project.com/ASP.NET Fist session questions
- 7. Postback Bring data to web Databinding Last week Data Data source
- 8. Postback Bring data to web Databinding Passing parameters Validation Last week Client Show/view Data Enter Client Server
- 9. Database connection with LINQ2SQL Where is it? How can I change it? How do I maintain it across different servers/installations? Last week - Additionals
- 10. Session 8: Rich Web Forms AJAX & Other Features
- 11. Agenda User experience Usability AJAX Cross Page Post-backs Validation Groups Maintaining Scroll Positions Control Focus, Default Buttons, Error Focus
- 12. Agenda Client Script Handlers XML Databinding URL Rewriting/Mapping for Vanity Urls ASP.NET 4 SSW Rules to better…
- 13. 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
- 14. 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
- 15. User experience
- 16. User experience
- 17. UX - Look
- 18. UX - Usability
- 19. Make site feel alive React fast Interact with user “Joy of use” UX - Feel
- 20. 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
- 21. How can we improve UX
- 22. AJAX?
- 23. What is AJAX? Not a cleaning product... A technology that enables rich interactive web applications RIA Asynchronous JavascriptAnd XML
- 24. 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]
- 25. How does ASP.NET AJAX work? UpdatePanel posts partial page back ScriptManager manages client script for ASP.NET AJAX
- 26. Why should I use AJAX? 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
- 27. Who uses AJAX? Google was a big proponent of AJAX Almost all new sites use some form of AJAX http://www.go2web20.net/
- 30. Recap - Microsoft 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
- 31. Commercial AJAX Frameworks for .NET Component Art www.componentart.com RadControls www.telerik.com Infragistics www.infragistics.com
- 32. Other cool features URL Rewriting XML Databinding Validation Groups Cross Page Posting
- 33. What’s new in ASP.NET 4.0
- 34. SEO – Routing & Permanent Redirect... Google Juice Live Data Binding... Enhancements to Dynamic Data MVC QueryExtender Control Deployment ASP.NET 4
- 36. Ugly URLs http://www.ssw.com.au/ssw/Products/ProdCategoryList.aspx?GroupCategoryID=10DOTNET http://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
- 37. Broken link!
- 38. protectedvoidApplication_BeginRequest(object sender, EventArgs e) { if (Request.FilePath == "/about-us.aspx") { Response.Redirect ("/about.aspx", true); } } Response.Redirect
- 39. protectedvoidApplication_BeginRequest(object sender, EventArgs e) { if (Request.FilePath == "/about-us.aspx") { Response.RedirectPermanent("/about.aspx", true); } } Response.RedirectPermanent P02
- 40. What is the difference then? Response.Redirect("/products.aspx", true); Response.RedirectPermanent("/about.aspx", true); Behind the scenes
- 41. Response.Status = "301 Moved Permanently"; Response.StatusCode = 301; Response.AddHeader("Location","/new-page.asp"); Response.End(); Note: Can be done already with ASP.NET
- 42. ? 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
- 43. ? Bing Webmaster center, Google Webmaster tools, ELMAH, IIS SEO toolkit 404 Maintenance #2
- 44. 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
- 45. Rewrite and redirect URLs Handles requests before ASP.NET is aware of (performance!!) Rewrite module for IIS7 P03
- 48. Allow client side data binding in javascript Can bind to JSON objects ADO.NET Data Services Live Binding P04
- 49. 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
- 50. 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
- 51. 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
- 52. ASP.NET rocks!!
- 53. SSW Standards and Rules
- 54. 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
- 55. 3things… PeterGfader@ssw.com.au http://peitor.blogspot.com twitter.com/peitor
- 56. 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
Notas do Editor
- 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