• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
A Rich Web experience with jQuery, Ajax and .NET

A Rich Web experience with jQuery, Ajax and .NET



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

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



Total Views
Views on SlideShare
Embed Views



7 Embeds 1,052

http://www.latringo.me 842
http://latringo.me 200
http://us-w1.rockmelt.com 5
http://home.himolde.no 2
http://www.udemy.com 1
http://www.onlydoo.com 1
http://translate.googleusercontent.com 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

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

    • A Rich Web ExperienceWith jQuery, Ajax and .NETJames JohnsonFounder and President, Inland Empire .NET User’s GroupLos Angeles .NET Developers GroupApril 2nd, 2012
    • 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
    • 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
    • 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”
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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‟]”);
    • 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”);
    • 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()
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • JQUERY AJAX$.ajax({ url: “/UserGroup/GetGroups”, type: “GET”, dataType: “json”, success: function(data){ // do something with the result }});
    • DEMOS
    • 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
    • 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
    • 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 use, required. String, array, or callback delay – milliseconds before triggering minLength – minimum number of characters before triggering
    • 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
    • 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
    • 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
    • USER EXPERIENCE Use Ajax/JavaScript to help the user Check for existing username before submitting Check for existing email and format
    • 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"); } });}
    • USER EXPERIENCE – VALIDATE USERNAME[HttpGet]public JsonResult IsExistingUser(string name){ return Json(_memberHelper.IsExistingUser (name), JsonRequestBehavior.AllowGet );}
    • 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