1 / 56

Gerard Beckerleg

Developing Windows and Web Applications using Visual Studio.NET #10: Rich Web Forms with AJAX, jQuery and ASP.Net 4. Gerard Beckerleg. Session 10: Rich Web Forms with AJAX, jQuery and ASP.Net 4. Agenda. User experience and Usability AJAX Cross Page Post-backs Validation Groups

renee
Download Presentation

Gerard Beckerleg

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Developing Windows and Web Applications using Visual Studio.NET#10: Rich Web Forms withAJAX, jQuery and ASP.Net 4 Gerard Beckerleg

  2. Session 10: Rich Web Forms withAJAX, jQuery and ASP.Net 4

  3. Agenda • User experience and Usability • AJAX • Cross Page Post-backs • Validation Groups • Maintaining Scroll Positions • Control Focus, Default Buttons, Error Focus • jQuery

  4. Agenda • Client Script Handlers • XML Databinding • URL Rewriting/Mapping for Vanity Urls • ASP.NET 4 • SSW Rules to better…

  5. Browsing experience - bad • http://www.ebay.com.au/ • Search drill down • http://secretgeek.net/W3SCG.asp • Code generator

  6. Pain • Site is slow • Site is only static content • Site sends data back and forth • Flicker on load • Focus gets lost when working with page • Page gives no feedback during input • Losing context during navigation • Site is not alive

  7. User experience

  8. User experience

  9. UX - Look

  10. UX - Usability

  11. UX - Feel • Make the site feel alive • React quickly • Interact with the user • “Joy of use”

  12. Browsing experience - Good • 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

  13. How can we improve UX

  14. AJAX?

  15. What is AJAX? • Not a cleaning product... • A technology that enables rich interactive web applications • RIA • Asynchronous JavascriptAnd XML

  16. How does AJAX work? • Page loads up [23KB] • Parts of the page use javascript to send a request to the webserver/webservice asking for 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]

  17. How does ASP.NET AJAX work? • UpdatePanel • posts partial page back • ScriptManager • manages client script for ASP.NET AJAX

  18. 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

  19. Who uses AJAX? • Google was a big proponent of AJAX • Almost all new sites use some form of AJAX • http://www.go2web20.net/

  20. How do I use AJAX? • AJAX Extensions • http://ajaxcontroltoolkit.codeplex.com/ • Download the Control Toolkit

  21. 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

  22. Commercial AJAX Frameworks for .NET • Component Art • www.componentart.com • RadControls • www.telerik.com • Infragistics • www.infragistics.com

  23. jQuery The SQL of JavaScript

  24. JavaScript rules! • Maps.google.com

  25. I HATE JavaScript ! • Big time! • Different Browser • Debugging • No compiling • Syntax • No intellisense • No static typing (duck typing!!) • No animations

  26. The answer is?

  27. What is jQuery? • Written in JavaScript • It is a lightweight JavaScript library (compressed base lib, 19 kb) • Helps developers & designers keep things simple and reusable • Visual Studio supports jQuery • Part of every web app / site • Intellisense support • A great library for developing AJAX-based application

  28. Why JQuery?3 good reasons • 1- Cross-browser (IE 6.0+, Firefox 2+, Safari 3.0+, Opera 9.0+, Chrome) • 2- Powerful and easy to use • Same selectors as in CSS • Designers can learn it fast • More readable JavaScript code • 3 – Plug-ins • Tons of useful plug-ins and functionalities As per rule http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterWebsitesDevelopment.aspx#JQuery

  29. 1- Cross-browser • JavaScript window.onload = function() { alert(“Welcome"); } • JQuery $(document).ready(function() { alert(“Welcome!"); });

  30. 1- Cross-browser – Explanation • JavaScript • “onload” is only loaded when all images are loaded in the page • JQuery • “$(document).ready” is loaded as soon as the Document Object Model is ready • Similar to init() method in aspx page

  31. 2 – Powerful • Selector $(document).ready(function() { $("a").click(function() { alert("Hello world!"); }); }); • It will add any click-event to “a” tag

  32. 3. Plug-ins - Visually cool • Bubble Navigation (Hover each menu item to bubbling animation) - http://tympanus.net/Tutorials/BubbleNavigation/ • Quicksand (Click sort by to see shuffling animation) - http://razorjack.net/quicksand/ • Nivo Slider (Click on arrows to see sliding animation) - http://nivo.dev7studios.com/ • Sponsor Flip Wall (Click on each square to see flipping) - http://demo.tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/demo.php • Photo shoot Effect (Click on the big image to see photo shoot effect) -http://demo.tutorialzine.com/2010/02/photo-shoot-css-jquery/demo.html • HTC Clock - http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-digiclock/ As per rule

  33. 3. Plug-ins - Technicallycool • Ajax Upload (show a preview of the file being upload) - http://www.zurb.com/playground/ajax_upload • AutoSuggestjQueryplugin (Type in the textbox to see suggestions) - http://code.drewwilson.com/entry/autosuggest-jquery-plugin • jQuery.popeye (Click the ‘Enlarge’ button to see effect) - http://dev.herr-schuessler.de/jquery/popeye/demo.html • Open Standard Media Player (jQuery + HTML5) - http://www.mediafront.org/project/osmplayer • jsPlumb connector - http://morrisonpitt.com/jsPlumb/html/jquery/demo.html • As per rule

  34. References • jQuery official • http://jquery.com/ • jQuery UI library • http://jqueryui.com/ • Scott Gu’s Blog • http://weblogs.asp.net/scottgu/

  35. What if JavaScript is turned off? • Parts or all of your website will not work

  36. Solution • Check for JavaScript in page <body class=”no-js”> <script type="text/javascript"> document.getElementsByTagName("body")[0].className="jsEnabled"; </script> CSS #your-element { display: block; } body.jsEnabled #your-element { display: none; }

  37. jQuery - Summary • JavaScript rules • JavaScript is terrible • Use jQuery instead of JavaScript • Cross browser compatibility • Easy to use • Tons of useful plug-ins

  38. What’s new in ASP.NET 4.0

  39. ASP.NET 4 • SEO – Routing & Permanent Redirect... Google Juice • Enhancements to Dynamic Data • MVC • QueryExtender Control • Deployment

  40. Which looks nicer?

  41. Make URLs look nice • 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 P01

  42. Broken link!

  43. Response.Redirect protectedvoidApplication_BeginRequest(object sender, EventArgs e) { if (Request.FilePath == "/about-us.aspx")     { Response.Redirect ("/about.aspx", true);     } }

  44. Response.RedirectPermanent protectedvoidApplication_BeginRequest(object sender, EventArgs e) { if (Request.FilePath == "/about-us.aspx")     { Response.RedirectPermanent("/about.aspx", true);     } } P02

  45. Behind the scenes • What is the difference then? • Response.Redirect("/products.aspx", true); • Response.RedirectPermanent("/about.aspx", true);

  46. Note: Can be done already with ASP.NET Response.Status = "301 Moved Permanently"; Response.StatusCode = 301;   Response.AddHeader("Location","/new-page.asp"); Response.End();

  47. 404 Maintenance #1 • 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

  48. 404 Maintenance #2 • Bing Webmaster center • Google Webmaster tools • ELMAH • IIS SEO toolkit

  49. IIS SEO toolkit • 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

More Related