The document is a presentation about providing a rich web experience using jQuery, Ajax, and .NET. It discusses JavaScript and jQuery, including jQuery syntax, selectors, chaining, traversing, manipulation, events, effects, and Ajax functionality. It also covers jQuery UI widgets and themes. The last section discusses user experience considerations like validating user input with Ajax calls.

1. A Rich Web Experience
With jQuery, Ajax and .NET
James Johnson
Founder and President, Inland Empire .NET User’s Group
San Francisco .NET Developers User Group
March 28th, 2012

3. WHO I AM
Founder and President, Inland Empire .NET
User’s Group
Three-time and current Microsoft MVP – CAD
Software developer by day
Serial netrepreneur by night

4. AGENDA
jQuery
Ajax
User Experience

5. JAVASCRIPT
 Used to provide interactivity with a web page
 Enable programmatic access to a web page
 Dynamic
 Weakly typed
 Prototype-based
 Supports closures and higher order function

6. JAVASCRIPT
 Not to be confused with Java, it has a similar syntax
 {} and ;
 First released as LiveScript in September 1995
 Renamed to JavaScript in December 1995
 Easy to write functions, then copy and paste all over
 Quickly one of the most popular languages for web
development
 But thought of as a kiddy language
 Advent of Ajax brought JavaScript attention by
“professionals”

7. JAVASCRIPT
 Pros
 Dynamic
 Easy to develop with
 Easy to debug
 Similar syntax to “real” languages
 Cons
 Dynamic
 Easy to develop with
 Every browser seems to have it’s own JavaScript
engine
 Difficult to have same behaviours across browsers

8. JAVASCRIPT LIBRARIES
 Pre-written JavaScript controls
 Easier development
 Many, many libraries
 Dojo, Echo, Ext, Google Web Toolkit, jQuery, MochiKit,
MooTools, Prototype, qooxdoo, Rico, script.aculo.us,
Spry, Yahoo! UI Library

9. JQUERY
 Released in January 2006 by John Resig
 Free, open source, dual-licensed under MIT and GNU
 Syntax is easier to navigate the DOM
 Handles events, creates animations, modify attributes
 Ajax grooviness baked in
 Used by over 39% of the top 10,000 websites
 Microsoft bundles with ASP.NET Ajax and ASP.NET
MVC
 Full support from Microsoft

10. JQUERY BENEFITS
 Fast development
 Solid, standardized library
 Gracefully fails – no glaring errors or frozen pages
 Lots and lots and lots of examples
 Very easy to grok
 All the cool kids use it
 Intellisense with –vsdoc.js

11. JQUERY SYNTAX
 $(“some element”) or jQuery(“some element”)
 Can select by ID or className
 $(“#myElement”) gets the only ID=“myElement”
 $(“div.myElement”) gets all divs with
class=“myElement”
 Easy to traverse
 $(“div.main ul li”) – all <li> within div class=“main”
 $(“div.main”).find(“li”) – same as above
 $(“div.main”).find(“li:odd”) – same as above but only
ODD elements – zero-based

12. JQUERY SELECTORS
 Matching a set of document elements
 :checkbox, :eq(n), :even, :has(), :first, :last, :focus,
:not()
$(“input:not(:checked)”);
$(“.myClass:even”);
$(“input:checkbox”);
$(“.my-class:has(p)”);
$(“input[type=„text‟]”);

13. JQUERY CHAINING
 Once an element is found, reference is kept
 Instead of
$(“div.myElement”).hide();
$(“div.myElement”).html(“hi”);
$(“div.myElement”).addClass(“red”);
$(“div.myElement”).fadeIn(“slow”);
 Chain the actions
$(“div.myElement”).hide().html(“hi”)
.addClass(“red”).fadeIn(“slow”);

14. JQUERY TRAVERSING
 .children() – all child elements, optional filter
 .each() – iterate through a collection of matched
elements
 .find() – get descendants of element
 .closest() – first matched element
 .has() – has a filter
 .is() – checks against a selector
 .parent(), .parents()
 .siblings()
 .next()
 .prev()

15. JQUERY MANIPULATION
 .addClass() – adds a class to an element
 .removeClass() – remove a class from an element
 .append() – inserts content
 .appendTo() – appends element to selector
 .remove() – removes selected element from DOM
 .val(“some text”) – sets value of element
 .html(“some text”) – sets HTML of element
 .prop() – gets a property of element
 .attr() – gets an attribute of element
 .data() – gets a data attribute of an element

16. JQUERY EVENTS
 Bind to DOM events
 click, hover, focus, keydown, select, submit
 Three main methods to attach event
$(document).ready(function(){
$(“myElement”).click(function() {
doSomething(); });
});
 Fired when the DOM is completely loaded
$(“myElement”).live(“click”, function() {
doSomething(); });
 Fired when the element is created in the DOM
$(“myElement”).on(“click”, function(){
doSomething();});
 As of jQuery 1.7, the most efficient way of binding

17. JQUERY EFFECTS
 Used for animating elements on a page
 fadeIn(), fadeOut(), fadeToggle()
 slideUp(), slideDown(), slideToggle()
 show(), hide(), toggle()
 animate() – create custom animations, pass in a
map of CSS properties; opacity, position, color

18. JQUERY AJAX
 Used for loading data into the DOM from a server
request
 Used for sending data to the server
 .ajax() – main method for Ajax methods
 .get() – get data from the server
 .post() – send data to the server
 .serialize() – prepare form data to send

19. JQUERY AJAX - SETTINGS
 async – defaulted to true
 beforeSend – used to modify the XMLHTTPRequest
object
 cache – default to true
 contentType – default to application/x-www-form-
urlencoded
 data – data to be sent to the server
 dataType – xml, json, script, html
 type – GET, POST
 url – where the request is sent

20. JQUERY AJAX
 .ajaxSend() – attach function to be run before
request is sent
 .ajaxStart() – handler called when first Ajax request
begins
 .ajaxStop() – handler called when all Ajax requests
are completed
 .ajaxSuccess – function to be called on a successful
request

21. JQUERY AJAX
$.ajax({
url: “/UserGroup/GetGroups”,
type: “GET”,
dataType: “json”,
success: function(data){
// do something with the result
}
});

22. DEMOS

23. JQUERY UI
 Built with jQuery
 Supports IE 6.0+, Chrome, Firefox 3+, Safari
3.1+, Opera 9.6+
 Five interactions, eight widgets, various effects and
utilities
 Themeable

24. JQUERY UI - INTERACTIONS
 Draggable – Allows DOM element to be dragged
 Droppable – Specifies a DOM element to be target
 Resizeable – Any DOM element to be resizeable
 Selectable – Any DOM element(s) to be selected
 Sortable – Rearrange a list of DOM elements

25. JQUERY UI - WIDGETS
 Accordion
 Autocomplete
 Button
 Datepicker
 Dialog
 Progressbar
 Slider
 Tabs

26. JQUERY UI - AUTOCOMPLETE
$(“#element”).autocomplete({
source: someSource,
delay: 500,
minLength: 5
});
 source – the data to use, required. String, array, or callback
 delay – milliseconds before triggering
 minLength – minimum number of characters before triggering

27. JQUERY UI - DATEPICKER
$(“#element”).datepicker({
buttonImage: “/images/datepicker.gif”,
maxDate: “+1m + 1w”,
constrainInput: true,
onSelect: function(dateText, inst){
doSomething();
}
});
 buttonImage– graphic to use as icon
 maxDate – maximum date allowed
 constrainInput – only characters allowed by dateFormat
 onSelect – function to fire when date is selected

28. JQUERY UI - DIALOG
$(“#element”).dialog({
autoOpen: false,
buttons: { "Ok": function() {
$(this).dialog("close"); }},
modal: true,
minHeight: 300
});
 autoOpen– if true, shows dialog on creation
 buttons– an array of buttons and functions
 modal– other items on page will be disabled
 minHeight– minimum height of dialog

29. JQUERY UI - THEMES
 24 pre-built themes
 Can create new, or edit existing

30. JQUERY UI - THEMES
 Modify CSS for new theme
 Download and give name

31. JQUERY UI - THEMES
 Add to project
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/themes/usergroups/jquery-ui-
1.8.17.custom.css")" />

32. USER EXPERIENCE
 User Registration
 Be as minimal as possible
 Don’t ask for all possible data at start
 Go easy, can always come back for more

33. USER EXPERIENCE
 Use Ajax/JavaScript to help the user
 Check for existing username before submitting
 Check for existing email and format

34. USER EXPERIENCE – VALIDATE
USERNAME
function validateUserName(elem) {
var $elem = $(elem);
var userName = $elem.val();
var url = "/Account/IsExistingUser/";
$.get(url, { name: userName }, function (json) {
if (json) {
$("#userNameTaken").fadeIn();
$elem.removeClass("valid")
.addClass("invalid");
} else {
$("#userNameTaken").fadeOut();
$elem.removeClass("invalid")
.addClass("valid");
}
});
}

35. USER EXPERIENCE – VALIDATE
USERNAME
[HttpGet]
public JsonResult IsExistingUser(string name)
{
return Json(_memberHelper.IsExistingUser (name),
JsonRequestBehavior.AllowGet );
}

36. QUESTIONS?
 Slides are at http://slidesha.re/RichWeb

37. THANK YOU
 James Johnson
 james@latringo.com
 @latringo
 www.latringo.me
 Inland Empire .NET User’s Group
 www.iedotnetug.org
 2 nd Tuesday of each month
 San Bernardino, CA