Building intranet applications with ASP.NET AJAX and jQuery

Building intranet applications with ASP.NET AJAX and jQuery Alek Davis 2009 Intro • • Speaker – Alek Davis: Technoblog: http://alekdavis.blogspot.com Goals – – – – Basic understanding of jQuery, ASP.NET AJAX Know how to build an application using ASP.NET AJAX and jQuery Know what can go wrong and how to fix common problems Know where find information, support, and tools • Presentation – Use as a reference – References contain active hyperlinks – Code samples • Audience – Expected to understand • JavaScript: Basic JavaScript syntax • ASP.NET: Postback, code-behind, viewstate, data binding 2 of 43 Building intranet applications with ASP.NET AJAX and jQuery 4/1/2009 Topics • Technologies – Rich Internet Applications (RIA) – ASP.NET AJAX – jQuery • • Pros and cons – ASP.NET + AJAX + jQuery – Other alternatives Development – – – – – Web design Common patterns Caveats Tools Debugging • References 3 of 43 Building intranet applications with ASP.NET AJAX and jQuery 4/1/2009 Rich internet applications (RIA) • Server-side • ASP/ASP.NET • JSP • PHP (Microsoft) (Sun) • Client-side – virtual machine (plug-in) based • Flash/Flex (Adobe) • Java/JavaFX (Sun) • Gears (Google) • Silverlight (Microsoft) • BrowserPlus (Yahoo!) • Curl – JavaScript based • ASP.NET AJAX • Yahoo! User Inter Interface (YUI) Library • Google AJAX APIs, Data (GData) APIs, … • jQuery, Prototype, MooTools, Dojo, script.aculo.us, … 4 of 43 Building intranet applications with ASP.NET AJAX and jQuery 4/1/2009 Comparing RIA technologies • • • Server-side – Pros: ease of development – Cons: user experience (flicker), server load, web traffic Client-side virtual machine based – Pros: user experience, capabilities, platform support – Cons: user experience, platform support, no HTML benefits Client-side JavaScript based – Pros: user experience, availability, graceful degradation (NOSCRIPT) – Cons: performance (less of an issue), browser specifics, JavaScript 5 of 43 Building intranet applications with ASP.NET AJAX and jQuery 4/1/2009 Choosing RIA technologies • • Assumptions – Building intranet, line-of-business (LOB) application – Using Microsoft stack (Visual Studio, etc) Criteria – – – – Utilize existing knowledge (ASP.NET) Development ease and speed Code maintainability Application performance • Options – ASP.NET AJAX – AJAX libraries 6 of 43 Building intranet applications with ASP.NET AJAX and jQuery 4/1/2009 ASP.NET AJAX • • Quick facts – Comes with Visual Studio 2008 (ASP.NET 3.5) • Add-on for Visual Studio 2005 Overview – 3+ primary controls • ScriptManager – – – (required) (optional) Enables ASP.NET AJAX, partial page rendering, Web service calls Partial page update (see also: UpdatePanel Tips and Tricks by Jeff Prosise) • UpdatePanel • UpdateProgress – Add-ons • ASP.NET Control Toolkit – – (optional) Progress indicator Open-source project Last release: Aug 20, 2008; last update: Dec 17, 2008 • jQuery 7 of 43 Building intranet applications with ASP.NET AJAX and jQuery 4/1/2009 Learning ASP.NET AJAX • • Documentation – – – – – Adding AJAX and Client Capabilities Roadmap http://ajax.asp.net (main site) http://asp.net/AJAX/Documentation/Live/ (old, but good examples) http://encosia.com/ (ASP.NET, AJAX, and more; articles, tutorials, tips, RSS) http://mattberseth.com/blog/aspnet_ajax/ (articles, tips, RSS) ASP.NET AJAX 100 by Bruce Kyle (16 min) ASP.NET AJAX Futures by Bertrand Le Roy at PDC 2008 (84 min) Building Great AJAX Applications from Scratch Using ASP.NET 3.5 and Visual Studio 2008 by Brad Adams at MIX 2008 (76 min) Real-World AJAX with ASP.NET by Nikhil Kothari at MIX 2008 (75 min) Web sites • Presentations/talks/demos/screencasts – – – – • Books – ASP.NET AJAX UpdatePanel Control by Matt Gibbs, Bertrand Le Roy – More from Amazon 8 of 43 Building intranet applications with ASP.NET AJAX and jQuery 4/1/2009 jQuery • Quick facts – – – – – – – – – – – JavaScript library (file) created by John Resig Open source (MIT and GPL licenses; good for commercial use) Current version: 1.3 (released on January 21, 2009) Size: ~18 KB Browser support: IE 6+, Firefox 2+, Opera 9+, Safari 2+, Chrome Actively developed Large and active community Used by many companies (Google, IBM, Amazon, Dell, Netflix, Intel, …) Shipped with ASP.NET MVC Framework Will be included in next versions of Visual Studio 24/7 support by Microsoft through Product Support Services (PSS) Learning jQuery @ MIT (presented by John Resig at MIT) • More facts, performance benchmarks, key features • See also – 9 of 43 Building intranet applications with ASP.NET AJAX and jQuery 4/1/2009 Learning jQuery • • Web sites – – – – – http://jquery.com/ (downloads, docs, tutorials, bug tracker, forums) http://www.learningjquery.com/ (tips, techniques, tutorials, RSS) jQuery for Absolute Beginners (15 short videos, about 5 minutes each) An introduction to jQuery (Part 1: The Client Side) Using jQuery with ASP.NET (Part 2: Making Ajax Callbacks to the Server) Tutorials/articles • Books – – – Learning jQuery: … by Karl Swedberg & Jonathan Chaffer jQuery Reference Guide by Karl Swedberg & Jonathan Chaffer jQuery in Action by Bear Bibeault & Yehuda Katz 10 of 43 Building intranet applications with ASP.NET AJAX and jQuery 4/1/2009 jQuery basics • • Syntax – $('select element').doSomething('info').doSomethingElse('more info'); Selectors – – – – – $('#txtSearchBox'): element with ID txtSearchBox $('.SelectedCell'): element(s) with class attribute SelectedCell $('#userGrid tr:even'): even rows of the element with ID userGrid $('input:checkbox[id$=\'chkDelete\']'): input element(s) of the type checkbox with ID that ends with chkDelete $('img.ImgLink[id$=\'imgOK\'],img.ImgLink[id$=\'imgCancel\']'): IMG element(s) with class attribute ImgLink and ID ending with imgOK or imgCancel $(…).hide() $(…).fadeIn("fast") $(…).slideUp(1000) … $(…).show() $(…).fadeOut("slow") $(…).slideDown(5000) • Animations – – – – 11 of 43 Building intranet applications with ASP.NET AJAX and jQuery 4/1/2009 More jQuery • Common operations – – – – – $(…).preventDefaults(): prevents default behavior $(…).attr(): sets/gets attribute value $(…).css(): sets/gets CSS attribute value $(…).val(): sets/gets value of a text input element (text box, text area) $(…).text(): sets/gets text value of an element (span, etc) – … • Events – – – – $(…).click(function(e){ … }): on click event handler $(…).keydown(function(e){ … }): on key down event handler $(…).hover(function(){ … }, function()): on hover (in and out) event handler $(…).bind("eventX eventY …", …): binds one or more event to event hander – … 12 of 43 Building intranet applications with ASP.NET AJAX and jQuery 4/1/2009 jQuery extras • jQuery UI – jQuery widgets • Handle drag-and-drop, sorting, resizing, selecting • Accordion, date picker, dialog, progress bar, slider, tabs controls • Effects (color animation, class transitions, theming) • Plugins – Third party widgets • User interface • Data manipulation • AJAX • … – See also: Plugins/Authoring • See also – http://docs.jquery.com/ (documentation) 13 of 43 Building intranet applications with ASP.NET AJAX and jQuery 4/1/2009 jQuery demo • Features – Custom search box • Auto-show, auto-hide • Submit, cancel • Buttons and keyboard • Input validation 14 of 43 Building intranet applications with ASP.NET AJAX and jQuery 4/1/2009 ASP.NET AJAX + jQuery benefits • • Why ASP.NET? – Server-side (code-behind) programming Why ASP.NET AJAX? – – – – – Simple partial page updates and progress indicator Simple asynchronous postbacks and partial page updates Can reuse code-behind (no additional code for Web services) Graceful degradation (