Thursday, November 3, 2011

Javascript to read Master Page and Content Page controls data

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.


To do this example first add a master page in your project. Then add the below controls on master page like below:
1<asp:Label ID="lblMaster" runat="server" Text="Master Label"></asp:Label>
2<asp:TextBox ID="txtMaster" runat="server"></asp:TextBox>
3<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:
1<asp:Label ID="lblChild" runat="server" Text="Child Label"></asp:Label>
2<asp:TextBox ID="txtChild" runat="server"></asp:TextBox>
3<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:
1<script type="text/javascript">
2function GetContentValue()
3{
4    alert(document.getElementById('<%= ((TextBox)ContentPlaceHolder1.FindControl("txtChild")).ClientID %>').value);
5    return false;
6}
7</script>
Now add the below javascript method or function in the content page content section to read master page textbox control data like below:
1<script type="text/javascript">
2function GetMasterValue()
3{
4    alert(document.getElementById('<%=((TextBox)Master.FindControl("txtMaster")).ClientID %>').value);
5    return false;
6}
7</script>
Simple output like below:
Javascript to read master page & content page controls

My complete masterpage HTML markup is given below:
01<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
02 
03<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04 
05<html xmlns="http://www.w3.org/1999/xhtml" >
06<head runat="server">
07    <title>Javascript to read content page controls</title>
08<script type="text/javascript">
09function GetContentValue()
10{
11    alert(document.getElementById('<%= ((TextBox)ContentPlaceHolder1.FindControl("txtChild")).ClientID %>').value);
12    return false;
13}
14</script>   
15</head>
16<body>
17    <form id="form1" runat="server">
18    <div>
19        <asp:Label ID="lblMaster" runat="server" Text="Master Label"></asp:Label>
20        <asp:TextBox ID="txtMaster" runat="server"></asp:TextBox>
21        <asp:Button ID="cmdChild" OnClientClick="return GetContentValue();" runat="server" Text="Read Content TexBox Value" />
22         
23 
24        <hr />
25        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
26        </asp:contentplaceholder>
27    </div>
28    </form>
29</body>
30</html>
My complete content page HTML markup is given below:
01<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="child_form.aspx.cs" Inherits="child_form" Title="Javascript to read master page controls: " %>
02<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
03<script type="text/javascript">
04function GetMasterValue()
05{
06    alert(document.getElementById('<%=((TextBox)Master.FindControl("txtMaster")).ClientID %>').value);
07    return false;
08}
09</script>
10<asp:Label ID="lblChild" runat="server" Text="Child Label"></asp:Label>
11<asp:TextBox ID="txtChild" runat="server"></asp:TextBox>
12<asp:Button ID="cmdChild" OnClientClick="return GetMasterValue();" runat="server" Text="Read Master TexBox Value" />
13</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.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)