Click here to Skip to main content
Click here to Skip to main content

Introduction to jQuery in ASP.net Applications

By , 25 Jan 2012
Rate this:
Please Sign up or sign in to vote.
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 its widely accepted among the web developers and even Visual Studion 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 Studion 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 needs 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

Selecting elements by Id for example $("#button1") will return a reference to button1 in the page.
Selecting elements by tag name for example $("h3") will return a reference to all the h3 elements found in the DOM.
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, lets 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 recieved 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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Ayobami Adewole
Software Developer Teqbridge Limited
Nigeria Nigeria
Developer, consultant and trainer, specialised in .Net Technologies and IP Convergence technology, a Microsoft Certified Professional and DZone MVB
Follow on   Twitter

Comments and Discussions

 
GeneralClientIdMode PinmemberMember 105083787-Jan-14 0:48 
QuestionGreat post.. PinmemberjQuery By Example19-Aug-13 3:24 
GeneralMy vote of 5 Pinmembersarikonda kala14-Aug-13 0:07 
GeneralMy vote of 3 PinmemberAnirban Bera1-Mar-13 6:28 
GeneralMy vote of 4 PinmemberBrianBissell10-Feb-12 6:21 
GeneralRe: My vote of 4 PinmemberAyobami Adewole10-Feb-12 9:24 
GeneralRe: My vote of 4 PinmemberSarah26822-Jun-12 18:03 
GeneralRe: My vote of 4 PinmemberAyobami Adewole23-Jun-12 1:29 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140415.2 | Last Updated 25 Jan 2012
Article Copyright 2012 by Ayobami Adewole
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid