Click here to Skip to main content
12,818,664 members (28,347 online)
Click here to Skip to main content
Add your own
alternative version

Stats

47.2K views
14 bookmarked
Posted 24 Jan 2012

Introduction to jQuery in ASP.NET Applications

, 25 Jan 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
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>

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)

Share

About the Author

Ayobami Adewole
Software Developer
Nigeria Nigeria
A Microsoft Certified Solutions Developer (MCSD), DZone.com Most Valuable Blogger (MVB). Passionate about Sofware Development and VoIP

You may also be interested in...

Pro

Comments and Discussions

 
GeneralClientIdMode Pin
Member 105083787-Jan-14 1:48
memberMember 105083787-Jan-14 1:48 
QuestionGreat post.. Pin
jQuery By Example19-Aug-13 4:24
memberjQuery By Example19-Aug-13 4:24 
GeneralMy vote of 5 Pin
sarikonda kala14-Aug-13 1:07
membersarikonda kala14-Aug-13 1:07 
GeneralMy vote of 3 Pin
Anirban Bera1-Mar-13 7:28
memberAnirban Bera1-Mar-13 7:28 
GeneralMy vote of 4 Pin
BrianBissell10-Feb-12 7:21
memberBrianBissell10-Feb-12 7:21 
GeneralRe: My vote of 4 Pin
Ayobami Adewole10-Feb-12 10:24
memberAyobami Adewole10-Feb-12 10:24 
GeneralRe: My vote of 4 Pin
Sarah26822-Jun-12 19:03
memberSarah26822-Jun-12 19:03 
GeneralRe: My vote of 4 Pin
Ayobami Adewole23-Jun-12 2:29
memberAyobami Adewole23-Jun-12 2:29 

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

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

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