a rich web experience with jquery, ajax and .net

A Rich Web Experience With jQuery, Ajax

and .NET

James JohnsonFounder and President, Inland Empire .NET User’s Group

San Francisco .NET Developers User GroupMarch 28th, 2012

Click icon to add picture

Founder and President, Inland Empire .NET User’s Group

Three-time and current Microsoft MVP – CAD

Software developer by daySerial netrepreneur by night

WHO I AM

jQueryAjaxUser Experience

AGENDA

Used to provide interactivity with a web pageEnable programmatic access to a web pageDynamicWeakly typedPrototype-basedSupports 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 1995Easy to write functions, then copy and paste

all overQuickly 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

ProsDynamicEasy to develop withEasy to debugSimilar syntax to “real” languages

ConsDynamicEasy to develop withEvery browser seems to have it’s own JavaScript engine

Difficult to have same behaviours across browsers

JAVASCRIPT

Pre-written JavaScript controlsEasier developmentMany, many libraries

Dojo, Echo, Ext, Google Web Toolkit, jQuery, MochiKit, MooTools, Prototype, qooxdoo, Rico, script.aculo.us, Spry, Yahoo! UI Library

JAVASCRIPT LIBRARIES

Released in January 2006 by John ResigFree, open source, dual-licensed under MIT

and GNUSyntax is easier to navigate the DOMHandles events, creates animations, modify

attributesAjax grooviness baked inUsed by over 39% of the top 10,000 websitesMicrosoft bundles with ASP.NET Ajax and

ASP.NET MVCFull support from Microsoft

JQUERY

Fast developmentSolid, standardized libraryGracefully fails – no glaring errors or frozen

pagesLots and lots and lots of examplesVery easy to grokAll the cool kids use itIntellisense with –vsdoc.js

JQUERY BENEFITS

$(“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 SYNTAX

Matching a set of document elements:checkbox, :eq(n), :even, :has(), :first, :last, :f

ocus, :not()

$(“input:not(:checked)”);$(“.myClass:even”);$(“input:checkbox”);$(“.my-class:has(p)”);$(“input[type=‘text’]”);

JQUERY SELECTORS

Once an element is found, reference is keptInstead 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 CHAINING

.children() – all child elements, optional fi lter.each() – iterate through a collection of

matched elements.find() – get descendants of element.closest() – first matched element.has() – has a fi lter.is() – checks against a selector .parent(), .parents().siblings().next().prev()

JQUERY TRAVERSING

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

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 effi cient way of binding

JQUERY EVENTS

Used for animating elements on a pagefadeIn(), fadeOut(), fadeToggle()slideUp(), slideDown(), slideToggle()show(), hide(), toggle()animate() – create custom animations, pass

in a map of CSS properties; opacity, position, color

JQUERY EFFECTS

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

async – defaulted to truebeforeSend – used to modify the

XMLHTTPRequest objectcache – default to truecontentType – default to application/x-www-

form-urlencodeddata – data to be sent to the serverdataType – xml, json, script, htmltype – GET, POSTurl – where the request is sent

JQUERY AJAX - SETTINGS

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

DEMOS

Built with jQuerySupports IE 6.0+, Chrome, Firefox 3+, Safari

3.1+, Opera 9.6+Five interactions, eight widgets, various

effects and utilitiesThemeable

JQUERY UI

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

AccordionAutocompleteButtonDatepickerDialogProgressbarSliderTabs

JQUERY UI - WIDGETS

$(“#element”).autocomplete({source: someSource,delay: 500,minLength: 5

});

source – the data to use, required. String, array, or callback

delay – milliseconds before triggeringminLength – minimum number of characters

before triggering

JQUERY UI - AUTOCOMPLETE

$(“#element”).datepicker({buttonImage: “/images/datepicker.gif”,maxDate: “+1m + 1w”,constrainInput: true,onSelect: function(dateText, inst){

doSomething();}

});

buttonImage– graphic to use as iconmaxDate – maximum date allowedconstrainInput – only characters allowed by

dateFormatonSelect – function to fi re when date is selected

JQUERY UI - DATEPICKER

$(“#element”).dialog({autoOpen: false,buttons: { "Ok": function() { $(this).dialog("close"); }},modal: true,minHeight: 300

});

autoOpen– if true, shows dialog on creationbuttons– an array of buttons and functionsmodal– other items on page will be disabledminHeight– minimum height of dialog

JQUERY UI - DIALOG

24 pre-built themesCan create new, or edit existing

JQUERY UI - THEMES

Modify CSS for new themeDownload and give name

JQUERY UI - THEMES

Add to project

JQUERY UI - THEMES

<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/themes/usergroups/jquery-ui-1.8.17.custom.css")" />

User RegistrationBe as minimal as possibleDon’t ask for all possible data at startGo easy, can always come back for more

USER EXPERIENCE

Use Ajax/JavaScript to help the userCheck for existing username before

submitting

Check for existing email and format

USER EXPERIENCE

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

USER EXPERIENCE – VALIDATE USERNAME

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

QUESTIONS?

James Johnsonjames@latringo.com@latringowww.latringo.meInland Empire .NET User’s Group

www.iedotnetug.org2nd Tuesday of each monthSan Bernardino, CA

THANK YOU