Introduction to jQuery in ASP.NET Applications

jQuery is a matured open source library that makes life easy when doing some client side programming or scripting. It simplifies the way JavaScript is written. It is light weight, fast and works on modern browsers, thus it's widely accepted among the web developers and even Visual Studio 2010 and ASP.NET 4.0 now comes with it.

Its power lies in selecting, transversing and manipulating DOM, animating and adding effects to elements in a page, handle control events, as well as implementing AJAX behaviour.

jQuery is a file of JavaScript code, that can be added to a page thus making it possible to use the set of features in the library. The library and its minified version can be downloaded from jquery.com.

With Visual Studio 2010, if you create a new ASP.NET website, by default, the Scripts folder is added to the website which contains the following files:

• jquery-1.4.1-vsdoc.js - used by Visual Studio Intellisense
• jquery-1.4.1.js - this is used during development
• jquery-1.4.1.min.js - this is the minified version suitable for production environment

To harness the power of jQuery on a page, the first thing to do is to add the script attribute to the page.

<asp:Literal ID="Literal5" runat="server" 
Mode="Encode" Text="<script src="Scripts/jquery-1.4.1.js" 
type="text/javascript"></script>">

Now, ensure that the entire document has been loaded by the browser before executing any code, thus this can be achieved by adding the following inside the body tag in the page.

<script type="text/javascript"> 
$(document).ready(function () { 
//your jquery codes appear here
 }); 
</script>

Before we dive into writing codes, there are some things that need to be known, jQuery is much about finding an item in the DOM and then manipulating it. The base selector function in jQuery is jQuery() or $() used for locating or selecting elements in the page.

Elements in a page can be selected in three ways:

1. Selecting elements by Id for example $("#button1") will return a reference to button1 in the page.
2. Selecting elements by tag name for example $("h3") will return a reference to all the h3 elements found in the DOM.
3. Lastly, elements can be selected based on cascading style sheet class name, thus $(".turnred") will return a reference to all the elements having CSS class turnred.

Now, let's do some animations on an HTML text input with Id txtEfissy, this text input will possess a watermark effect in which when it has not yet received focus, it will contain the text "jQuery rocks" with silver colour, and border colour of black, but the moment it receives focus, the border colour turns green, the text "jQuery rocks" is removed and the text input now has a black colour, when it loses focus, if the text input still remain empty, then the text "jQuery rocks" is put back into the text input.

<script type="text/javascript"> 
        $(document).ready(function () { 
            $("h2").fadeIn("slow"); 
        }); 
    </script> 
<script type="text/javascript"> 
        $(document).ready(function () { 
            $("h2").fadeIn("slow"); 
        }); 
    </script>

Our HTML text input with water mark effect:

<input id="txtEfissy" type="text" value="jQuery rocks" />

The jquery code is below:

   <script type="text/javascript">
    $(document).ready(function () {
       $("#txtEfissy").css("color", "Silver");
       $("#txtEfissy").css("border-color", "Black");
       $("#txtEfissy").focus(function clearContent() {
       var s = $("#txtEfissy").val();
       if (s.trim() == "jQuery rocks") {
       $("#txtEfissy").val("").css("color", "Black");
       $("#txtEfissy").css("border-color", "Green");
       }
       }).blur(function returnContent() {
       var s = $("#txtEfissy").val();
       if (s.trim() == "") {
              $("#txtEfissy").val
              ("jQuery rocks ").css("color", "Silver");
       $("#txtEfissy").css("border-color", "Black");
       }
        });
    });
</script>

Now, this can equally be done on an ASP.NET textbox server control, but to ensure that the textbox Id remains the same as the Id set at design time, the textbox's ClientIDMode is said to static.

I hope this article is helpful, I will suggest further reading at jquery.com.