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.