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

发布于 2024-09-27 14:58:34 字数 2150 浏览 2 评论 0原文

这是我的母版页代码

<%@ 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>

这是我的子页面代码：

<%@ 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 ？

原文

This is my master page code

<%@ 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>

And this is my Childpage code :

<%@ 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>

Now what I want to do is, using JavaScript, hide the "phMenu" contents in the childpage.
For this, I have written a function called " showHideMasterPageContent " in the masterpage which I am calling in the child page.

My trouble is that, I get a null reference since obviously, when I looked at the source, I see that only the contents of phMenu are rendered and not the phMenu control itself. Now how to refer to phMenu in JS ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

默嘫て 2024-10-04 14:58:34

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

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

回复收藏 0 原文

风吹雨成花 2024-10-04 14:58:34

你是对的。 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 占位符。但请记住，如果您选择使用面板，则必须通过其 ClientID 引用该控件。

<%=phMenuContainer.ClientID %>

You are correct. A PlaceHolder control is just that. It only renders the contents, and there are no tags rendered for itself.

If you want to do this, then you should surround the placeholder with a div (or an asp panel, if you prefer).

        <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>

Here, you can hide the phMenuContainer div instead of the phMenu placeholder. Remember, though, that if you choose to use the Panel, then you will have to refer to the control by its ClientID.