使用 javascript 将面板设置为可见答案

【问题标题】：Setting a panel to visible using javascript使用 javascript 将面板设置为可见
【发布时间】：2013-05-14 04:06:01
【问题描述】：

如何使用 javascript 使 <asp:Panel> 可见？

我执行了以下操作，但出现错误（无法读取 null 的属性样式）

 <asp:Panel runat="server" id="panNonAfricanCountries" Visible="false">

var panNonAfricaDropDown = document.getElementById("panNonAfricanCountries")
if (dropDownFirst == "Yes") {
    panNonAfricaDropDown.style.visibility = "visible";
}

【问题讨论】：

确保您的 js 代码仅在文档加载后运行
你试过document.getElementById("<%=panNonAfricanCountries.ClientID%>")吗？还是在控件中添加ClientIDMode="Static"？

标签： javascript html asp.net panel

【解决方案1】：

asp.net 控件上的Visible="false"因此无法在页面上呈现控件。

您在这里尝试做的是渲染它，但使用 css 样式使其对用户隐藏，直到使用 javascript 显示它。归档不使用 Visible，但为您的面板设置样式或 css。

<asp:Panel ID="PanelId" runat="server" Visible="true" style="visibility:hidden" >
Some Content here...    
</asp:Panel>

asp.Panel 呈现为div，页面上的 html 可能为：

<div id="PanelId" style="visibility:hidden">
Some Content here...    
</div>

我说可能是因为我们不确定 Id 是如何呈现的。为了得到它，我们使用PanelId.ClientID，您的最终 javascript 代码将是：

var panNonAfricaDropDown = document.getElementById("<%=PanelId.ClientID%>");
if (dropDownFirst == "Yes" && panNonAfricaDropDown) {
    panNonAfricaDropDown.style.visibility = "visible";
}

【讨论】：

【解决方案2】：

ASP.NET 会破坏服务器上运行的元素的名称。您必须找到损坏的名称，然后对该名称执行 document.getElementById。

或者，您可以使用 asp:panel 的 ClientIDMode 属性来关闭 mangling (http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx)

【讨论】：