By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,913 Members | 1,379 Online
Bytes IT Community
Submit an Article
Got Smarts?
Share your bits of IT knowledge by writing an article on Bytes.

How to use jQuery in your .NET application

100+
P: 111
Here I am going to show you an example, how easy it is to use jQuery

In this example i will display a hyperlink called "Click to show...". When the user clicks on this link some text will be displayed under this hyperlink which is in the div tag.

Steps for example:
  1. First refer to the latest jquery javascript file. (You can download it from www.jquery.com)
  2. Then in the script area write the code:
    $(document).ready(function(){})
    this statement says that when the html is ready, please execute the below statements in the function.
  3. By default i am hiding the div tag.
    $('div').hide();
    Note: If you have an id to the div tag in that case refer like $('div#idname')
  4. In the next step:
    $('a').click(function(){}) when the anchor tag is clicked, please execute the following function.
  5. In the last step i am making the div tag visible.

How it works:

Expand|Select|Wrap|Line Numbers
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head runat="server">
  6.     <title></title>
  7.     <script src="jquery-1.4.2.js" type="text/javascript"></script>
  8.     <script type="text/javascript">
  9.        $(document).ready(function(){
  10.        $('div').hide();
  11.        $('a').click(function(){
  12.        $('div').show();
  13.        })
  14.        })
  15.     </script>
  16. </head>
  17. <body>
  18.     <form id="form1" runat="server">
  19.     <a id="sample" href="#">Click to show...</a>
  20.     <div>
  21.  
  22.     This is simple example....
  23.     </div>
  24.     </form>
  25. </body>
  26. </html>

jQuery is very easy to use and very powerful javascript querying tool to query html tags, css classes.

Thanks
Bharath Reddy VasiReddy
Mar 26 '10 #1
Share this Article
Share on Google+
1 Comment


tlhintoq
Expert 2.5K+
P: 3,525
TIP: When you are writing your question, there is a button on the tool bar that wraps the [code] tags around your copy/pasted code. It helps a bunch. Its the button with a '#' on it. More on tags. They're cool. Check'em out.
Mar 26 '10 #2