Subscribe
Please visit my new Web Site https://coderstechzone.com
In many forums i found that asp.net c# vb.net developers ask expert how to read or access master page control from content page as well as how to get content page control from master page using clientside javascript. Thats why in this asp.net javascript tutorial i will explain how you can read or access content page controls from master page as well as read or access master page controls from content page by client side javascript function.
If you want to read "Read ASP.NET Master Page controls from Content Page and viceversa using server side code" then click here.
To do this example first add a master page in your project. Then add the below controls on master page like below:
<asp:Label ID="lblMaster" runat="server" Text="Master Label"></asp:Label> <asp:TextBox ID="txtMaster" runat="server"></asp:TextBox> <asp:Button ID="cmdChild" OnClientClick="return GetContentValue();" runat="server" Text="Read Content TexBox Value" />Add a content page by attaching the above master page in your project and then add the below controls:
<asp:Label ID="lblChild" runat="server" Text="Child Label"></asp:Label> <asp:TextBox ID="txtChild" runat="server"></asp:TextBox> <asp:Button ID="cmdChild" OnClientClick="return GetMasterValue();" runat="server" Text="Read Master TexBox Value" />Now add the below javascript method or function in the master page head section to read content page textbox control data like below:
<script type="text/javascript">
function GetContentValue()
{
alert(document.getElementById('<%= ((TextBox)ContentPlaceHolder1.FindControl("txtChild")).ClientID %>').value);
return false;
}
</script>
Now add the below javascript method or function in the content page content section to read master page textbox control data like below:<script type="text/javascript">
function GetMasterValue()
{
alert(document.getElementById('<%=((TextBox)Master.FindControl("txtMaster")).ClientID %>').value);
return false;
}
</script>
Simple output like below:
My complete masterpage HTML markup is given below:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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>Javascript to read content page controls</title>
<script type="text/javascript">
function GetContentValue()
{
alert(document.getElementById('<%= ((TextBox)ContentPlaceHolder1.FindControl("txtChild")).ClientID %>').value);
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblMaster" runat="server" Text="Master Label"></asp:Label>
<asp:TextBox ID="txtMaster" runat="server"></asp:TextBox>
<asp:Button ID="cmdChild" OnClientClick="return GetContentValue();" runat="server" Text="Read Content TexBox Value" />
<br />
<hr />
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</div>
</form>
</body>
</html>
My complete content page HTML markup is given below:<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="child_form.aspx.cs" Inherits="child_form" Title="Javascript to read master page controls: " %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript">
function GetMasterValue()
{
alert(document.getElementById('<%=((TextBox)Master.FindControl("txtMaster")).ClientID %>').value);
return false;
}
</script>
<asp:Label ID="lblChild" runat="server" Text="Child Label"></asp:Label>
<asp:TextBox ID="txtChild" runat="server"></asp:TextBox>
<asp:Button ID="cmdChild" OnClientClick="return GetMasterValue();" runat="server" Text="Read Master TexBox Value" />
</asp:Content>
You can read any serverside control like dropdownlist, checkbox, radiobutton, checkboxlist, radiobuttonlist as well using the above javascript method with slight modification. Hope you can do whatever controls in master page or in content page.
9 comments:
very cool & good tip, thank you very much for sharing.
Very helpful... Thank you for sharing.
Good one. that worked well
Really Good Contribution by Shawpnendu Bikash.
Kamleshkumar Gujarathi.
Mumbai, INDIA
Doesn't work for HiddenField
hf = document.getElementById('<%=((HiddenField)Master.FindControl("hfMaster")).ClientID %>')
Raises error: HiddenField is a type and cannot be used as expression.
I have tested it & found ok. Add the below hf in master page:
Now add the below line in JS function:
hf = document.getElementById('<%=((HiddenField)Master.FindControl("HiddenField1")).ClientID %>');
alert(hf.value);
It will work tested.
alert(document.getElementById('<%=((TextBox)Master.FindControl("txtMaster")).ClientID %>').value);
return false;
The above code is not working ,its giving null object.
Most probably you did not provide correct object name. Another way is check the view source what the name of the control is generated by server & put that name & try again.
My requirement is when the page is loading my script will be enabled in .aspx page but it does n't works in master-content,but it works with .html working.Will you please guide me.
I WOULD BE DELIGHTED TO HEAR FROM YOU