Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

A Rich Web experience with jQuery, Ajax and .NET


Published on

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

Published in: Technology
  • Be the first to comment

A Rich Web experience with jQuery, Ajax and .NET

  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. 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. 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. 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. 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. JAVASCRIPT LIBRARIES Pre-written JavaScript controls Easier development Many, many libraries  Dojo, Echo, Ext, Google Web Toolkit, jQuery, MochiKit, MooTools, Prototype, qooxdoo, Rico,, Spry, Yahoo! UI Library
  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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. JQUERY AJAX$.ajax({ url: “/UserGroup/GetGroups”, type: “GET”, dataType: “json”, success: function(data){ // do something with the result }});
  20. DEMOS
  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. 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. JQUERY UI - WIDGETS Accordion Autocomplete Button Datepicker Dialog Progressbar Slider Tabs
  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. 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. 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. 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. USER EXPERIENCE Use Ajax/JavaScript to help the user Check for existing username before submitting Check for existing email and format
  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. USER EXPERIENCE – VALIDATE USERNAME[HttpGet]public JsonResult IsExistingUser(string name){ return Json(_memberHelper.IsExistingUser (name), JsonRequestBehavior.AllowGet );}
  32. THANK YOU Slides are at James Johnson @latringo Inland Empire .NET User’s Group   2 nd Tuesday of each month  San Bernardino, CA