![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]](https://image.slidesharecdn.com/utssession08aspnetrichwebforms-100826213034-phpapp02/85/Usability-AJAX-and-other-ASP-NET-Features-24-320.jpg)
Uploaded byPeter Gfader
Usability AJAX and other ASP.NET Features
The document details a presentation by Peter Gfader on ASP.NET features and usability, covering topics such as AJAX for rich web applications, validation controls, and user experience improvements. It discusses enhancements in ASP.NET 4.0, SEO strategies for nicer URLs, and live data binding. Additional resources and tools for developers are also provided, aiming to enhance application performance and user interaction.
More Related Content
![[Patel] SPFx: An ISV Insight into latest Microsoft's customization model](https://cdn.slidesharecdn.com/ss_thumbnails/ecs18shaipatelspfxanisvinsight-180618091115-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Usability AJAX and other ASP.NET Features
Usability AJAX and other ASP.NET Features
- 1. UsabilityAJAX and otherASP.NET FeaturesPresented by Peter GfaderSenior Software Architect
- 2. Peter GfaderSSA @SSWLoves C# and .NET (Java not anymore)Specializes in Windows FormsASP.NETTFS testingAutomated testsSilverlight
- 3. Homework?Add validation controlsonto the EditTemplate of the FormView. Required Fields ...Regular ExpressionPostal Code (must be a number)
- 4.
- 5. Mono Supports ASP.NET1.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
- 6.
- 7. PostbackBring data towebDatabindingLast weekDataData source
- 8. PostbackBring data towebDatabindingPassing parametersValidationLast weekClientShow/viewDataEnterClientServer
- 9. Database connection withLINQ2SQLWhere is it?How can I change it?How do I maintain it across different servers/installations?Last week - Additionals
- 10. Session 8: RichWeb Forms AJAX & Other Features
- 11. AgendaUser experienceUsabilityAJAXCross PagePost-backsValidation GroupsMaintaining Scroll PositionsControl Focus, Default Buttons, Error Focus
- 12. AgendaClient Script HandlersXMLDatabindingURL Rewriting/Mapping for Vanity UrlsASP.NET 4SSW Rules to better…
- 13. http://www.ebay.com.au/Search drill downhttp://www.altavista.com/image/Searchingfor imageshttp://secretgeek.net/W3SCG.aspCode generatorBrowsing experience - bad
- 14. Site is slowSiteis 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
- 15.
- 16.
- 17.
- 18.
- 19. Make site feelaliveReact fastInteract with user“Joy of use”UX - Feel
- 20.
- 21. How can weimprove UX
- 22.
- 23. What is AJAX?Nota cleaning product...A technology that enables rich interactive web applicationsRIAAsynchronous JavascriptAnd XML
- 24. How does AJAXwork?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.NETAJAX work?UpdatePanelposts partial page backScriptManagermanages client script for ASP.NET AJAX
- 26. Why should Iuse 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
- 27. Who uses AJAX?Googlewas a big proponent of AJAXAlmost all new sites use some form of AJAXhttp://www.go2web20.net/
- 28. How do Iuse AJAX?AJAX Extensionshttp://ajaxcontroltoolkit.codeplex.com/Download the Control Toolkit
- 30. Recap - MicrosoftAJAXEasy 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
- 31. Commercial AJAX Frameworksfor .NETComponent Art www.componentart.comRadControlswww.telerik.comInfragisticswww.infragistics.com
- 32. Other cool featuresURLRewritingXML DatabindingValidation GroupsCross Page Posting
- 33. What’s new inASP.NET 4.0
- 34. SEO – Routing& Permanent Redirect... Google JuiceLive Data Binding...Enhancements to Dynamic DataMVCQueryExtender ControlDeploymentASP.NET 4
- 35.
- 36.
- 37.
- 38. protectedvoidApplication_BeginRequest(object sender, EventArgse){ if (Request.FilePath == "/about-us.aspx") { Response.Redirect ("/about.aspx", true); } }Response.Redirect
- 39. protectedvoidApplication_BeginRequest(object sender, EventArgse){ if (Request.FilePath == "/about-us.aspx") { Response.RedirectPermanent("/about.aspx", true); }}Response.RedirectPermanentP02
- 40. What is thedifference then?Response.Redirect("/products.aspx", true);Response.RedirectPermanent("/about.aspx", true);Behind the scenes
- 41. Response.Status = "301Moved Permanently";Response.StatusCode = 301; Response.AddHeader("Location","/new-page.asp");Response.End();Note: Can be done already with ASP.NET
- 42. ?Add code toGlobal.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
- 43. ?Bing Webmaster center,Google Webmaster tools, ELMAH, IIS SEO toolkit404 Maintenance #2
- 44. Recommendations and How-to’sMakecontent 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
- 45. Rewrite and redirectURLsHandles requests before ASP.NET is aware of (performance!!)Rewrite module for IIS7P03
- 48. Allow client sidedata binding in javascriptCan bind to JSON objectsADO.NET Data ServicesLive BindingP04
- 49. Two way bindingin 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 bindingSupport for converters{binding Height, convert=toFeet, convertBack=fromFeet}Summary - Live Binding is cool
- 51. New field templatesfor URLs and Email AddressesSupport for inheritance in the data modelSupport for Many to Many in EFSupport for EnumsDynamic Data Enhancements
- 52.
- 53. SSW Standards andRules
- 54. Google Ajax playgroundhttp://code.google.com/apis/ajax/playground/http://code.google.com/apis/ajaxlibs/FireBughttp://getfirebug.com/YSlowhttp://developer.yahoo.com/yslow/AjaxTutorialhttp://www.w3schools.com/Ajax/Resources
- 55.
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'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
- #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&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
- #26 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
- #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<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” %>
- #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