Question

这是我的母版页代码

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="SiteMaster.master.cs"
    Inherits="ChildPage_Call_Js_in_MasterPage.SiteMaster" %>

<!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></title>

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:PlaceHolder ID="phMenu" runat="server"></asp:PlaceHolder>
        <asp:ContentPlaceHolder ID="ContentPlaceHolderBody" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
    <script type="text/javascript" language="javascript">
        function showHideMasterPageContent() {
            debugger;
            var phMenu = document.getElementById("<%=phMenu.ClientID%>");
//            phMenu.style.display = 'none';

        }
    </script>
</body>
</html>

这是我的Childpage代码：

<%@ Page Title="" Language="C#" MasterPageFile="~/SiteMaster.master" AutoEventWireup="true"
    CodeBehind="ChildPage1.aspx.cs" Inherits="ChildPage_Call_Js_in_MasterPage.ChildPage1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderBody" runat="server">
   <script type="text/javascript" language="javascript">
       $(document).ready(function () {

           debugger;
           showHideMasterPageContent();
       });


    </script>
</asp:Content>

现在我想要做的是，使用JavaScript隐藏子页面中的“phMenu”内容。为此，我在母版页中编写了一个名为“showHideMasterPageContent”的函数，我在子页面中调用它。

我的麻烦在于，我得到一个空引用，因为很明显，当我查看源代码时，我发现只有phMenu的内容被呈现而不是phMenu控件本身。现在如何在JS中引用phMenu？

Answer 1

在ASP.NET 4.0中，您可以设置ClientIDMode属性。它不适用于占位符，但适用于面板。这将为您提供可靠的客户端ID，您可以通过Javascript管理。

http://www.west-wind.com/weblog/posts/54760.aspx

Answer 2

你是对的。 PlaceHolder控件就是这样。它只呈现内容，并且没有为自己呈现标记。

如果你想这样做，那么你应该用div（或者asp面板，如果你愿意的话）包围占位符。

        <div id="phMenuContainer">
            <asp:PlaceHolder ID="phMenu" runat="server"></asp:PlaceHolder>
        </div>

或

        <asp:Panel ID="phMenuContainer" runat="server">
            <asp:PlaceHolder ID="phMenu" runat="server"></asp:PlaceHolder>
        </asp:Panel>

在这里，您可以隐藏phMenuContainer div而不是phMenu占位符。但请记住，如果您选择使用Panel，则必须通过其ClientID引用该控件。

<%=phMenuContainer.ClientID %>

如何使用JavaScript在我的子页面中的母版页中引用PlaceHolder？

2 个答案: