Introduction: In this article we will discuss how to use jQuery with a master page and we are also going to explore how to clone one textbox value inside another textbox using jQuery. Cloning
means whatever we enter inside the textbox then we will see that it will
automatically insert inside another textbox. In this article we have to
use a master page in which we will use a jQuery reference inside it and we will create a default page which will contains the jQuery code and pass the reference of
that script inside the container. In this we are using CSS for applying some
awesome effects, let's see how we will use jQuery with master page and
cloning the textbox value.
Step 1: Firstly you have to create a web
site
- Go to visual studio 2010
- New-> Select a website application
- Click OK
Step 2: Secondly you have to add a
JScript file to the Scripts folder
- Go to the Solution Explorer
- Right Click on the Scripts folder
- Select add new item
- Add new JScript file and give it a name
- Click OK
Step 3: In this step let's see the JScipt
code for the cloning the textbox value first of all you will have to open the .js
file let see how it will looklike:
Step 4: Now in this step you have to
write the code for the .js file
Explanation: In this explanation first of all
we have to use the event named as keyup which will be fired As the user types in
the first TextBox, we retrieve the value of the first TextBox and set it to the
value of the second TextBox. Here is the working of the jQuery code that how to clone one
textbox value inside the other textbox value.
Step 5: In this step we will see that
from where we have to placed the jQuery reference inside the master page file
let see from where you have to give it.
Step 6: In this step we will copy the
script file path on right click and place it into the master page file let see
the code given below how it will added:
MasterPage code:
<%@
Master Language="C#"
AutoEventWireup="true"
CodeFile="Site.master.cs"
Inherits="SiteMaster"
%>
<!DOCTYPE
html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head
runat="server">
<title></title>
<script
type="text/javascript"
src="Scripts/jquery-1.4.1.min.js"></script>
<link
href="~/Styles/Site.css"
rel="stylesheet"
type="text/css"
/>
<asp:ContentPlaceHolder
ID="HeadContent"
runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form
runat="server">
<div
class="main">
<asp:ContentPlaceHolder
ID="MainContent"
runat="server"/>
</div>
</form>
</body>
</html>
Step 7: In this step we have to add the
reference of the clone.js file let see from where you have to add the reference
which is given below:
Step 8: In this step we will see that
where we will placed the reference of the clone.js file inside the Default2.aspx
page which is given below:
Code:
<%@
Page Title="Home
Page" Language="C#"
MasterPageFile="~/Site.master"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<asp:Content
ID="HeaderContent" runat="server"
ContentPlaceHolderID="HeadContent">
<script
type="text/javascript"
src="Scripts/clone.js"></script>
</asp:Content>
<asp:Content
ID="BodyContent" runat="server"
ContentPlaceHolderID="MainContent">
<div
style="font-family:
'Comic Sans MS'; font-size:
large; background-color:
#2a2a2a;">
<h1
style="font-family:
'Comic Sans MS'; font-size:
x-large; color:
#FFFF00; background-color:
#800000;">Enter the text in the first textbox then we will see that the
text inside the first textbox will be cloned inside the second textbox
</h1>
<br
/>
<asp:TextBox
ID="txt1"
runat="server"
Height="43px"
Width="134px"
BackColor="Maroon"
BorderColor="#FFFF66"
BorderStyle="Double"
BorderWidth="5px"
Font-Size="Large"
ForeColor="#CCFF66"
/>
<br
/>
<br
/>
<br
/>
<asp:TextBox
ID="txt2"
runat="server"
Height="43px"
Width="134px"
BackColor="Maroon"
BorderColor="#FFFF66"
BorderStyle="Double"
BorderWidth="5px"
Font-Size="Large"
ForeColor="#CCFF66"
/>
<br
/><br
/><br
/>
</div>
</asp:Content>
Step 9:
in this step we will see the design of the Default.aspx page let see the figure
given beolw:
Step 10:
In this step we are going to run the application by pressing F5 then the output
of the page is given below:
Output1:
Output2: