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
• Technologies
– Rich Internet Applications (RIA)
– ASP.NET AJAX
– jQuery
• Development
– Web design
– Common patterns
– Caveats
– Tools
– Debugging
• References
• Server-side
• ASP/ASP.NET (Microsoft)
• JSP (Sun)
• PHP
• 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, …
• Server-side
– Pros: ease of development
– Cons: user experience (flicker), server load, web traffic
• 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
• Quick facts
– Comes with Visual Studio 2008 (ASP.NET 3.5)
• Add-on for Visual Studio 2005
• Overview
– 3+ primary controls
• ScriptManager (required)
– Enables ASP.NET AJAX, partial page rendering, Web service calls
• UpdatePanel (optional)
– Partial page update (see also: UpdatePanel Tips and Tricks by Jeff Prosise)
• UpdateProgress (optional)
– Progress indicator
– Add-ons
• ASP.NET Control Toolkit
– Open-source project
– Last release: Aug 20, 2008; last update: Dec 17, 2008
• jQuery
• Documentation
– Adding AJAX and Client Capabilities Roadmap
• Web sites
– 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)
• Presentations/talks/demos/screencasts
– 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)
• Books
– ASP.NET AJAX UpdatePanel Control by Matt Gibbs, Bertrand Le Roy
– More from Amazon
• 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)
• See also
– Learning jQuery @ MIT (presented by John Resig at MIT)
• More facts, performance benchmarks, key features
• Web sites
– http://jquery.com/ (downloads, docs, tutorials, bug tracker, forums)
– http://www.learningjquery.com/ (tips, techniques, tutorials, RSS)
• Tutorials/articles
– 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)
• Books
– Learning jQuery: … by Karl Swedberg & Jonathan Chaffer
– jQuery Reference Guide by Karl Swedberg & Jonathan Chaffer
– jQuery in Action by Bear Bibeault & Yehuda Katz
• 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
• Animations
– $(…).hide() $(…).show()
– $(…).fadeIn("fast") $(…).fadeOut("slow")
– $(…).slideUp(1000) $(…).slideDown(5000)
– …
• 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
– …
• 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)
• Features
– Custom search box
• Auto-show, auto-hide
• Submit, cancel
• Buttons and keyboard
• Input validation
• Why ASP.NET?
– Server-side (code-behind) programming
• Why jQuery?
– Efficient, small, clean JavaScript; shields from browser specifics
– Complements ASP.NET AJAX: offers animations, selectors, plugins
– Minor overlap with ASP.NET AJAX (unlike other JavaScript libraries)
• Alternatives
– ASP.NET AJAX + DHTML
– ASP.NET (without AJAX) + jQuery
– ASP.NET AJAX (without UpdatePanel) + jQuery
– ASP.NET AJAX + ASP.NET AJAX Toolkit + jQuery (just kidding)
• Design skills
– Don't Make Me Think by Steve Krug
– The Non-Designer's Design Book by Robin Williams
– SitePoint TechTimes and SitePoint Design View newsletters
• CSS frameworks
– BlueprintCSS
– YUI Grid CSS
– See also: List of CSS frameworks
• Firefox
– Use IE Tab add-on to switch between Firefox and IE views
– Use Web Developer add-on/toolbar for… lots of things
– Use Firebug add-on for debugging
• console.log is your friend
– Use YSlow add-on to see performance score
– More add-ons
• iMacros creates macros for task automation
• FireRainbow enables JavaScript syntax highlighting for Firebug
• Internet Explorer
– Use Fiddler to debug HTTP traffic
– Use Internet Explorer Developer Toolbar for debugging
– Use IE7Pro add-on for "everything" else
• Web tools
– jQuery API Browser
– Visual jQuery
• Features
– ASP.NET AJAX (.NET 3.5) + jQuery 1.3
– Repeater control
• Each item in Repeater is an UpdatePanel
• Each UpdatePanel holds an UpdateProgress control
– jQuery is responsible for DHTML operations
– See Scott Guthrie's post (read comments on suggestions for customization of the
xhtmConformance settings)
<asp:ScriptManager
id="ScriptManager1"
EnablePartialRendering="true"
runat="server">
…
</asp:ScriptManager>
• Options
– Option 1: Reference distribution source (Google)
• Pros: Download speed, caching, proximity
• Cons: External reference
– Option 2: Make your own copy
• Pros: Internal reference
• Cons: Download speed (possibly)
• Example
<asp:ScriptManager …>
<Scripts>
<asp:ScriptReference Path="~/Scripts/jQuery-1.3.1-vsdoc.js" />
</Scripts>
</asp:ScriptManager>
• Usage options
– If using VS 2008 SP1
• Install hotfix KB958502 (see Visual Studio patched for better jQuery IntelliSense)
• Add the vsdoc file to the project; do not reference it in code
• Vsdoc file must have the same name as the original with –vsdoc suffix
– If not using VS 2008 SP1 (also see the Resources slide)
• Add the vsdoc file to the project
• Wrap the vsdoc file in an invisible control (use appropriate name):
<asp:Label Visible="false" runat="server">
<script src="../Scripts/jQuery-1.3.1-vsdoc.js" type="text/javascript" />
</asp:Label>
• In JavaScript files, add at the top (use appropriate name):
/// <reference path="jQuery-1.3.1-vsdoc.js"/>
• Basics
– Works with UpdatePanel control
– Invisible during initial page load and full postback
– Visible only during partial postback
– Can implement UpdateProgress as a user control
• Advanced
– Modal UpdateProgress for UpdatePanel – Revisited by Damien White
• Full postback
– Client server: GET (initial request, URL)
– Server client: <HTML>…<BODY></BODY></HTML>
– Client server: POST (form data, including VIEWSTATE)
– Server client: <HTML>…<BODY></BODY></HTML>
• Partial postback
– Client server: GET (initial request, URL)
– Server client: <HTML>…<BODY></BODY></HTML>
– Client server: POST (form data, including VIEWSTATE)
– Server client: <DIV id="UpdatePanelID"></DIV>, VIEWSTATE
• Basics
– Embeds contents in the <DIV></DIV> tags
– Set UpdateMode attribute to Conditional
– Not everything can be implemented as an UpdatePanel
• Cannot include <TR> elements in UpdatePanel
• Using UpdatePanel with data-bound controls
– Using Eval (slower)
<asp:ImageButton … CommandArgument='<%# DataBinder.Eval("ID") %>'/>
– Using DataBinder.GetPropertyValue (faster)
<a …><%# DataBinder.GetPropertyValue(Container.DataItem, "Name") %></a>
– For complex formatting use String.Format
<asp:HyperLink …
NavigateUrl='<%# String.Format("?ID={0}&Mode={1}", Eval("ID"),
Eval("Mode")) %>' />
• Helper function
– Find control recursively
public static Control FindControl(Control start, string id) {
Control foundControl;
if (start != null) {
foundControl = start.FindControl(id);
if (foundControl != null) return foundControl;
foreach (Control c in start.Controls) {
foundControl = FindControl(c, id);
if (foundControl != null) return foundControl;
}
}
return null;
}
• See also
Generic Recursive Find Control Extension by Brendan Enrick
ASP.NET 2.0 MasterPages and FindControl() by Rick Strahl
if (this.checked)
{
$(elemIDchkA).attr('checked', 'true');
$(elemIDchkA).attr('disabled', 'true');
}
else
$(elemIDchkA).removeAttr('disabled');
});
• See also
– What is this? By Mike Alsup
– jQuery's this: demystified by Remy Sharp
if (ScriptManager1.IsInAsyncPostBack)
{
…
}
– In JavaScript
• Default behavior
– Cancels running postback and switch to the new postback (confusing)
• Custom behavior
– Options: show error message, …
• How
Sys.Application.add_load(ApplicationLoadHandler);
function ApplicationLoadHandler(sender, args) {
if (!Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack())
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(InitializeRequest);
}
function InitializeRequest(sender, args) {
if (Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {
args.set_cancel(true);
alert('Please wait until the already running operation finishes processing and
retry.');
}
}
Sys.Application.notifyScriptLoaded();
• Example
Giving Precedence to a Specific Asynchronous Postback
• Default behavior
– Children of UpdatePanel automatically invoke (partial) postback
• Unless AutoPostBack property is set to false
• Custom behavior
– Can specify which controls/events perform partial/full updates
• Use <Triggers> section of UpdatePanel control
<asp:UpdatePanel … UpdateMode="Conditional">
<Triggers>
<asp:PostBackTrigger ControlID="btnFull" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="btnPartial" EventName="Click" />
</Triggers>
<ContentTemplate>
…
</ContentTemplate>
</asp:UpdatePanel>
• See also
– Understanding ASP.NET AJAX UpdatePanel Triggers
• Default behavior
– Does not display errors (non-documented change in ASP.NET 3.5)
• Custom behavior
– Show error message box, or show inline error message, or …
• How
– Add OnAsyncPostbackError attribute to ScriptManager element
<asp:ScriptManager …
OnAsyncPostbackError="ScriptManager1_AsyncPostBackError">
– In OnAsyncPostbackError event handler, set AsyncPostBackErrorMessage
property of the ScriptManager object (see next slide)
ScriptManager1.AsyncPostBackErrorMessage = e.Exception.Message;
– Add JavaScript code to handle error event and process error message
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequest);
function EndRequest(sender, args){/* see next slide */}
• Examples
– Handling Errors During a Partial-page Postback by Matthew Ellis
– How to improve ASP.NET AJAX error handling by Dave Ward (read comments)
35 of 43 Building intranet applications with ASP.NET AJAX and jQuery 02/25/09
Error handlers
• Server-side (code-behind)
protected void ScriptManager1_AsyncPostBackError(object sender,
AsyncPostBackErrorEventArgs e) {
if (e.Exception.Data["UserError"] == null)
ScriptManager1.AsyncPostBackErrorMessage = e.Exception.Message;
else
ScriptManager1.AsyncPostBackErrorMessage = e.Exception.Data["UserError"].ToString();
}
• Client-side (JavaScript)
function EndRequest(sender, args) {
if (!args.get_error()) return true;
alert(msg);
args.set_errorHandled(true);
}
• In ASPX code
<asp:LinkButton …
ID="lnkItem"
Text='<%# Eval("Name") %>'
OnClientClick='<%# String.Format("return ToggleDetails(\"{0}\");",
lnkItem.ClientID) %>'
OnClick="lnkItem_Click"
CommandArgument='<%# Eval("ID") %>' />
• In JavaScript
function ToggleDetails(elemID) {
…
if (/* panel has not been initialized, pass event to server */)
return true;
• In code-behind
private void lnkItem_Click(object sender, EventArgs e)
{
…
int id = 0;
if (sender is LinkButton)
id = Convert.ToInt32(((LinkButton)sender).CommandArgument);
else
…
…
}
• ViewState
– May need to disable ViewState for controls updated via JavaScript
• Invisible elements
– Be careful with <… Visible="false" />; jQuery may not find these
elements
• Use <… style="display:none;" /> if possible
– See also
• ATLAS UpdatePanel problem with Postback Scripts and invisible controls by Rick Strahl
• Text values
– Know when to use $(…).text() or $(…).val()
• Interesting topics
– Page methods (see ASP.NET AJAX Page Methods by Damien White)
– jQuery, UpdatePanel, UpdateProgress in master pages
– jQuery, UpdatePanel, UpdateProgress in user controls
– Calling Web services via client-side proxy classes in ASP.NET AJAX
– Using client templates in ASP.NET 4.0 AJAX
– Using jQuery plugins
– Writing jQuery plugins
– Using jQuery UI
• Presentations/talks/demos/videocasts/samples
– Performance Improvements in Browsers by John Resig at Google (92 min)
– MIX08 Presentation : Real-World AJAX with ASP.NET Video by Nikhil Kothari (references to
presentations/demos/talks/samples)
– ASP.NET 3.5: Adding AJAX Functionality to an Existing ASP.NET Page by Todd Miranda
– ASP.NET Podcast Show #128 - AJAX with jQuery by Wallace B. (Wally) McClure
• JavaScript
– Create Advanced Web Applications With Object-Oriented Techniques by Ray Djajadinata
• jQuery
– The Grubbsian: jQuery (a few interesting articles)
– jQuery for JavaScript programmers by Simon Willison
• jQuery, ASP.NET, AJAX
– Tales from the Evil Empire by Bertrand Le Roy
– Blog - Microsoft .NET, ASP.NET, AJAX and more by Visoft, Inc.
• IntelliSense
– JQuery 1.3 and Visual Studio 2008 IntelliSense by James Hart
– (Better) JQuery IntelliSense in VS2008 by Brad Vin
– JScript IntelliSense FAQ
• Rich Internet Applications (RIA)
– Developing rich Internet applications (RIA) by Alek Davis (links to many samples)
• CSS
– Which CSS Grid Framework Should You Use for Web Design?