A Rich Web ExperienceWith jQuery, Ajax and .NETJames JohnsonFounder and President, Inland Empire .NET User’s GroupLos Ange...
WHO I AMFounder and President, Inland Empire .NET User’s GroupFour-time and current Microsoft MVP – CADSoftware develop...
JAVASCRIPT Used to provide interactivity with a web page Enable programmatic access to a web page Dynamic Weakly typed...
JAVASCRIPT Not to be confused with Java, it has a similar syntax    {} and ; First released as LiveScript in September ...
JAVASCRIPT Pros   Dynamic   Easy to develop with   Easy to debug   Similar syntax to “real” languages Cons   Dynami...
JAVASCRIPT LIBRARIES Pre-written JavaScript controls Easier development Many, many libraries    Dojo, Echo, Ext, Googl...
JQUERY Released in January 2006 by John Resig Free, open source, dual-licensed under MIT and GNU Syntax is easier to na...
JQUERY BENEFITS Fast development Solid, standardized library Gracefully fails – no glaring errors or frozen pages Lots...
JQUERY SYNTAX $(“some element”) or jQuery(“some element”) Can select by ID or className    $(“#myElement”) gets the onl...
JQUERY SELECTORS Matching a set of document elements :checkbox, :eq(n), :even, :has(), :first, :last, :focus,  :not()$(“...
JQUERY CHAINING Once an element is found, reference is kept Instead of   $(“div.myElement”).hide();   $(“div.myElement”)...
JQUERY TRAVERSING .children() – all child elements, optional filter .each() – iterate through a collection of matched  e...
JQUERY MANIPULATION .addClass() – adds a class to an element .removeClass() – remove a class from an element .append() ...
JQUERY EVENTS Bind to DOM events   click, hover, focus, keydown, select, submit Three main methods to attach event  $(d...
JQUERY EFFECTS Used for animating elements on a page fadeIn(), fadeOut(), fadeToggle() slideUp(), slideDown(), slideTog...
JQUERY AJAX Used for loading data into the DOM from a server  request Used for sending data to the server .ajax() – mai...
JQUERY AJAX - SETTINGS async – defaulted to true beforeSend – used to modify the XMLHTTPRequest  object cache – default...
JQUERY AJAX .ajaxSend() – attach function to be run before  request is sent .ajaxStart() – handler called when first Aja...
JQUERY AJAX$.ajax({ url: “/UserGroup/GetGroups”, type: “GET”, dataType: “json”, success: function(data){    // do somethin...
DEMOS
JQUERY UI Built with jQuery Supports IE 6.0+, Chrome, Firefox 3+, Safari 3.1+,  Opera 9.6+ Five interactions, eight wid...
JQUERY UI - INTERACTIONS Draggable – Allows DOM element to be dragged Droppable – Specifies a DOM element to be target ...
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...
JQUERY UI - DATEPICKER$(“#element”).datepicker({ buttonImage: “/images/datepicker.gif”, maxDate: “+1m + 1w”, constrainInpu...
JQUERY UI - DIALOG$(“#element”).dialog({ autoOpen: false, buttons: { "Ok": function() {     $(this).dialog("close"); }}, m...
USER EXPERIENCE User Registration   Be as minimal as possible   Don’t ask for all possible data at start   Go easy, ca...
USER EXPERIENCE Use Ajax/JavaScript to help the user Check for existing username before submitting Check for existing e...
USER EXPERIENCE – VALIDATE                 USERNAMEfunction validateUserName(elem) {    var $elem = $(elem);    var userNa...
USER EXPERIENCE – VALIDATE                 USERNAME[HttpGet]public JsonResult IsExistingUser(string name){   return Json(_...
QUESTIONS?
THANK YOU Slides are at http://slidesha.re/RichWeb James Johnson james@latringo.com @latringo www.latringo.me Inland...
A Rich Web experience with jQuery, Ajax and .NET
Upcoming SlideShare
Loading in...5
×

A Rich Web experience with jQuery, Ajax and .NET

3,146

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,146
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
27
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "A Rich Web experience with jQuery, Ajax and .NET"

  1. 1. A Rich Web ExperienceWith jQuery, Ajax and .NETJames JohnsonFounder and President, Inland Empire .NET User’s GroupLos Angeles .NET Developers GroupApril 2nd, 2012
  2. 2. 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
  3. 3. 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
  4. 4. 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”
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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‟]”);
  11. 11. 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”);
  12. 12. 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()
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. JQUERY AJAX$.ajax({ url: “/UserGroup/GetGroups”, type: “GET”, dataType: “json”, success: function(data){ // do something with the result }});
  20. 20. DEMOS
  21. 21. 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
  22. 22. 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
  23. 23. JQUERY UI - WIDGETS Accordion Autocomplete Button Datepicker Dialog Progressbar Slider Tabs
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. USER EXPERIENCE Use Ajax/JavaScript to help the user Check for existing username before submitting Check for existing email and format
  29. 29. USER EXPERIENCE – VALIDATE USERNAMEfunction 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"); } });}
  30. 30. USER EXPERIENCE – VALIDATE USERNAME[HttpGet]public JsonResult IsExistingUser(string name){ return Json(_memberHelper.IsExistingUser (name), JsonRequestBehavior.AllowGet );}
  31. 31. QUESTIONS?
  32. 32. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×