Access content page control from master page using javascript

StackOverflow https://stackoverflow.com/questions/16716985

Question

I want to access the content page Ajax combobox control in the master page and that too by using Javascript.

I have been trying the same by using the contentpageholder of the content page, but also one of the problem I get is there are around 10 content pages, so when some other page like Page 1 is opened , the code show object reference exception as contentplaceholder is not matched.

How to get that which content page is opened up? Also I am not able to get the code working to get the maincontentplaceholder id in master page.

What I have done till now:

function accessControlContentPage() {
var txtCont = document.getElementById("Page.Master.FindControl('ContentPlaceHolder1').FindControl('txtContent')").value;
var text=txtCont;
}

But this is not working. Any help with the same?

Was it helpful?

Solution

The suggested approach is add a specific content place holder controls for such scripts to be placed in the web page you are rendering. Take a look at the following master/content page markup:

Master page:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApp.PageMethods.Site1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">        
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

There is a content place holder head wherein I must write some js functions trying to access the dropdown list in the other content place holder ContentPlaceHolder1.

Content page markup:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApp.PageMethods.WebForm3" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script>
        function foo() {
            var ddl = document.getElementById('<%= DropDownList1.ClientID %>');
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
</asp:Content>

Here I didn't have to worry so much about trying to access controls nested in ContentPlaceHolderID.

Alternatively, if you don't have that option/freedom, you can always write something as follows in your master page itself:

var d = document.getElementById('<%= this.ContentPlaceHolder1.FindControl("DropDownList1").ClientID %>');

OTHER TIPS

Access content page control from master page using javascript

we can find div id or control id of content page from master page in asp.net

Explanation of content page:- don't forgot to mention runat="server",

ContentPlaceHolderID="content_body" //observation,

main_content is the ID of div tag

MasterPage.master

            var d = document.getElementById('<%= this.content_body.FindControl("main_content").ClientID %>');

Do whatever you want with d

Thank you

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top