A Rich Web Experience with jQuery, Ajax and .NET

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

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

AGENDA

jQuery
Ajax
User Experience

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

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”

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JQUERY AJAX

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

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

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

JQUERY UI - WIDGETS

 Accordion
 Autocomplete
 Button
 Datepicker
 Dialog
 Progressbar
 Slider
 Tabs

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

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

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

JQUERY UI - THEMES

 24 pre-built themes
 Can create new, or edit existing

JQUERY UI - THEMES

 Modify CSS for new theme
 Download and give name

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")" />

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

USER EXPERIENCE

 Use Ajax/JavaScript to help the user
 Check for existing username before submitting

 Check for existing email and format

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

USER EXPERIENCE – VALIDATE
USERNAME

[HttpGet]
public JsonResult IsExistingUser(string name)
{
return Json(_memberHelper.IsExistingUser (name),
JsonRequestBehavior.AllowGet );
}

QUESTIONS?

 Slides are at http://slidesha.re/RichWeb

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

A Rich Web Experience with jQuery, Ajax and .NET

Recommended

More Related Content

What's hot (20)

Similar to A Rich Web Experience with jQuery, Ajax and .NET (20)

More from James Johnson (6)

Recently uploaded (20)

A Rich Web Experience with jQuery, Ajax and .NET