Let us learn Basics of Jquery

Raj.Trivedi
Posted by in jQuery category on for Beginner level | Points: 250 | Views : 2511 red flag

Jquery is a powerful technology that is like javascript.The major difference is for a certain method to write i javascript you have to write more code where as in Jquery the code is less and the execution is more powerful.You can even create animations like Flash.

Introduction

In this article we will be learning the basics of Jquery.

Requirements to use Jquery in asp.net
How to use Jquery in asp.net?



Objective

  1. To show a Jquery Alert.
  2. Hide and Show Method
  3. Changing the Color of the component using CSS and Jquery combination



Using the code


Before we start writing the Code Snippet we will see how will the Jquery Work.
In order to work with Jquery you will require to have a Jquery Pluggin provided by Jquery on Jquery.com.
You can download the Plugin from http://jquery.com/ there is a Download button to download the Jquery Pluggin.
Once you click the Download button it will take you to the Download page and there you will find 2 option 

  1. Development Edition
  2. Production Edition

Currently we will be using the Development Edition but when you deploy your app on the Production server you can use the Production edition as it is Light weight. 

Check the Image





Once you click on the Link it will take you the page where you will see lots of Code of Javascript, just copy the entire content and paste in a Notepad and name it as Jquery.js

Check the Image





Now once you have downloaded the Development Edition we will now create a New Empty Website in Visual Studio 2010.

Preliminary Steps
 
  1. Add a Web Form in the website.
  2. Create a Folder by right clicking on the Website and Name it as Jquery
  3. Create a Folder by again right clicking on the Website and Name it as CSS.



Note the above two folders will store our CSS Files and Jquery Files.

This is how the Solution Explorer will look




Adding Jquery Plugin to asp.net website

Now we will add the Jquery Plugin to the Jquery Folder.In order to do that we will right click on the Jquery Folder select Add Existing Item - > Browse where you have stored the Jquery.js and click ADD.

Your Folder will look like the Below Image

Check the Image





In the above Image you will some more Jquery Plugins but the Most Important is the One that we have marked with an Arrow, that is the core file to use Jquery in asp.net

Now the Most Important step we will have to add it on the page so to do that just drag and drop the Jquery File in the Markup section of the Web form it will automatically create the reference for us to use it.

Check the Screen





Now we are ready to code for Jquery.

Now we will add drag and drop a Table on the Web form and fill the data something like as shown in the screen.

We will be using the table to change its colour and show and hide the table using Jquery in Later steps





Lets us add the code snippet for Jquery Alert that will pop up as the Page Loads

For the first Code snippet i have not pasted the table code.

// HTML Mark up and Code for Jquery Alert
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Day1.aspx.cs" Inherits="Day1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Jquery/Jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
         <script type="text/javascript">
        //    This is code for Jquery Alert
        $(document).ready(function () {
            alert("This is Jquery Alert");
        });
    </script>
    </head>
<body>
    <form id="form1" runat="server">
    <div> Jquery Alert</div>
        
        </form>
</body>
</html>

Now we will see how we can hide and show table

  1. First we will drag and drop 2 buttons on the Page and give the id as btnhide and btnShow
  2. Now we will write the Jquery Code to hide the table that we have created in the earlier step.
  3. To hide any component using JQuery you can do either by accessing the ID of that component and appending the hide on an Event of a Button click.Check the code
  4. To access any ID of the Component using Jquery you can use the # Tag and specifying the id of the component.

//Html Markup for Table and Jquery Hide Method and show
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Day1.aspx.cs" Inherits="Day1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Jquery/Jquery.js" type="text/javascript"></script>
     <script type="text/javascript"> 										$(document).ready(function () {
            $('#btnhide').click(function (e) { // identifying the button click
                e.preventDefault(); // This method will prevent the post back of the page.
                $('#table1').hide(); // Accessing the table using its ID and appending the Hide 					method
            });
        }); 													$(document).ready(function () {
            	$('#btnShow').click(function (e) {
                e.preventDefault();
                $('#table1').show();
            });
        });												</script>
    <style type="text/css">
        #table1
        {
            height: 193px;
            width: 667px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table id="table1">
            <tr>
                <td>
                    ID
                </td>
                <td>
                    Name
                </td>
                <td>
                    Salary
                </td>
                <td>
                    Address
                </td>
                <td>
                    DOB
                </td>
            </tr>
            <tr>
                <td>
                    001
                </td>
                <td>
                    Raj.Trivedi
                </td>
                <td>
                    5000
                </td>
                <td>
                    Bhayander
                </td>
                <td>
                    26/11/1989
                </td>
            </tr>
            <tr>
                <td>
                    002
                </td>
                <td>
                    Jassi.Kashyap
                </td>
                <td>
                    10000
                </td>
                <td>
                    Vikhroli
                </td>
                <td>
                    20/08/1991
                </td>
            </tr>
            <tr>
                <td>
                    003
                </td>
                <td>
                    Rajendra Rautela
                </td>
                <td>
                    15000
                </td>
                <td>
                    Mansarovar
                </td>
                <td>
                    14/01/1989
                </td>
            </tr>
            <tr>
                <td>
                    004
                </td>
                <td>
                    Shailendta Patel
                </td>
                <td>
                    20000
                </td>
                <td>
                    Kurla
                </td>
                <td>
                    08/08/1989
                </td>
            </tr>
            <tr>
                <td>
                    005
                </td>
                <td>
                    Anil.Yadav
                </td>
                <td>
                    25000
                </td>
                <td>
                    Vikhroli
                </td>
                <td>
                    10/05/1989
                </td>
            </tr>
        </table>
        <br />
        <br />
        
    </div>
    <div id="disclaimer">
      <asp:Button ID="btnhide" runat="server" Text="Button"></asp:Button>					<asp:button ID="btnShow" runat="server" text="Show the Table" />
    </div>
    </form>
</body>
</html>
 

Output for Jquery Alert,Hide and Show Method

Jquery Alert




Table Display




Hiding the Table



Showing the table again on the Button click of the Show Table


Now we will add a CSS file in the CSS folder by right clicking the CSS Folder -> Add New Item -> Select Style Sheet -> name it as Day1.css

Check the screen




Now open the CSS File and add the following code in the css.This code will change the table to Aqua Color and change the font size and style 

Once you are done pasting the below code drag and drop the CSS File inside the head tag so that we can use the class that we hav 

// CSS Code
.chg
{
	background-color:Aqua;
	list-style-type:square;	
	color:Olive;
	font-size:20pt;
	line-height:3.5em;
	
	
}
// HTML Markup and Code for changing the color of the table
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Day1.aspx.cs" Inherits="Day1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Jquery/Jquery.js" type="text/javascript"></script>
     <link rel="stylesheet" type="text/css" href="CSS/Day1.css" />
    <script type="text/javascript">									$(document).ready(function () {
            $('#btnChangeTableColor').click(function (e) {
                e.preventDefault();
                $('#table1').addClass('chg');
            });});											</script>
    <style type="text/css">
        #table1
        {
            height: 193px;
            width: 667px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table id="table1">
            <tr>
                <td>
                    ID
                </td>
                <td>
                    Name
                </td>
                <td>
                    Salary
                </td>
                <td>
                    Address
                </td>
                <td>
                    DOB
                </td>
            </tr>
            <tr>
                <td>
                    001
                </td>
                <td>
                    Raj.Trivedi
                </td>
                <td>
                    5000
                </td>
                <td>
                    Bhayander
                </td>
                <td>
                    26/11/1989
                </td>
            </tr>
            <tr>
                <td>
                    002
                </td>
                <td>
                    Jassi.Kashyap
                </td>
                <td>
                    10000
                </td>
                <td>
                    Vikhroli
                </td>
                <td>
                    20/08/1991
                </td>
            </tr>
            <tr>
                <td>
                    003
                </td>
                <td>
                    Rajendra Rautela
                </td>
                <td>
                    15000
                </td>
                <td>
                    Mansarovar
                </td>
                <td>
                    14/01/1989
                </td>
            </tr>
            <tr>
                <td>
                    004
                </td>
                <td>
                    Shailendta Patel
                </td>
                <td>
                    20000
                </td>
                <td>
                    Kurla
                </td>
                <td>
                    08/08/1989
                </td>
            </tr>
            <tr>
                <td>
                    005
                </td>
                <td>
                    Anil.Yadav
                </td>
                <td>
                    25000
                </td>
                <td>
                    Vikhroli
                </td>
                <td>
                    10/05/1989
                </td>
            </tr>
        </table>
        <br />
        <br />
        
    </div>
    <div id="disclaimer">
      <asp:Button ID="btnhide" runat="server" Text="Hide the Table"></asp:Button> 
      <br />
        <br />
        <asp:button ID="btnShow" runat="server" text="Show the Table" /><br />
        <br />
         <asp:Button ID="btnChangeTableColor" runat="server" Text="Change the table color"></asp:Button> 
      
    </div>
    </form>
</body>

</html>
 

Output for changing the color of the table




// Complete code for the HTML Markup and Jquery Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Day1.aspx.cs" Inherits="Day1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Jquery/Jquery.js" type="text/javascript"></script>
     <link rel="stylesheet" type="text/css" href="CSS/Day1.css" />
    <script type="text/javascript">									//Jquery Alert 												$(document).ready(function () {
            alert("This is Jquery Alert");
        });											// Jquery Hide and Show												 $(document).ready(function () {
            $('#btnhide').click(function (e) {
                e.preventDefault();
                $('#table1').hide();
            });
        }); 																								$(document).ready(function () {
            $('#btnhide').click(function (e) {
                e.preventDefault();
                $('#table1').show();
            });
        }); 																								// Changing the color of the table									$(document).ready(function () {
            $('#btnChangeTableColor').click(function (e) {
                e.preventDefault();
                $('#table1').addClass('chg');
            });
        });													</script>
    <style type="text/css">
        #table1
        {
            height: 193px;
            width: 667px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table id="table1">
            <tr>
                <td>
                    ID
                </td>
                <td>
                    Name
                </td>
                <td>
                    Salary
                </td>
                <td>
                    Address
                </td>
                <td>
                    DOB
                </td>
            </tr>
            <tr>
                <td>
                    001
                </td>
                <td>
                    Raj.Trivedi
                </td>
                <td>
                    5000
                </td>
                <td>
                    Bhayander
                </td>
                <td>
                    26/11/1989
                </td>
            </tr>
            <tr>
                <td>
                    002
                </td>
                <td>
                    Jassi.Kashyap
                </td>
                <td>
                    10000
                </td>
                <td>
                    Vikhroli
                </td>
                <td>
                    20/08/1991
                </td>
            </tr>
            <tr>
                <td>
                    003
                </td>
                <td>
                    Rajendra Rautela
                </td>
                <td>
                    15000
                </td>
                <td>
                    Mansarovar
                </td>
                <td>
                    14/01/1989
                </td>
            </tr>
            <tr>
                <td>
                    004
                </td>
                <td>
                    Shailendta Patel
                </td>
                <td>
                    20000
                </td>
                <td>
                    Kurla
                </td>
                <td>
                    08/08/1989
                </td>
            </tr>
            <tr>
                <td>
                    005
                </td>
                <td>
                    Anil.Yadav
                </td>
                <td>
                    25000
                </td>
                <td>
                    Vikhroli
                </td>
                <td>
                    10/05/1989
                </td>
            </tr>
        </table>
        <br />
        <br />
        
    </div>
    <div id="disclaimer">
      <asp:Button ID="btnhide" runat="server" Text="Hide the Table"></asp:Button> 
      <br />
        <br />
        <asp:button ID="btnShow" runat="server" text="Show the Table" /><br />
        <br />
         <asp:Button ID="btnChangeTableColor" runat="server" Text="Change the table color"></asp:Button> 
      
    </div>
    </form>
</body>

</html>
 

Explanation for the Last Code Snippet

The Last code snippet consists the code for the entire HTML Markup and all the methods that we have used of Jquery in the above steps 

The methods were :- 

  1. Jquery Alert
  2. Hide and Show of Component on button click
  3. Changing table color on button click
  4. The e.preventdefault method will prevent the page not to refresh again so that the Jquery hide and show method and Table color change method gets executed.If the e.preventdefault() method is not used then the page will post back and Jquery method will not fire.

Hope this article would be useful to begin with jQuery. Do let me know your comments or suggestions.

Thanks
Page copy protected against web site content infringement by Copyscape

About the Author

Raj.Trivedi
Full Name: Raj Trivedi
Member Level:
Member Status: Member,MVP
Member Since: 6/16/2012 2:04:41 AM
Country: India
Regard's Raj.Trivedi "Sharing is Caring" Please mark as answer if your Query is resolved
http://www.dotnetfunda.com/profile/raj.trivedi.aspx
Raj Trivedi i.e. me started my career as Support Professional and then moved on the Software development eventually reached at these skills Software Development | Enthusiastic Blogger | Content Writer | Technical Writer | Problem Solver | Lecturer on Technology Subjects | Runnerup Award Winner on www.dotnetfunda.com and firm believer in Sharing as a way of Caring Yet this much achieved its still a long way to go and there is biggest dream lying to be one of the best entrepreneurs of India in Technology Department. The Dream has just started and i hope it follows. Highlights are mentioned in details in my profile at http://in.linkedin.com/pub/raj-trivedi/30/61/b30/

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)