1. Integrating jQuery into Your Custom ASP.NET Applications Knowledge Transfer Session Presented By Jared Jenkins
2. Agenda jQuery is a very powerful client-side JavaScript library for Web applications. It provides an lightweight, elegant way to quickly access and manipulate the HTML Document Object Model (DOM), to communicate with server-side web services, and to create animations in the browser without the need for heavier client side technologies. What are we talking about today: Overview of jQuery Its History and Features General tips, gotchas, and best practices for ASP.NET Applications How can you use jQuery? To provide better user experiences and to create custom controls To ultimately write LESS code Sample Controls and Demos Custom Navigation Control jQuery DataTables jQueryValidation Resources Questions
3.
4. Key Features of jQuery CCS3 Selectors Typically you will access elements based on a class or an id, but there are also other psuedo-selectors available (:visible, :first, :input). Find all of them here: http://api.jquery.com/category/selectors/ DOM Manipulation This is especially helpful if you need to hide and show elements or when you receive a response from an AJAX response payload. Animation Utilize a set of built-in jQuery animations or roll your own effects. AJAX Communication Simple HTTP communication interface with JSON and XML based web services. Plugins There are NUMEROUS open source plugins available for different needs. That being said, be careful what you use. Cross Browser Compatibility The jQuery codebase regardless of browser.
5. Prerequisites for jQuery Get to know CSS and HTML If you are trying to animate things or to create your own UI controls, you should understand how CSS and HTML work. The biggest things you can learn are how to work with position, margin, padding, float, and display properly in HTML. Learn to love Firebug for Mozilla Firefox It is one of the best web developer tools available you don’t have to pay for. Learn to think in Sets and Events A selector returns a set of element that your jQuery code will operate over Thiswill hide all of the H1 tags in your HTML page $(“h1”).css(“display”,”none”); Beware operating over LARGE sets, this can cause your browser to become unresponsive or you can even crash your browser. A elements of the DOM have events which you can subscribe to with event handlers $ (“a”).click(function(event){ alert (“You clicked a link!”); });
7. Managing State with AJAX Most tutorials and documentation will prescribe that you initialize all of your jQuery code in an event that handles to document. function initControls(){ //your init code here } $(document).ready(function(){ initControls(); }); However, this becomes a problem when you are using AJAX UpdatePanels, because the $(document).ready() will not fire after the call to the server has been completed. Any changes that the initControls() function made to the DOM within the UpdatePanel are erased. This includes any event handling you set up. So what is the solution to this problem?
8. Managing State with AJAX Sys.WebForms.PageRequestManager to the Rescue! This class manages partial-page rendering in ASP.NET pages. It comes with client-side events that you can subscribe to. varrequestManager = Sys.WebForms.PageRequestManager.getInstance(); function initControls(){ //your init code here } function endRequestHandler(sender, args){initControls(); } $(document).ready(function(){ requestManager.add_endRequest(endRequestHandler); //still need to do the initial init initControls(); }); Now we can deal with the UpdatePanel partial-page rendering and still have our jQuery.
9. Managing State with AJAX The full list of PageRequestManager events with descriptions:
10. Selectors for ASP.NET Controls If you need to grab an TextBox by its ID, you would undoubtedly think that this will work just fine: $(“#txtBox”) However, it might not always. The Problem: In ASP.NET, the INamingContainer appends identifiers to the controls so that it can uniquely reference a control. To get around this, you can use the following: $("*[id$=‘txtBox']") This will look for all elements (*) with txtBox at the end of it. John Sheehan also some other solutions here: http://john-sheehan.com/blog/custom-jquery-selector-for-aspnet-webforms/ Keep in mind, that this is not a good solution for controls in a Repeater, but you should be using a class to reference these controls anyways, since they are not unique.
11. Debugging Tips jQuery errors aren’t always the easiest to spot. When a call error occurs, any jQuery and JavaScript below it will not run so that might be your best indicator. To debug your code, use Mozilla Firefox in combination with Firebug. Check to make sure all of the files are getting loaded properly. Make sure that you’re not loading libraries twice and that all libraries are loaded in the proper dependency order. jQuery should be your first JavaScript file. Make sure all plugins are in-synch with your chosen jQuery library code. Step through your code in Firebug and use the watch variables. Don’t step into your jQuery code very deeply, because the problem is most likely in your own code. Sometimes, an alert statement is just what you need to glean a better understanding.
13. Resources This presentation was created with the help of some awesome people in the .NET and jQuery communities: Dave Ward: http://encosia.com http://visitmix.com/writings/javascript-libraries-and-asp-net-a-guide-to-jquery-ajax-and-microsoft http://visitmix.com/writings/what-asp-net-developers-should-know-about-jquery John Sheehan: http://john-sheehan.com JörnZaefferer: http://bassistance.de Allan Jardine http://www.sprymedia.co.uk Scott Guthrie Information on the jQuery Templating for ASP.NET 4: http://weblogs.asp.net/scottgu/archive/2010/05/07/jquery-templates-and-data-linking-and-microsoft-contributing-to-jquery.aspx
14. Summary jQuery is all about Writing Less to Do More. Its tools allow you to create a better separation of concerns between your user-interface and server-side code. Ultimately it allows you to provide a better user-experience for your clients with less code and configuration.
