a rich web experience with jquery, ajax and .net
DESCRIPTION
Presentation given to Los Angeles .NET Developers Group on Monday, April 2nd 2012TRANSCRIPT
![Page 1: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/1.jpg)
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
![Page 2: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/2.jpg)
Click icon to add picture
![Page 3: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/3.jpg)
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
![Page 4: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/4.jpg)
Used to provide interactivity with a web pageEnable programmatic access to a web pageDynamicWeakly typedPrototype-basedSupports closures and higher order function
JAVASCRIPT
![Page 5: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/5.jpg)
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
![Page 6: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/6.jpg)
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
![Page 7: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/7.jpg)
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
![Page 8: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/8.jpg)
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
![Page 9: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/9.jpg)
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
![Page 10: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/10.jpg)
$(“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
![Page 11: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/11.jpg)
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
![Page 12: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/12.jpg)
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
![Page 13: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/13.jpg)
.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
![Page 14: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/14.jpg)
.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
![Page 15: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/15.jpg)
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
![Page 16: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/16.jpg)
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
![Page 17: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/17.jpg)
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
![Page 18: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/18.jpg)
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
![Page 19: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/19.jpg)
.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
![Page 20: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/20.jpg)
$.ajax({url: “/UserGroup/GetGroups”,type: “GET”,dataType: “json”,success: function(data){
// do something with the result}
});
JQUERY AJAX
![Page 21: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/21.jpg)
DEMOS
![Page 22: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/22.jpg)
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
![Page 23: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/23.jpg)
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
![Page 24: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/24.jpg)
AccordionAutocompleteButtonDatepickerDialogProgressbarSliderTabs
JQUERY UI - WIDGETS
![Page 25: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/25.jpg)
$(“#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
![Page 26: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/26.jpg)
$(“#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
![Page 27: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/27.jpg)
$(“#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
![Page 28: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/28.jpg)
User RegistrationBe as minimal as possibleDon’t ask for all possible data at startGo easy, can always come back for more
USER EXPERIENCE
![Page 29: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/29.jpg)
Use Ajax/JavaScript to help the userCheck for existing username before
submitting
Check for existing email and format
USER EXPERIENCE
![Page 30: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/30.jpg)
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
![Page 31: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/31.jpg)
[HttpGet]public JsonResult IsExistingUser(string name){ return Json(_memberHelper.IsExistingUser(name), JsonRequestBehavior.AllowGet);}
USER EXPERIENCE – VALIDATE USERNAME
![Page 32: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/32.jpg)
QUESTIONS?
![Page 33: A Rich Web experience with jQuery, Ajax and .NET](https://reader033.vdocuments.us/reader033/viewer/2022061302/54919615b4795972558b474c/html5/thumbnails/33.jpg)
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