jQuery and ASP.NET
Better together for building
rich web apps
Fritz Onion
Co-Founder, Pluralsight
Introduction
• jQuery
– Has become the de facto standard for clientside programming
– Being actively added to by MS Ajax team
• ASP.NET Ajax
– Effectively deprecated at this point
– Ajax Toolkit still available, but prefer jQuery
• ASP.NET + jQuery
– Work well together
Adding jQuery to ASP.NET
• Using NuGet
– Can add most any version / configuration
using NuGet from within VS2010
• Downloading directly from jQuery.com
– Can download the package you want and
copy script files locally
• Generating jQuery UI custom packages
– Special feature of jQueryUI – generate
custom ‘themed’ packages
Toolkit Controls
• Controls available in the Ajax Toolkit
Accordion Control
AlwaysVisible Control
Animation Control
AsyncFileUpload Control
AutoComplete Control
Calendar Control
CascadingDropdown Control
CollapsiblePanel Control
ColorPicker Control
ComboBox Control
ConfirmButton Control
DragPanel Control
DropDown Control
DropShadow Control
DynamicPopulate Control
FilteredTextBox Control
HoverMenu Control
HTMLEditor Control
ListSearch Control
MaskedEdit Control
ModalPopup Control
MultiHandleSlider Control
MutuallyExclusiveCheckBox
Control
NoBot Control
NumericUpDown Control
PagingBulletedList Control
PasswordStrength Control
Popup Control
Rating Control
ReorderList Control
Resizable Control
RoundedCorners Control
Seadragon Control
Slider Control
SlideShow Control
TabContainer and TabPanel
Controls
TextBoxWatermark Control
ToggleButton Control
UpdatePanelAnimation Control
ValidatorCallout Control
jQuery.UI
• Widgets available in jQuery.UI
jQuery and WebForms
• ClientID management
– Use ClientIdMode=xxx
• Augment server-side controls with client
behaviors
<asp:Label ClientIDMode="Static" ID="myId"
Text="hi" runat="server" />
Renders as
<span id="myId">hi</span>
ClientIdMode
• ClientIDMode lets you control client ids for
server controls
– AutoID – same as 3.5x and earlier
– Static – what you type is what's used
– Predictable – concatenates ID properties of
naming containers (which you can set with
new properties)
• ClientIDRowSuffix
– Inherit (default) – whatever the immediate
parent specifies
Using jQuery and MVC
• Injecting jQuery scripts
<head>
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")"
type="text/javascript"></script>
</head>
• Leveraging jQuery features in MVC apps
Server Communication with
jQuery
•
•
•
•
•
$.ajax()
Calling the server
JSON serialization
jQuery data rendering
jQuery templates
Server Communication
• High level options
$(function() {
$("a").click(getInstructorInfo);
}
function getInstructorInfo(event) {
– load()
var instructorName = $(this).text();
$("#detail").load("getInstructorInfo.ashx",
– get()
{ "instructor": instructorName });
return true;
– post()
}
– getJSON()
• Low level options
– ajax()
Using get() and post()
• Allows access to raw XmlHTTPRequest object
• Packages data into query string (GET) or form
values (POST)
• Callback function invoked to process result
– Only invoked on successful completion
function getInstructorInfo(event) {
var instructorName = $(this).text();
$.post("getInstructorInfo.ashx",
{ "instructor" : instructorName },
function(result) { $("#detail").html(result) },
"html");
}
//
//
//
//
url
data
callback
type of data
Error Handling
• Need to use lower level ajax() method or ajaxError()
method.
• With ajax() method, single parameter specifies all
options
– Includes success and error callback functions
var instructorName = "Dr. Evil";
$.ajax(
{
type: "POST",
url: "getInstructorInfo.ashx",
data: { "instructor": instructorName },
timeout: 5000, // ms
success: function(result) { $("#detail").html(result) },
error: function(xhr, status, exception) {
$("#detail").html(
"There was an error.<br/> " +
"Status: " + status + "<br/>" +
"XHR Status: " + xhr.statusText + "<br/>");
}
} );
Summary
• jQuery and jQuery.UI
– Huge community support (including MS)
– Continue to be refined and added to
• ASP.NET Ajax
– No more active work being done
– Generally prefer jQuery moving forward
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in
the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft
must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any
information provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
© Copyright 2026 Paperzz