jQuery is the fantastic opensource and free javascript library you can easily integrate in your asp.net and sharepoint applications. Personally I would like to use this light weight library because it helps to accomplish the more complex DOM operation do simpler. In this article you could get more information on jquery and asp.net integration and how effectively you can use jquery in asp.net application.
What is jQuery?
jQuery is a light weight javascript library which provides fast and easy way of HTML DOM traversing and manipulation, event handling, client side animations, etc. One of the greatest features of jQuery is, it supports an efficient way to implement AJAX applications because of its light weight nature. According to the jQuery official site, “jQuery is designed to change the way that you write JavaScript.”
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 which I have used is 1.4.2.
<script src="_script/jquery-1.4.2.js" type="text/javascript"></script>
<script>
$(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
- It’s lightweight, easy and fast.
- Write less but do more.
- Cross Browser Compatibility.
- Separate javascript code from HTML mark-up.
- Availability of various plug-in’s.
- Easy Integration with ASP.Net Ajax projects.
Moving forward, we will look deeply into the above advantages with examples.
- It’s lightweight, easy and fast
- Write less but do more.
- Cross Browser Compatibility.
- Separate javascript code from HTML mark-up.
- Availability of various plug-in’s.
- Easy Integration with ASP.Net Ajax projects.
jQuery library as such is not a bulky library in terms of size(just 24KB 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. You should use the compressed version of jQuery for your production server use and use
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.4.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.
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.
jQuery library enables us to separate the client side scripts from the HTML mark-ups. This is possible because of $(document).ready() function of jQuery.
For example,
<input onclick="javscript:Save()" value="button" />
The above code can written as,
<script src="_scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function() {
$('#btnSubmit').click(function() {
alert('Submit Clicked!');
});
});
</script>
Thus, when we use jQuery library we can make our HTML code neat without any javascript code combined with it.
It is also possible to separate jQuery code into a separate javascript file and link to the aspx page. For example, the above code can be separated in a separate javascript file and it can be linked to the aspx page. Refer the below code,
ASPX
<head runat="server"> <title></title> <script src="_scripts/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="_scripts/Default.js" type="text/javascript"></script> </script> </head>
Default.js
$(document).ready(function() {
$('#btnSubmit').click(function() {
alert('Submit Clicked!');
});
});
There are various free plug-in’s available on the internet which we can use in our projects. For example, jQuery tabs, jTemplate, etc.
Refer the plug-in’s directory here. Since, the jQuery usage is becoming high day by day there are already lots of plug-in’s available online which we can re-use.
jQuery library can be easily integrated with ASP.Net Ajax applications. Remember the ready event will not fire for an asynchronous postback caused from UpdatePanel control. The ASP.Net AJAX equivalent of ready() function is endRequest event.
<script type="text/JavaScript">
function pageLoad()
{
var manager = Sys.WebForms.PageRequestManager.getInstance();
manager.add_endRequest(endRequest);
}
function endRequest(sender, args)
{
//Do all what you want to do in jQuery ready function
}
</script>
Conclusion
We have seen the advantages and usages of jQuery in these articles. The advantages of jQuery library does not stop with the above points, Using jQuery library never pose a security risk or other things. It’s just like another javascript library added to your solution. More over you can find the many free jquery plugin to use in your commercial applications.
Happy Coding!!
Similar Topics:
- Javascript trim
- Server time in client javascript code
- Javascript Treeview Checkbox Check All function
