|
Using the jQuery library in ASP.Net
Application
Download the latest jQuery library from
jQuery.com and include the reference to the
jQuery library file in our ASPX page. The latest library is 1.3.2.
<script
src="_script/jquery-1[1].3.2.js"
type="text/javascript"></script>
<script
language="javascript">
$(document).ready(function()
{
alert('Welcome to jQuery
World!!');
});
</script>
Note
I have copied the jQuery library into a
folder called _script in the solution.
This ($(document).ready()) is the first
thing we will learn in jQuery. The code inside this event will load as soon as
the DOM is loaded and before the page contents are loaded. So, this is event
where we need to hook the events to the page control and other initializations.
Advantages of jQuery
1. It’s lightweight, easy and fast.
2. Write less but do more.
3. Cross Browser Compatibility.
4. Separate javascript code from HTML mark-up.
5. Easy and Light-weight Ajax Application.
6. Availability of various plug-in’s.
7. You can extend it.
8. We can use CDN (Content Distribution Network) for internet
site.
9. Microsoft and Intellisense support in Visual Studio 2008.
10. Easy Integration with ASP.Net Ajax projects.
Moving forward, we will look deeply
into the above advantages with examples.
1. It’s lightweight, easy and fast
jQuery library as such is not a bulky
library in terms of size(just 20KB in compressed form), execution time, etc.
Once you start using jQuery, you can understand its simplicity and it will take
very less development time when compared to classical javascript code. As I said
earlier, just including the jQuery library using <script> tag is all you
need to work on jQuery. It has no security risk associated with it. You can
include it in your project just like any other javascript file.
2. Write less but do more
The main advantage of jQuery library
is, we can do various complex client side operations with very less code. This
is because of various selector expressions support, chaining mechanism and other
similar features of jQuery which makes the complex DOM manipulation lot
easier.
To select a HTML element in
javascript,
document.getElementById('txtName');
The above equivalent in jQuery will
be,
$('#txtName');
To select all the rows in a table and
setting a background color,
<script
src="_scripts/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script
language="javascript">
$(document).ready(function()
{
$('#table1 > tbody >
tr').css("background-color", "Red");
});
</script>
Refer jQuery selector documentation to know more
on jQuery selectors.
Refer the below 2 articles which will
check the CheckBoxes in all the rows when we select the header CheckBox in a
GridView control to understand the above point. First uses javascript and former
uses jQuery library.
GridView
with CheckBox – Select All and Highlight Selected Row – JavaScript Version
and more code.
Check
All Checkboxes in GridView using jQuery – jQuery version and less
code.
The other advantage of jQuery is using
the chaining mechanism which will help us to reduce the code.
Refer the below code to understand
better,
<script
language="javascript">
$(document).ready(function()
{
$('#txtName').css("background-color", "Red").val("Test");
});
</script>
The above code selects a TextBox
control with ID txtName, then applies css style and then set its text as
“Test”.
3. Cross Browser Compatibility
The jQuery code we write is compatible
with all the browsers and hence it prevents the need to write separate client
side code for different browsers. Remember to set the css properties that are
cross-browser compatible when using jQuery for cross browser
compatibility.
|