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.
Overview of jQuery
- Its History and Features
- General tips, gotchas, and best practices for ASP.NET ApplicationsHow can you use jQuery?
- To provide better user experiences and to create custom controls
- To ultimately write LESS codeSample Controls and Demos
- Custom Navigation Control
- jQuery DataTables
- jQueryValidationJavaScript has not always been easy or very fun to work with.
- A large issue with that comes from the various DOM specifications that different browsers used for HTML, but not the JavaScript itself.For the most part, ASP.NET UI Controls help us to avoid working extensively with the DOM and JavaScript.
- Example: Server-side PostBack events raised from changes in the state of the page controls.jQueryWrite less. Do more.Quickly access, manipulate, and traverse HTML documents with a lot LESS effort.Microsoft is actively supporting it in MVC3 and the ASP.NET 4 jQuery Templating Engine.Key Features of jQueryCCS3 SelectorsTypically 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 ManipulationThis is especially helpful if you need to hide and show elements or when you receive a response from an AJAX response payload.AnimationUtilize a set of built-in jQuery animations or roll your own effects.AJAX CommunicationSimple HTTP communication interface with JSON and XML based web services.PluginsThere are NUMEROUS open source plugins available for different needs. That being said, be careful what you use.Cross Browser CompatibilityThe jQuery codebase regardless of browser.Prerequisites for jQueryGet to know CSS and HTMLIf 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 withposition, margin, padding, float, and display properly in HTML.Learn to love Firebug for Mozilla FirefoxIt is one of the best web developer tools available you don’t have to pay for.Learn to think in Sets and EventsA selector returns a set of element that your jQuery code will operate overThis will 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!”);});Best PracticesManaging State with AJAXSelectors for ASP.NET ControlsDebugging TipsManaging State with AJAXMost 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?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.var requestManager = 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 initinitControls();});Now we can deal with the UpdatePanel partial-page rendering and still have our jQuery.Managing State with AJAXThe full list of PageRequestManager events with descriptions:
PageRequestManager Event
|
Description
|
initializeRequest
|
Raised before processing of the asynchronous request
starts. You can use this event to cancel a postback.
|
beginRequest
|
Raised before processing of an asynchronous postback
starts and the postback is sent to the server. You can use this event to set
request headers or to begin an animation that indicates that the page is
processing.
|
pageLoading
|
Raised after the response from the server to an
asynchronous postback is received but before any content on the page is
updated. You can use this event to provide a custom transition effect for
updated content.
|
pageLoaded
|
Raised after all content on the page is refreshed, as a
result of either a synchronous or an asynchronous postback. You can use this
event to provide a custom transition effect for updated content.
|
endRequest
|
Raised after an asynchronous postback is finished and
control has been returned to the browser. You can use this event to provide a
notification to users or to log errors.
|
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.Debugging TipsjQuery 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.Custom Navigation ControljQuery DataTablesjQuery Validation