Presentation given to Los Angeles .NET Developers Group on Monday, April 2nd 2012

1. A Rich Web Experience
With jQuery, Ajax and .NET
James Johnson
Founder and President, Inland Empire .NET User’s Group
Los Angeles .NET Developers Group
April 2nd, 2012

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

4. 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

5. 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”

6. 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

7. 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

8. 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

9. 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

10. 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

11. 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‟]”);

12. 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”);

13. 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()

14. 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

15. 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

16. 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

17. 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

18. 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

19. 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

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

21. DEMOS

22. 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

23. 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

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

25. 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

26. 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

27. 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

28. 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

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

30. 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");
}
});
}

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

32. QUESTIONS?

33. THANK YOU
 Slides are at http://slidesha.re/RichWeb
 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