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 (