logging in or signing up JQuery prashantvictory Download Post to : URL : Related Presentations : Share Add to Flag Embed Email Send to Blogs and Networks Add to Channel Uploaded from authorPOINT lite Insert YouTube videos in PowerPont slides with aS Desktop Copy embed code: (To copy code, click on the text box) Embed: URL: Thumbnail: WordPress Embed Customize Embed The presentation is successfully added In Your Favorites. Views: 4780 Category: Education License: All Rights Reserved Like it (4) Dislike it (1) Added: June 23, 2008 This Presentation is Public Favorites: 2 Presentation Description No description available. Comments Posting comment... By: hindustani7 (10 month(s) ago) i want to download it Saving..... Post Reply Close Saving..... Edit Comment Close By: ahmadbadpey (10 month(s) ago) Please send it for me Saving..... Post Reply Close Saving..... Edit Comment Close By: smasher007 (11 month(s) ago) Please send me this ppt..... Its very urgent Saving..... Post Reply Close Saving..... Edit Comment Close By: sid_rule (11 month(s) ago) please send me this ppt ..i really need this one.thanks Saving..... Post Reply Close Saving..... Edit Comment Close By: bala_winwin (15 month(s) ago) Can i download this ppt? Or pls send me to mbalaji.1984@gmail.com Saving..... Post Reply Close Saving..... Edit Comment Close loading.... See all Premium member Presentation Transcript ACS214:Ajax Alternatives: Using jQuery with ASP.NET : ACS214:Ajax Alternatives: Using jQuery with ASP.NET Rick Strahl West Wind Technologies www.west-wind.com/weblog Rick Strahl – Who am I? : Rick Strahl – Who am I? President West Wind Technologies (Maui, Hawaii) Developer Tools Vendor Developer Training and Mentoring Web and Enterprise Development Products West Wind HTML Builder (Documentation System) West Wind Web Store (e-Commerce) Microsoft MVP C# Working with Microsoft tech for 15+ years Co-Publisher of CoDe Magazine Author Over 100+ magazine articles Large .NET article white paper archive atwww.west-wind.com/articles.asp Nobody likes to script Browserswith Raw JavaScript : Nobody likes to script Browserswith Raw JavaScript Right? JavaScript – the ugly Stepchild : JavaScript – the ugly Stepchild JavaScript's been around forever but… It was minimally used for its first 10 years Few people were really proficient with JavaScript Browser incompatibilities Varying Dom implementation Varying CSS implementations Varying event management interfaces JavaScript -> OOP mismatch Dynamic (js) vs. Static (C#,VB.NET) language 'Different' OOP implementation jQuery : jQuery Making JavaScript a better place to live What's jQuery? : What's jQuery? JavaScript library Light weight (19k compressed base lib) Powerful, yet easy to learn and use Tons of useful functionality Easy to extend Hundreds of useful plug-ins jQuery UI Library and jQuery Enchant Popular and getting more popular all the time Why should you consider jQuery? : Why should you consider jQuery? Using jQuery can: Produce more robust JavaScript Code Produce more readable JavaScript Code Provide browser compatible behavior Reduce JavaScript Code drastically It puts the Fun back into Client Scripting! Some basic jQuery Examples : Some basic jQuery Examples $("#myID").css("color","steelblue"); $(".myClass1 .myclass2").hide(); $("#tblList tr td:nth-child(2)").addClass("colHighlight").css( {font-weight:"bold",padding:"3px"} ); $("#divItems a").click( function(event){ alert( event.target);}); What makes jQuery tick? : What makes jQuery tick? Selectors Select DOM elements in a variety of ways CSS like selection syntax jQuery 'Wrapped Set' Result of Selector operations Array like structure that contains DOM nodes jQuery Operator Methods Instance methods operate on jQuery matches Most methods are chainable Static methods provide utility functionality jQuery Selectors – jQuery's Magic : jQuery Selectors – jQuery's Magic jQuery(selector) or $(selector) Selects DOM elements Create 'wrapped set' containing array of DOM nodes Contains methods to apply against each match Selection of elements: It's all about CSS Using 'extended' CSS syntax Id ("#id"), Class (".class"), Element ("div") DOM Instance (ctl), jQuery Instance (jCtl) [attribute],>child, descendent,+next,~siblings :first,:last,:not,:even,:odd,:contains,:parent,:empty,:hidden,:visible http://docs.jquery.com/Selectors The jQuery Wrapped Set : The jQuery Wrapped Set Contains an Array of Dom Nodes $("input")[0] = first matched DOM node Check length property for matches Scoped – this points at this jQuery instance Use .each() to iterate over nodes Utility functions that operate on Array DOM: .attr,.css,.addClass,.hide,.show etc. Events: .click,keypress,.blur,.focus,.change Iteration: .each, Content: .text,.html,.val Effects: .fadeIn, .fadeOut, .slideUp,slideDown, animate jQuery Utilities : jQuery Utilities 'Static' methods of jQuery object Provide generic functionality Highly useful operations Defined directly off of the static jQuery object Highlights $.ready: Reliable load completionused extensively for page setup code $.extend: Extend one object with anotherused extensively for parsing parameter maps! $.merge: Extend an array with another $.grep: Filter arrays with function delegates jQuery Ajax Functionality : jQuery Ajax Functionality Easy Server Callbacks $.ajax() is the core function with lots of options $.get(),$.post(): Get raw data $.load(): Load Html from server into DOM element $.getJSON(): Load and Eval JSON Options Send form data Send an object's data as querystring data Determine how data is parsed on result jQuery and Ajax (cont.) : jQuery and Ajax (cont.) Sending Data to the Server jQuery natively prefers query/post data $.serialize() can easily serialize form vars Optional objects can be serialized too No JSON Encoder in jQuery jQuery can return and parse JSON But there's no JSON Encoder Use JSON2.js from Douglas Crockford http://www.json.org/json2.js Note: Date Support issues jQuery Ajax – The Server Side : jQuery Ajax – The Server Side You're on your own – but it's pretty easy! Send JSON from client to server and back Handle JSON conversion and message routing JavaScript Serializer (System.Web.Extensions) DataContractJsonSerializer (3.5) Using an ASP.NET Ajax Framework WCF 3.5 REST Services JayRock http://jayrock.berlios.de/ West Wind Ajax Toolkit www.west-wind.com/tools/wwHoverPanel/ Note: ASMX services are a bad fit for jQuery due to MS JSON formatting (nested objs and type infor) Using jQuery with ASP.NET : Using jQuery with ASP.NET It's plain JavaScript so "it just works" No special requirements Use as plain script include <script src="jquery.js"></script> Optionally load with ScriptManager (Ms Ajax) Where to include jQuery Page Master Page Load using Resources Depends on usage scenario jQuery and Visual Studio : jQuery and Visual Studio Limited support for jQuery in Visual Studio By default: No Intellisense for jQuery functions Requires manual markup to make Intellisense aware Visual Studio 2008 HotFix (KB946581) or SP1 Improve Intellisense Support: Markup jQuery.js with minor adjustments /// <reference type="jQuery" /> Add to jQuery function Add to any methods that return jQuery for chaining Extensibility of jQuery : Extensibility of jQuery Plug-ins and Building ASP.NET controls that use and interact jQuery jQuery Plug-in Model : jQuery Plug-in Model Easy Extensibility Model Simple model based on function extension Extend jQuery result object or static instance Extend jQuery Wrapped Set with jQuery.fn.yourMethod Methods that apply against jQuery Results Methods are called in context of DOM node Methods should return jQuery object for chaining Extend static jQuery with jQuery.yourMethod Static methods, always available on jQuery instance Meant for generic behavior – ie. all inputs are passed Plug-In Model (cont.) : Plug-In Model (cont.) Keep it simple! Don't pollute jQuery instance Create overloaded methods Hang any instances/object of your main object Keep it consistent Examine existing Plug-ins Try it! – it's an easy yet powerful model jQuery.ui and jQuery Enchant : jQuery.ui and jQuery Enchant jQuery.ui Common API for a set of common UI operations Dimensions: Reliable element position and sizing Extenders: draggable, droppable, resizable, selectable Controls: Tabs, Accordion, DatePicker, Slider Skip Version 1.0 – wait for 1.5 (still in beta) jQuery Enchant Effects Library Slide effects, ease in/out behaviors jQuery and ASP.NET Controls? : jQuery and ASP.NET Controls? jQuery is pure Client Technology JavaScript library Plug-in model is JavaScript based Clean: Works with pure HTML – no dependencies Advantage of ASP.NET Controls Fits ASP.NET workflow (D&D editing, Property Sheet etc.) Provides encapsulation of resources Disadvantage of ASP.NET Controls Creating JavaScript enabled controls can be messy Creates potential dependencies on related resources Ideally focus on client functionality and hook that from control Creating jQuery ASP.NET Controls : Creating jQuery ASP.NET Controls Client Functionality comes first! Focus on client functionality first and foremost Decide whether you even need a server control! Build the server control last Build JavaScript component first and makesure it works properly on its own – independently! Then create the server control to initialize client control as needed injecting script code Manual process – no control model Keep it simple by clearly defining client behavior jQuery and WebResources : jQuery and WebResources To wrap or not to wrap Resource wrapping: Great ASP.NET Control feature Provides fully self-contained code Decide whether script embedding makes sense Or whether external scripts work better Wrapping jQuery Package jQuery as a WebResource (optional) Wrapping up support Resources Make sure that jQuery gets loaded exactly once! Summary : Summary jQuery is a powerful client library Easy to get started with Highly productive via Selectors and Actions Compact – just the basics Plugins for everything else Easily extensible even for 'app developers' It's possible to wrap jQuery Controls into ASP.NET controls, where it makes sense Put the fun back into writing client code!!! Resources : Resources Download Updated Slides/Code:www.west-wind.com/files/conferences/jquery.zip jQuery Cheat Sheethttp://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/ JSON Viewer Visualizer/Fiddler Pluginhttp://www.codeplex.com/JsonViewer Books: jQuery in Action - http://tinyurl.com/2luw4e jQuery Reference Guide - http://tinyurl.com/2vhcbu Learning jQuery - http://tinyurl.com/2mzv6o You do not have the permission to view this presentation. In order to view it, please contact the author of the presentation.
JQuery prashantvictory Download Post to : URL : Related Presentations : Share Add to Flag Embed Email Send to Blogs and Networks Add to Channel Uploaded from authorPOINT lite Insert YouTube videos in PowerPont slides with aS Desktop Copy embed code: (To copy code, click on the text box) Embed: URL: Thumbnail: WordPress Embed Customize Embed The presentation is successfully added In Your Favorites. Views: 4780 Category: Education License: All Rights Reserved Like it (4) Dislike it (1) Added: June 23, 2008 This Presentation is Public Favorites: 2 Presentation Description No description available. Comments Posting comment... By: hindustani7 (10 month(s) ago) i want to download it Saving..... Post Reply Close Saving..... Edit Comment Close By: ahmadbadpey (10 month(s) ago) Please send it for me Saving..... Post Reply Close Saving..... Edit Comment Close By: smasher007 (11 month(s) ago) Please send me this ppt..... Its very urgent Saving..... Post Reply Close Saving..... Edit Comment Close By: sid_rule (11 month(s) ago) please send me this ppt ..i really need this one.thanks Saving..... Post Reply Close Saving..... Edit Comment Close By: bala_winwin (15 month(s) ago) Can i download this ppt? Or pls send me to mbalaji.1984@gmail.com Saving..... Post Reply Close Saving..... Edit Comment Close loading.... See all Premium member Presentation Transcript ACS214:Ajax Alternatives: Using jQuery with ASP.NET : ACS214:Ajax Alternatives: Using jQuery with ASP.NET Rick Strahl West Wind Technologies www.west-wind.com/weblog Rick Strahl – Who am I? : Rick Strahl – Who am I? President West Wind Technologies (Maui, Hawaii) Developer Tools Vendor Developer Training and Mentoring Web and Enterprise Development Products West Wind HTML Builder (Documentation System) West Wind Web Store (e-Commerce) Microsoft MVP C# Working with Microsoft tech for 15+ years Co-Publisher of CoDe Magazine Author Over 100+ magazine articles Large .NET article white paper archive atwww.west-wind.com/articles.asp Nobody likes to script Browserswith Raw JavaScript : Nobody likes to script Browserswith Raw JavaScript Right? JavaScript – the ugly Stepchild : JavaScript – the ugly Stepchild JavaScript's been around forever but… It was minimally used for its first 10 years Few people were really proficient with JavaScript Browser incompatibilities Varying Dom implementation Varying CSS implementations Varying event management interfaces JavaScript -> OOP mismatch Dynamic (js) vs. Static (C#,VB.NET) language 'Different' OOP implementation jQuery : jQuery Making JavaScript a better place to live What's jQuery? : What's jQuery? JavaScript library Light weight (19k compressed base lib) Powerful, yet easy to learn and use Tons of useful functionality Easy to extend Hundreds of useful plug-ins jQuery UI Library and jQuery Enchant Popular and getting more popular all the time Why should you consider jQuery? : Why should you consider jQuery? Using jQuery can: Produce more robust JavaScript Code Produce more readable JavaScript Code Provide browser compatible behavior Reduce JavaScript Code drastically It puts the Fun back into Client Scripting! Some basic jQuery Examples : Some basic jQuery Examples $("#myID").css("color","steelblue"); $(".myClass1 .myclass2").hide(); $("#tblList tr td:nth-child(2)").addClass("colHighlight").css( {font-weight:"bold",padding:"3px"} ); $("#divItems a").click( function(event){ alert( event.target);}); What makes jQuery tick? : What makes jQuery tick? Selectors Select DOM elements in a variety of ways CSS like selection syntax jQuery 'Wrapped Set' Result of Selector operations Array like structure that contains DOM nodes jQuery Operator Methods Instance methods operate on jQuery matches Most methods are chainable Static methods provide utility functionality jQuery Selectors – jQuery's Magic : jQuery Selectors – jQuery's Magic jQuery(selector) or $(selector) Selects DOM elements Create 'wrapped set' containing array of DOM nodes Contains methods to apply against each match Selection of elements: It's all about CSS Using 'extended' CSS syntax Id ("#id"), Class (".class"), Element ("div") DOM Instance (ctl), jQuery Instance (jCtl) [attribute],>child, descendent,+next,~siblings :first,:last,:not,:even,:odd,:contains,:parent,:empty,:hidden,:visible http://docs.jquery.com/Selectors The jQuery Wrapped Set : The jQuery Wrapped Set Contains an Array of Dom Nodes $("input")[0] = first matched DOM node Check length property for matches Scoped – this points at this jQuery instance Use .each() to iterate over nodes Utility functions that operate on Array DOM: .attr,.css,.addClass,.hide,.show etc. Events: .click,keypress,.blur,.focus,.change Iteration: .each, Content: .text,.html,.val Effects: .fadeIn, .fadeOut, .slideUp,slideDown, animate jQuery Utilities : jQuery Utilities 'Static' methods of jQuery object Provide generic functionality Highly useful operations Defined directly off of the static jQuery object Highlights $.ready: Reliable load completionused extensively for page setup code $.extend: Extend one object with anotherused extensively for parsing parameter maps! $.merge: Extend an array with another $.grep: Filter arrays with function delegates jQuery Ajax Functionality : jQuery Ajax Functionality Easy Server Callbacks $.ajax() is the core function with lots of options $.get(),$.post(): Get raw data $.load(): Load Html from server into DOM element $.getJSON(): Load and Eval JSON Options Send form data Send an object's data as querystring data Determine how data is parsed on result jQuery and Ajax (cont.) : jQuery and Ajax (cont.) Sending Data to the Server jQuery natively prefers query/post data $.serialize() can easily serialize form vars Optional objects can be serialized too No JSON Encoder in jQuery jQuery can return and parse JSON But there's no JSON Encoder Use JSON2.js from Douglas Crockford http://www.json.org/json2.js Note: Date Support issues jQuery Ajax – The Server Side : jQuery Ajax – The Server Side You're on your own – but it's pretty easy! Send JSON from client to server and back Handle JSON conversion and message routing JavaScript Serializer (System.Web.Extensions) DataContractJsonSerializer (3.5) Using an ASP.NET Ajax Framework WCF 3.5 REST Services JayRock http://jayrock.berlios.de/ West Wind Ajax Toolkit www.west-wind.com/tools/wwHoverPanel/ Note: ASMX services are a bad fit for jQuery due to MS JSON formatting (nested objs and type infor) Using jQuery with ASP.NET : Using jQuery with ASP.NET It's plain JavaScript so "it just works" No special requirements Use as plain script include <script src="jquery.js"></script> Optionally load with ScriptManager (Ms Ajax) Where to include jQuery Page Master Page Load using Resources Depends on usage scenario jQuery and Visual Studio : jQuery and Visual Studio Limited support for jQuery in Visual Studio By default: No Intellisense for jQuery functions Requires manual markup to make Intellisense aware Visual Studio 2008 HotFix (KB946581) or SP1 Improve Intellisense Support: Markup jQuery.js with minor adjustments /// <reference type="jQuery" /> Add to jQuery function Add to any methods that return jQuery for chaining Extensibility of jQuery : Extensibility of jQuery Plug-ins and Building ASP.NET controls that use and interact jQuery jQuery Plug-in Model : jQuery Plug-in Model Easy Extensibility Model Simple model based on function extension Extend jQuery result object or static instance Extend jQuery Wrapped Set with jQuery.fn.yourMethod Methods that apply against jQuery Results Methods are called in context of DOM node Methods should return jQuery object for chaining Extend static jQuery with jQuery.yourMethod Static methods, always available on jQuery instance Meant for generic behavior – ie. all inputs are passed Plug-In Model (cont.) : Plug-In Model (cont.) Keep it simple! Don't pollute jQuery instance Create overloaded methods Hang any instances/object of your main object Keep it consistent Examine existing Plug-ins Try it! – it's an easy yet powerful model jQuery.ui and jQuery Enchant : jQuery.ui and jQuery Enchant jQuery.ui Common API for a set of common UI operations Dimensions: Reliable element position and sizing Extenders: draggable, droppable, resizable, selectable Controls: Tabs, Accordion, DatePicker, Slider Skip Version 1.0 – wait for 1.5 (still in beta) jQuery Enchant Effects Library Slide effects, ease in/out behaviors jQuery and ASP.NET Controls? : jQuery and ASP.NET Controls? jQuery is pure Client Technology JavaScript library Plug-in model is JavaScript based Clean: Works with pure HTML – no dependencies Advantage of ASP.NET Controls Fits ASP.NET workflow (D&D editing, Property Sheet etc.) Provides encapsulation of resources Disadvantage of ASP.NET Controls Creating JavaScript enabled controls can be messy Creates potential dependencies on related resources Ideally focus on client functionality and hook that from control Creating jQuery ASP.NET Controls : Creating jQuery ASP.NET Controls Client Functionality comes first! Focus on client functionality first and foremost Decide whether you even need a server control! Build the server control last Build JavaScript component first and makesure it works properly on its own – independently! Then create the server control to initialize client control as needed injecting script code Manual process – no control model Keep it simple by clearly defining client behavior jQuery and WebResources : jQuery and WebResources To wrap or not to wrap Resource wrapping: Great ASP.NET Control feature Provides fully self-contained code Decide whether script embedding makes sense Or whether external scripts work better Wrapping jQuery Package jQuery as a WebResource (optional) Wrapping up support Resources Make sure that jQuery gets loaded exactly once! Summary : Summary jQuery is a powerful client library Easy to get started with Highly productive via Selectors and Actions Compact – just the basics Plugins for everything else Easily extensible even for 'app developers' It's possible to wrap jQuery Controls into ASP.NET controls, where it makes sense Put the fun back into writing client code!!! Resources : Resources Download Updated Slides/Code:www.west-wind.com/files/conferences/jquery.zip jQuery Cheat Sheethttp://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/ JSON Viewer Visualizer/Fiddler Pluginhttp://www.codeplex.com/JsonViewer Books: jQuery in Action - http://tinyurl.com/2luw4e jQuery Reference Guide - http://tinyurl.com/2vhcbu Learning jQuery - http://tinyurl.com/2mzv6o