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
- To show a Jquery Alert.
- Hide and Show Method
- 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
- Development Edition
- 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
- Add a Web Form in the website.
- Create a Folder by right clicking on the Website and Name it as Jquery
- 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
- First we will drag and drop 2 buttons on the Page and give the id as btnhide and btnShow
- Now we will write the Jquery Code to hide the table that we have created in the earlier step.
- 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
- 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
Output for changing the color of the table
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>
// 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 :-
- Jquery Alert
- Hide and Show of Component on button click
- Changing table color on button click
- 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
