Tuesday, February 2, 2010

Javascript to read Master Page and Content Page controls data




Please visit my new Web Site WWW.Codedisplay.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:
Javascript to read master page & content page controls

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:

JavascriptBank.com said...

very cool & good tip, thank you very much for sharing.

Anonymous said...

Very helpful... Thank you for sharing.

Tom said...

Good one. that worked well

Anonymous said...

Really Good Contribution by Shawpnendu Bikash.

Kamleshkumar Gujarathi.
Mumbai, INDIA

Anonymous said...

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.

Shawpnendu said...

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.

Nayak said...

alert(document.getElementById('<%=((TextBox)Master.FindControl("txtMaster")).ClientID %>').value);
return false;

The above code is not working ,its giving null object.

Shawpnendu said...

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.

Divya said...

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.

Want to say something?
I WOULD BE DELIGHTED TO HEAR FROM YOU

Want To Search More?
Google Search on Internet
Subscribe RSS Subscribe RSS
Article Categories
  • Asp.net
  • Gridview
  • Javascript
  • AJAX
  • Sql server
  • XML
  • CSS
  • Free Web Site Templates
  • Free Desktop Wallpapers
  • TopOfBlogs
     
    Free ASP.NET articles,C#.NET,VB.NET tutorials and Examples,Ajax,SQL Server,Javascript,Jquery,XML,GridView Articles and code examples -- by Shawpnendu Bikash