Integrating jQuery into ASP.NET Applications

7,714 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,714
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
69
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Integrating jQuery into ASP.NET Applications

  1. 1. Integrating jQuery into Your Custom ASP.NET Applications<br />Knowledge Transfer Session<br />Presented By Jared Jenkins<br />
  2. 2. Agenda<br />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. <br />What are we talking about today:<br />Overview of jQuery<br />Its History and Features<br />General tips, gotchas, and best practices for ASP.NET Applications<br />How can you use jQuery?<br />To provide better user experiences and to create custom controls<br />To ultimately write LESS code <br />Sample Controls and Demos<br />Custom Navigation Control<br />jQuery DataTables<br />jQueryValidation<br />Resources <br />Questions<br />
  3. 3. From JavaScript to jQuery<br />JavaScript has not always been easy or very fun to work with.<br /><ul><li>A large issue with that comes from the various DOM specifications that different browsers used for HTML, but not the JavaScript itself.</li></ul>For the most part, ASP.NET UI Controls help us to avoid working extensively with the DOM and JavaScript.<br /><ul><li>Example: Server-side PostBackevents raised from changes in the state of the page controls.</li></ul>jQuery <br />Write less. Do more.<br />Quickly access, manipulate, and traverse HTML documents with a lot LESS effort.<br />Microsoft is actively supporting it in MVC3 and the ASP.NET 4 jQuery Templating Engine.<br />
  4. 4. Key Features of jQuery<br />CCS3 Selectors<br />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/<br />DOM Manipulation<br />This is especially helpful if you need to hide and show elements or when you receive a response from an AJAX response payload.<br />Animation<br />Utilize a set of built-in jQuery animations or roll your own effects.<br />AJAX Communication<br />Simple HTTP communication interface with JSON and XML based web services. <br />Plugins<br />There are NUMEROUS open source plugins available for different needs. That being said, be careful what you use.<br />Cross Browser Compatibility<br />The jQuery codebase regardless of browser.<br />
  5. 5. Prerequisites for jQuery<br />Get to know CSS and HTML<br />If you are trying to animate things or to create your own UI controls, you should understand how CSS and HTML work.<br />The biggest things you can learn are how to work with position, margin, padding, float, and display properly in HTML.<br />Learn to love Firebug for Mozilla Firefox<br />It is one of the best web developer tools available you don’t have to pay for.<br />Learn to think in Sets and Events<br />A selector returns a set of element that your jQuery code will operate over<br />Thiswill hide all of the H1 tags in your HTML page<br />$(“h1”).css(“display”,”none”);<br />Beware operating over LARGE sets, this can cause your browser to become unresponsive or you can even crash your browser.<br />A elements of the DOM have events which you can subscribe to with event handlers<br />$ (“a”).click(function(event){ <br />alert (“You clicked a link!”); <br />});<br />
  6. 6. Best Practices<br />Managing State with AJAX<br />Selectors for ASP.NET Controls<br />Debugging Tips<br />
  7. 7. Managing State with AJAX<br />Most tutorials and documentation will prescribe that you initialize all of your jQuery code in an event that handles to document.<br />function initControls(){<br /> //your init code here<br />}<br />$(document).ready(function(){<br />initControls();<br />});<br />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. <br />Any changes that the initControls() function made to the DOM within the UpdatePanel are erased. This includes any event handling you set up.<br />So what is the solution to this problem?<br />
  8. 8. Managing State with AJAX<br />Sys.WebForms.PageRequestManager to the Rescue!<br />This class manages partial-page rendering in ASP.NET pages. It comes with client-side events that you can subscribe to.<br />varrequestManager = Sys.WebForms.PageRequestManager.getInstance();<br />function initControls(){<br /> //your init code here<br />}<br />function endRequestHandler(sender, args){initControls();<br />}<br />$(document).ready(function(){<br />requestManager.add_endRequest(endRequestHandler);<br /> //still need to do the initial init<br />initControls();<br />});<br />Now we can deal with the UpdatePanel partial-page rendering and still have our jQuery.<br />
  9. 9. Managing State with AJAX<br />The full list of PageRequestManager events with descriptions:<br />
  10. 10. Selectors for ASP.NET Controls<br />If you need to grab an TextBox by its ID, you would undoubtedly think that this will work just fine: <br />$(“#txtBox”)<br />However, it might not always. <br />The Problem: In ASP.NET, the INamingContainer appends identifiers to the controls so that it can uniquely reference a control.<br />To get around this, you can use the following:<br /> $("*[id$=‘txtBox']") <br />This will look for all elements (*) with txtBox at the end of it. <br />John Sheehan also some other solutions here: http://john-sheehan.com/blog/custom-jquery-selector-for-aspnet-webforms/<br />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.<br />
  11. 11. Debugging Tips<br />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.<br />To debug your code, use Mozilla Firefox in combination with Firebug.<br />Check to make sure all of the files are getting loaded properly.<br />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.<br />Make sure all plugins are in-synch with your chosen jQuery library code.<br />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.<br />Sometimes, an alert statement is just what you need to glean a better understanding.<br />
  12. 12. Demos<br />Custom Navigation Control<br />jQueryDataTables<br />jQuery Validation<br />
  13. 13. Resources<br />This presentation was created with the help of some awesome people in the .NET and jQuery communities: <br />Dave Ward: <br />http://encosia.com<br />http://visitmix.com/writings/javascript-libraries-and-asp-net-a-guide-to-jquery-ajax-and-microsoft<br />http://visitmix.com/writings/what-asp-net-developers-should-know-about-jquery<br />John Sheehan: <br />http://john-sheehan.com<br />JörnZaefferer:<br />http://bassistance.de<br />Allan Jardine<br />http://www.sprymedia.co.uk<br />Scott Guthrie<br />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<br />
  14. 14. Summary<br />jQuery is all about Writing Less to Do More. <br />Its tools allow you to create a better separation of concerns between your user-interface and server-side code.<br />Ultimately it allows you to provide a better user-experience for your clients with less code and configuration.<br />
  15. 15. Thanks. Happy Coding.<br />

×