a rich web experience with jquery, ajax and .net
DESCRIPTION
Presentation given to Los Angeles .NET Developers Group on Monday, April 2nd 2012TRANSCRIPT
A Rich Web Experience With jQuery, Ajax
and .NET
James JohnsonFounder and President, Inland Empire .NET User’s Group
Los Angeles .NET Developers GroupApril 2nd, 2012
Click icon to add picture
Founder and President, Inland Empire .NET User’s Group
Four-time and current Microsoft MVP – CAD
Software developer by daySerial netrepreneur by night
WHO I AM
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
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
QUESTIONS?
Slides are at http://slidesha.re/RichWebJames [email protected]@latringowww.latringo.meInland Empire .NET User’s Group
www.iedotnetug.org2nd Tuesday of each monthSan Bernardino, CA
THANK YOU