How to refer to the PlaceHolder in a masterpage, in my childpage using JavaScript?
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" cont开发者_StackOverflow中文版ents 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 ?
In ASP.NET 4.0 you can set the ClientIDMode attribute. It doesn't work for Placeholders but it works for panels. This will give you a reliable client ID that you can manage through Javascript.
http://www.west-wind.com/weblog/posts/54760.aspx
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>
or
<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.
<%=phMenuContainer.ClientID %>
加载中,请稍侯......
精彩评论