CODEDIGEST
Home Articles CodeDigest Tutorials FAQs
Skip Navigation LinksHome » Article » jQuery Article » Introduction to jQuery in ASP.Net and 10 Advantages to Choose jQuery   You are not logged in.
Search
 

Technologies
 

Sponsors
 

CodeDigest Navigation
 

Technology News
 

Community News
No News Feeds available at this time.
 
Introduction to jQuery in ASP.Net and 10 Advantages to Choose jQuery

By Satheesh Babu
Posted On Jul 23,2009
Article Rating: (Login)
Average Rating: 5
No of Ratings: 2
No of Comments: 12
Print this article.
Category: jQuery/ASP.Net

Subscribe to our feed!

Introduction to jQuery in ASP.Net and 10 Advantages to Choose jQuery

 

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 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.

 



ASP.Net Hosting

Recent Articles

4.    Separate javascript code from HTML mark-up

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 id="btnSubmit" onclick="javscript:Save()" type="button" value="button" />

 

The above code can written as,

    <script src="_scripts/jquery-1.3.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.3.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!');

    });

});

 

5.    Easy and Light-weight Ajax Application

One of biggest advantages of using jQuery library is developing light weight Ajax application in ASP.Net with JSON support. With jQuery library we can prevent the bulky ASP.Net AJAX’s UpdatePanel control for Ajax communications.

Refer my articles on codedigest.com to know more,

1.      Building Cascading DropDownList in ASP.Net Using jQuery and JSON

2.      Creating a Simple AJAX Master-Details View Using jQuery, JSON and jTemplates in ASP.Net

3.      Building Collapsible Panel Control using jQuery in ASP.Net Page

4.      Populating RadioButtonList Using jQuery, JSON in ASP.Net

5.      GridView Style Edit Update in Repeater Control Using jQuery and Ajax

6.      Using JQuery in ASP.Net AJAX Applications – Part 1

7.      Using JQuery in ASP.Net AJAX Applications–Part 2

 

6.    Availability of various plug-in’s

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.

 

7.    You can extend it

It is also possible to extend existing functionality provided by jQuery library.

Refer the below post which talks about jQuery Custom Selectors.

 

8.    We can use CDN (Content Distribution Network) for internet site

If our site is hosted on internet, then we can start using the jQuery library hosted by Google CDN, Content Distribution Network.

Google's Content Distribution Network (also, AJAX Libraries API) hosts most widely used open source JavaScript libraries which can be used globally across the websites. The main advantage of using google's CDN is they manage all the bug fixes, recent updates and provide a high speed access due to better caching, etc.

Read Using the JQuery Library hosted by Google CDN (Content Distribution Network) in ASP.Net Applications to know more.

 

9.    Microsoft and Intellisense support in Visual Studio 2008

Refer the below 2 FAQ’s to know more,

How to enable jQuery intellisense in Visual Studio 2008?

How to use jQuery intellisense in an external javascript file?

 

10.                       Easy Integration with ASP.Net Ajax projects

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" language="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

Thus, we have seen the advantages and usages of jQuery in these articles. The advantages of jQuery library does not stop with the above points, there are lot more which you can understand when you actually start using it. Using jQuery library never pose a security risk or other things. It’s just like another javascript library added to your solution.

Happy Coding!!

 

Similar Articles
  • You can contribute to CodeDigest.Com:
    Article Feedback
    Title  
    Submitted By  
    Comment  
    Enter the verification number
     
    Comments
    thank you
    This article is really very very good and useful than you so much for this kind of value able articles.. tnx
    Comment
    thanks for sharing this info..
    all links are very useful for newbies.

    www.gigasters.com
    Jquery
    very nice use of Jquery.
    by Bhupesh Kumar <a href="http://www.xpert-infotech.com">xpert infotech</a>
    Nice........
    Its very helpful and easy to understand.
    Software Architect
    Excellent article, simple and easy to follow, with pertinent information. Thank you.

    Many times, samples are good to understand a particular point. Do you know a complete sample web application with database access, tables and forms in GUI, that I can download and play around with jQuery?

    Again, thanks for the information.
    Good!!!!
    It is helpful....
    Very Nice!
    Nice one mate. I have also added the link to your post in my Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance. Have a check below:

    http://technosiastic.wordpress.com/2009/09/24/collection-of-top-jquery-tutorials-tips-tricks-techniques-to-improve-performance/
    RE:What about licenses?
    Hi Miklos,
    You are correct! i totally agree with you! To be cautious, it is required to check if the plugin itself is free before using it!
    Since jquery is free, most of the plugin's available are also free!
    Thanks for pointing out that!
    What about licenses?
    Thank you for a great article!

    You forgot to write about licenses. Even if most plugins are 'free' with various open licenses, you have to make sure not to infringe while using it for commercial purposes. I think it is the most important thing to consider before you start.

    What about licenses?
    Thank you for a great article!

    You forgot to write about licenses. Even if most plugins are 'free' with various open licenses, you have to make sure not to infringe while using it for commercial purposes. I think it is the most important thing to consider before you start.

    RE:Cdn Microsoft
    Yeah! you are correct Deef! The article is written before the release! Any how i will update the article..
    Thanks!
    Cdn Microsoft
    You should note that Microsoft had also launched a CDN just à few weeks back. Check www.asp.net