javascriptmaster-pagescontentplaceholdercontent-pages

Access content page control from master page using javascript

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?

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 %>');