A Rich Web Experience with jQuery, Ajax and .NET
Download as PPTX, PDF•1 like•426 views
The document is a presentation about providing a rich web experience using jQuery, Ajax, and .NET. It discusses JavaScript and jQuery, including jQuery syntax, selectors, chaining, traversing, manipulation, events, effects, and Ajax functionality. It also covers jQuery UI widgets and themes. The last section discusses user experience considerations like validating user input with Ajax calls.
![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‟]”);](https://image.slidesharecdn.com/arichwebexperiencewithjqueryajaxand-net-120328134933-phpapp01/85/A-Rich-Web-Experience-with-jQuery-Ajax-and-NET-12-320.jpg)
![USER EXPERIENCE – VALIDATE
USERNAME
[HttpGet]
public JsonResult IsExistingUser(string name)
{
return Json(_memberHelper.IsExistingUser (name),
JsonRequestBehavior.AllowGet );
}](https://image.slidesharecdn.com/arichwebexperiencewithjqueryajaxand-net-120328134933-phpapp01/85/A-Rich-Web-Experience-with-jQuery-Ajax-and-NET-35-320.jpg)
A Rich Web Experience with jQuery, Ajax and .NET
- 1. A Rich Web Experience With jQuery, Ajax and .NET James Johnson Founder and President, Inland Empire .NET User’s Group San Francisco .NET Developers User Group March 28th, 2012
- 3. WHO I AM Founder and President, Inland Empire .NET User’s Group Three-time and current Microsoft MVP – CAD Software developer by day Serial netrepreneur by night
- 5. 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
- 6. 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”
- 7. 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
- 8. 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
- 9. 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
- 10. 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
- 11. 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
- 12. 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‟]”);
- 13. 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”);
- 14. 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()
- 15. 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
- 16. 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
- 17. 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
- 18. 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
- 19. 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
- 20. 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
- 21. JQUERY AJAX $.ajax({ url: “/UserGroup/GetGroups”, type: “GET”, dataType: “json”, success: function(data){ // do something with the result } });
- 22. DEMOS
- 23. 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
- 24. 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
- 25. JQUERY UI - WIDGETS Accordion Autocomplete Button Datepicker Dialog Progressbar Slider Tabs
- 26. 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
- 27. 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
- 28. 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
- 29. JQUERY UI - THEMES 24 pre-built themes Can create new, or edit existing
- 30. JQUERY UI - THEMES Modify CSS for new theme Download and give name
- 31. JQUERY UI - THEMES Add to project <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/themes/usergroups/jquery-ui- 1.8.17.custom.css")" />
- 32. 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
- 33. USER EXPERIENCE Use Ajax/JavaScript to help the user Check for existing username before submitting Check for existing email and format
- 34. USER EXPERIENCE – VALIDATE USERNAME 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"); } }); }
- 35. USER EXPERIENCE – VALIDATE USERNAME [HttpGet] public JsonResult IsExistingUser(string name) { return Json(_memberHelper.IsExistingUser (name), JsonRequestBehavior.AllowGet ); }
- 36. QUESTIONS? Slides are at http://slidesha.re/RichWeb
- 37. THANK YOU James Johnson [email protected] @latringo www.latringo.me Inland Empire .NET User’s Group www.iedotnetug.org 2 nd Tuesday of each month San Bernardino, CA