Introduction to jQuery and ASP>NET AJAX capabilities.

1. Building intranet applications
with ASP.NET AJAX and jQuery
Alek Davis
2009 (updated in 2010)

2. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
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 44

3. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
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 44

4. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Rich internet applications (RIA)
• Server-side
• ASP/ASP.NET (Microsoft)
• JSP (Sun/Oracle)
• 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, …
4 of 44

5. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
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 44

6. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
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 44

7. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
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)
– 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: September 2009
• jQuery
7 of 44

8. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Learning ASP.NET AJAX
• 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
8 of 44

9. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
jQuery
• Quick facts
– JavaScript library (file) created by John Resig
– Open source (MIT and GPL licenses; good for commercial use)
– Current version: 1.4.2
– Size: ~155 KB (~24 KB minimized)
– 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
– Included with Visual Studio 2010 (and later)
– 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
9 of 44

10. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Learning jQuery
• 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
10 of 44

11. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
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
• Animations
– $(…).hide() $(…).show()
– $(…).fadeIn("fast") $(…).fadeOut("slow")
– $(…).slideUp(1000) $(…).slideDown(5000)
– …
11 of 44

12. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
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 44

13. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
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 44

14. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
jQuery demo
• Features
– Custom search box
• Auto-show, auto-hide
• Submit, cancel
• Buttons and keyboard
• Input validation
14 of 44

15. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
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 (<NOSCRIPT>)
– Less JavaScript code
• 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)
• Why ASP.NET AJAX (UpdatePanel, UpdateProgress) + jQuery?
– Less code (clean code)
– Reasonable efficiency (not the best, but good enough)
15 of 44

16. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
ASP.NET AJAX + jQuery limitations
• Why not use ASP.NET AJAX (UpdatePanel, UpdateProgress) +
jQuery?
– Performance (in certain scenarios)
– HTML payload
– ViewState size
– Not pure
• 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)
• Video (good talk describing one alternative)
– ASP.NET and jQuery by Stephen Walther at PDC 2008 (74 min)
16 of 44

17. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Web development
• 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
• Graphics (*free* icons)
– Visual Studio 2008 Image Library
– Sweetie icons (2 collections: BasePack and WebCommunication)
– ICONlook: the icon search
– Crystal Project (see also Crystal Clear)
– See also: 14 Free Icon Resources
• CSS frameworks
– BlueprintCSS
– YUI Grid CSS
– See also: List of CSS frameworks
17 of 44

18. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Browsers and tools
• 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
• Chrome
– Use the built-in Developer Tools menu
• 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
18 of 44

19. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
ASP.NET AJAX + jQuery demo
• 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
19 of 44

20. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Application settings and configuration
• Enable a Visual Studio project for ASP.NET AJAX
– Set Target Framework (in the project Properties – Application tab)
to .NET Framework 3.5
– For upgraded projects (e.g. migrated from VS 2005 to VS 2008)
• Don't use <xhtmlConformance mode="Legacy"/> in Web.config; otherwise,
you may get the following error:
"'Sys.WebForms.PageRequestManager' is null or not an object"
– See Scott Guthrie's post (read comments on suggestions for customization of the
xhtmConformance settings)
20 of 44

21. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Adding ASP.NET AJAX functionality
• Use ScriptManager control
– Set EnablePartialRendering attribute to true
<asp:ScriptManager
id="ScriptManager1"
EnablePartialRendering="true"
runat="server">
…
</asp:ScriptManager>
– Include references to JavaScript files in the <Scripts> section
21 of 44

22. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Using jQuery in a project
• 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>
22 of 44

23. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
jQuery and IntelliSense
• The documentation (-vsdoc.js) file
– Use for documentation only (it’s not functional)
– If official version is not available (e.g. immediately after release)
• Generate vsdoc file via InfoBasis JQuery IntelliSense Header Generator
– Generated stub file contains no code (only comments, only works wit v.1.3)
• 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"/>
23 of 44

24. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
jQuery code
• Traditional jQuery code
– Does not work after partial postback
$(document).ready(function() // or $(function()
{
// JavaScript code here
// …
});
• ASP.NET AJAX-specific jQuery
– Works after partial postback
// $(function()
function pageLoad(sender, args)
{
// JavaScript code here
// …
}
// });
– But…
24 of 44

25. On pageLoad()
• pageLoad is not the same as $(document).ready
– pageLoad is called on initial page load and after every partial postback
– Can cause repeated event bindings
• One event (such as click) triggers event handler multiple times
• What to do?
– Call unbind before any defining any bindings for an element (selector)
function pageLoad(sender, args){
$('a[id$='ItemName']').unbind();
$('a[id$='ItemName']').click(function(e){…}
}
• See $(document).ready() and pageLoad() are not the same! by Dave Ward
– Or use live for event binding inside of $(document).ready:
$(document).ready(function(){
$('a[id$='ItemName']').live("click", function(e){…});
});
• live binds all current and future elements (selectors)
• live works for most common, but not all event types
• See jQuery live() and ASP.NET Ajax asynchronous postback by Arnold Matusz
09/03/15Building intranet applications with ASP.NET AJAX and jQuery25 of 44

26. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
UpdateProgress control
• 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
• *Free* progress indicators (graphics)
– Activity indicators
– Ajaxload: Ajax loading gif generator
26 of 44

27. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Anatomy of a postback
• 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
27 of 44

28. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
UpdatePanel control
• 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"))
%>' />
• Accessing controls in UpdatePanel
28 of 44

29. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
How to find a control?
• 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
29 of 44

30. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Accessing UpdatePanel from code-behind
• Access UpdatePanel control
private void someCtrl_Click(object sender, EventArgs e)
{
…
UpdatePanel updPanel = FindControl((Control)sender, "updPanel") as UpdatePanel;
…
}
• Access controls hosted by UpdatePanel
HtmlTable tbl = FindControl(updPanel, "tblDetails") as HtmlTable;
LinkButton lnk = FindControl(updPanel, "lnkItem") as LinkButton;
ImageButton img = FindControl(updPanel, "imgDetails") as ImageButton;
30 of 44

31. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Find controls via jQuery
• If you do not know IDs of elements (e.g. in Repeater)
– Example: Make sure that check box A gets checked and disabled when
user checks box B (both check boxes belong to a repeater item and have
IDs chkA and chkB)
$('input:checkbox[id$='chkB']').click(function(e)
{
var elemID = $(e.target).attr('id');
var prefixID = elemID.replace(/chkB$/i, "");
var elemIDchkA = "#" + elemID.replace(/chkB$/, "chkA");
if (this.checked)
{
$(elemIDchkA).attr('checked', 'true');
$(elemIDchkA).attr('disabled', 'true');
}
else
$(elemIDchkA).removeAttr('disabled');
});
31 of 44

32. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
What is $(this)?
• this can have different contexts
– Most common contexts
• Context #1: JavaScript DOM element
– Inside of a callback function (click, hover, …)
• Context #2: jQuery object
– Inside of custom jQuery function
• Context #3: JavaScript object
– Such as an array element
• What about $(this)?
– $(this) converts a DOM object into a jQuery object
• To convert a jQuery object to a DOM object use:
– $(…).get(0) or $(…)[0]
• See also
– What is this? By Mike Alsup
– jQuery's this: demystified by Remy Sharp
32 of 44

33. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Partial postback
• Detecting partial postback
– In code-behind
if (ScriptManager1.IsInAsyncPostBack)
{
…
}
– In JavaScript
function pageLoad(sender, args)
{
if (args.get_isPartialLoad())
{
…
}
}
33 of 44

34. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Handle concurrent partial postbacks
• 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
34 of 44

35. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Customize postbacks
• 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
35 of 44

36. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Handle errors from partial postback
• 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)
36 of 44

37. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
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;
if (args.get_error().message == null || args.get_error().message.length == 0)
return true;
// Get message without the prefix (name of exception type).
var msg = args.get_error().message.replace(/^[^:]+:s*/, "");
if (msg == null || msg.length == 0) return true;
alert(msg);
args.set_errorHandled(true);
}
37 of 44

38. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Processing control info
• 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;
// Assume that $(…) returns a details panel
if ($(…).is(':visible')) $(…).hide();
else $(…).show();
// Suppress default operation caused by click event.
return false;
}
38 of 44

39. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Obtaining control info in code-behind
• 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
…
…
}
39 of 44

40. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Other ASP.NET AJAX considerations
• 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
40 of 44

41. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Other jQuery considerations
• Text values
– Know when to use $(…).text() or $(…).val()
• Prevent default behavior
– Use e.PreventDefaults or return false from function
41 of 44

42. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
What's next?
• 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
42 of 44

43. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Videos
• 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
43 of 44

44. 09/03/15Building intranet applications with ASP.NET AJAX and jQuery
Resources
• 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?
44 of 44