A Rich Web experience with jQuery, Ajax and .NET

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 }});

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 );}

QUESTIONS?

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

http://www.latringo.me	506
http://latringo.me	123
http://us-w1.rockmelt.com	5
http://home.himolde.no	2
http://www.udemy.com	1
http://www.onlydoo.com	1

A Rich Web experience with jQuery, Ajax and .NET

by James Johnson

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 638

Statistics

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