JQuery and ASP.NET Better together for building rich web apps Fritz Onion Co-Founder, Pluralsight

jQuery and ASP.NETBetter together for building rich

web apps

Fritz OnionCo-Founder, Pluralsight

Introduction

• jQuery– Has become the de facto standard for

client-side 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 ControlAlwaysVisible ControlAnimation ControlAsyncFileUpload ControlAutoComplete ControlCalendar ControlCascadingDropdown ControlCollapsiblePanel ControlColorPicker ControlComboBox ControlConfirmButton ControlDragPanel ControlDropDown ControlDropShadow ControlDynamicPopulate Control

FilteredTextBox ControlHoverMenu ControlHTMLEditor ControlListSearch ControlMaskedEdit ControlModalPopup ControlMultiHandleSlider ControlMutuallyExclusiveCheckBox ControlNoBot ControlNumericUpDown ControlPagingBulletedList ControlPasswordStrength ControlPopup ControlRating Control

ReorderList ControlResizable ControlRoundedCorners ControlSeadragon ControlSlider ControlSlideShow ControlTabContainer and TabPanel ControlsTextBoxWatermark ControlToggleButton ControlUpdatePanelAnimation ControlValidatorCallout 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" />

<span id="myId">hi</span>

Renders as

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

• Leveraging jQuery features in MVC apps

<head> <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script></head>

Server Communication with jQuery

• $.ajax()• Calling the server• JSON serialization• jQuery data rendering• jQuery templates

Server Communication

• High level options– load()– get()– post()– getJSON()

• Low level options– ajax()

$(function() { $("a").click(getInstructorInfo);}

function getInstructorInfo(event) { var instructorName = $(this).text(); $("#detail").load("getInstructorInfo.ashx", { "instructor": instructorName }); return true;}

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", // url { "instructor" : instructorName }, // data function(result) { $("#detail").html(result) }, // callback "html"); // 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.

Documents

JQuery and ASP.NET Better together for building rich web apps Fritz Onion Co-Founder, Pluralsight