Sunday 6 October 2013

Beginner’s introduction on how to use jQuery with ASP.NET applications

Leave a Comment
jQuery is a client side open source javascript library which is best to do DOM manipulation, performing AJAX requests, creating various effects or animation and so forth. In this article, I am going to explain how to integrate jQuery with ASP.NET application. I’ll explain how to use jQuery with ASP.NET applications and common tasks which can be accomplished using jQuery library in my upcoming articles. You can also see list of ASP.NET+jQuery tutorials.

Create a new website in visual studio and add a new web form Example1.aspx. Include jQuery source file in web form. You can download latest jQuery from jQuery official website.
<script src="js/jquery-1.8.js"></script>

Executing jQuery code when the DOM is ready

The web form is now ready to use jQuery. We will now embed jQuery code or markup in the following script block:
<script type="text/javascript">
$(document).ready(function () {
            alert(' Alert 2 : DOM is ready to manipulate!');
        });    
</script>
jQuery executes an event named ready() when the DOM is loaded and accessible for manipulation. All the jQuery code which manipulates DOM should be included in the $(document).ready() function. This function gets fired before the page contents and elements are rendered.

Different ways of attaching ready() event :
  1. $(document).ready(function () {
                alert(' Alert 2 : DOM is ready to manipulate!');
            });
    
  2. $(function () {
                alert(' Alert 3 : DOM is ready to manipulate!');
            });
    
  3. $(function ($) {
                alert(' Alert 4 : DOM is ready to manipulate!');
            });
    
Please note that we can attach more than one ready() events to the document. These events are executed in the order they were added into code.

Executing jQuery code when the browser window is completely loaded

As stated earlier, ready() event  will execute code before the browser window loads, but after the DOM is loaded and accessible for manipulation. But, sometimes we can use jQuery to execute code once the entire web page document (including all assets like CSS) is completely loaded.
This functionality can be achieved by attaching a load() event handler to the window object. jQuery provides load() event which invokes a function once the browser window is completely loaded.
$(window).load(function () {
            alert(' Alert 1 : Browser Window and all assets are loaded!');
        });

Executing jQuery code when DOM is parsed without using ready()

  • The ready()  event is not always needed. If jQuery code is not manipulating DOM then you can include it anywhere in the document. This means we can avoid usage of ready() event.
  • We can avoid usage of ready() event even if jQuery code is manipulating DOM.  Simply write your jQuery code in HTML document before the closing </body> element. Since the browser will parse the document from top to bottom, your jQuery code will execute successfully if you have included jQuery code before the closing </body> element. Thus there is no need to use the ready() event.
<script type="text/javascript">
        alert(' Alert 5 : ' + $('p').text());
</script>
Example 1:  Copy and paste below cone in Example1.aspx file.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script src="js/jquery-1.8.js"></script>
    <script type="text/javascript">

        $(window).load(function () {
            alert(' Alert 1 : Browser Window and all assets are loaded!');
        });

        $(document).ready(function () {
            alert(' Alert 2 : DOM is ready to manipulate!');
        });

        $(function () {
            alert(' Alert 3 : DOM is ready to manipulate!');
        });
        $(function ($) {
            alert(' Alert 4 : DOM is ready to manipulate!');
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <p>This is sample paragraph text. </p>
        </div>
    </form>
    <script type="text/javascript">
        alert(' Alert 5 : ' + $('p').text());
    </script>
</body>
</html>
Please notice the order in which alert() function is getting executed in above code. Source code can be downloaded from GitHub.


It is recommended to include all CSS files before including jQuery in web page.
Comments and suggestions are most welcome. Happy coding!

0 comments :

Post a Comment