At a time there becomes a requirement to get/set the values of controls in our
project. We can get/set the values of controls through programming or by
using JavaScript. If we just have to perform a get/set operation we can do it by
simply using JavaScript.
Scenario I
Let's consider a scenario where I've 2 textboxes named TextBox1 and TextBox2 and I
need to set the value of a particular textbox in the other textbox on the same page.
I can simply do it programmatically with the following line.
TextBox2.Text=TextBox1.Text;
The same part of code can be done by using JavaScript:
document.getElementById('<%=TextBox2.ClientID%>').value=document.getElementById('<%=TextBox1.ClientID%>').value
or
document.forms[0]["TextBox2"].value=document.forms[0]["TextBox1"].value;
Note: Provided that the pages are just normal web page and don't have any master page applied to it.
Scenario II
Now consider a scenario if we have a master applied on a particular web page
and we want to get/set the value of a particular control within the same web
page.
For doing this activity we'll create a sample master page. The following is the code
for the master page.
<%@
Master Language="C#"
AutoEventWireup="true"
CodeFile="TopLevel.master.cs"
Inherits="TopLevel"
%>
<!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
id="Head1"
runat="server">
<title>Untitled
Page</title>
<style
type="text/css">
.style1
{
width: 4%;
}
.style2
{
width:
1274px;
}
</style>
</head>
<body>
<form
id="form1"
runat="server">
<table
style="width:100%;">
<tr>
<td
align="right"
colspan="3">
<asp:Image
ID="Image1"
runat="server"
ImageUrl="~/images/AdvWorksLogo.gif"
/>
</td>
</tr>
<tr>
<td
class="style1">
<asp:Image
ID="Image2"
runat="server"
ImageUrl="~/images/AdvWorksSideBar.gif"
/>
</td>
<td
valign="top"
class="style2">
<asp:ContentPlaceHolder
id="pageContent"
runat="server">
<p>
<br
/>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
</asp:ContentPlaceHolder>
</td>
<td
style="width:
10%">
</td>
</tr>
<tr>
<td
align="right"
colspan="3">
<asp:Label
ID="Label1"
runat="server"
Text="<b>Copyright&copy;[email protected]</b>"></asp:Label>
</td>
</tr>
</table>
</form>
</body>
</html>
Following is the source code for the Test.aspx apge.
<%@
Page Language="C#"
MasterPageFile="~/TopLevel.master"
AutoEventWireup="true"
CodeFile="Test1.aspx.cs"
Inherits="Test1"
Title="Untitled Page"
%>
<asp:Content
ID="Content1"
ContentPlaceHolderID="pageContent"
Runat="Server">
<script
type="text/javascript">
function getData()
{
/*
Here your this method of setting the value will not work
because in our current web page we donot have a form tag we have a content tag
which is inside the master page. So our form tag will reside on master
then how do i access/set the value through this method.
document.forms[0]["TextBox2"].value=document.forms[0]["TextBox1"].value;
*/
document.getElementById('<%=TextBox2.ClientID %>').value=document.getElementById('<%=TextBox1.ClientID
%>').value;
/*
OR
var a = document.getElementById('<%= "ctl00_pageContent_TextBox1"
%>').value;
document.getElementById('<%= "ctl00_pageContent_TextBox2" %>').value
= a;
*/
}
</script>
<table
style="width:
40%;">
<tr>
<td>
Enter Your Name :
</td>
<td>
<asp:TextBox
ID="TextBox1"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td
colspan="2"
align="center">
<asp:Button
ID="Button1"
runat="server"
Text="Button"
OnClientClick="getData()"
/>
</td>
</tr>
<tr>
<td>Your
Name is :</td>
<td>
<asp:TextBox
ID="TextBox2"
runat="server"></asp:TextBox></td>
</tr>
</table>
</asp:Content>
NOTE : In case you want to access a
master page control on the child page you can use the following code.
document.getElementById('<%=Page.MasterPage.FindControl("pageContent").FindControl("TextBox2").ClientID
%>').value=document.getElementById('<%=Page.MasterPage.FindControl("pageContent").FindControl("TextBox1").ClientID
%>').value
Hope you've liked the article.