如何正确隐藏/显示 asp:Panel，其中包含其他服务器控件答案

【问题标题】：How to properly hide/show asp:Panel with other server controls in it如何正确隐藏/显示 asp:Panel，其中包含其他服务器控件
【发布时间】：2014-08-22 14:12:13
【问题描述】：

所以我正在开发一个ASP.NET Web Forms 应用程序。我有：

`<asp:Panel ID="MyPanel" runat="server">'

在此面板中，我还有其他控件，例如 Repeaters、textboxes 等，在 (!IsPostBack) 上，我通过这样做来确定要显示或不显示整个面板的天气：

 if (theClient.CType == "1")
   {
     MyPanel.CssClass == "display-none"
   }

display-none 的定义如下：

.display-none {
    display: none;
}

但是在某些情况下，我想再次显示整个面板，因为我在(!IsPostBack) 上设置了中继器和类似的东西，所以我想设置所有这些。我不完全确定这些可见性属性是如何工作的，但我需要的是要呈现的HTML 标记，要使用正确的数据初始化控件，但只是将其隐藏在页面上但仍处于活动状态。

因此，当满足显示面板的条件时，请记住这一点：

 MyPanel.CssClass = string.Empty;

但是.. 什么都没有发生。我不完全确定，如果我正确地删除了样式，这是否是我应该用来完成我需要完成的正确的CSS 样式。

那么我该怎么做呢？

【问题讨论】：

为什么不简单做MyPanel.Visible = true/false;这样它不依赖于 CSS，如果不可见，简单就不会呈现
事实上，我确实尝试了这个，但我没有得到MyPanel 我认为它并没有从一开始就呈现出来。事实上，我不确定到底发生了什么，但如果我第一次隐藏面板，那么我无法通过简单地返回 Visible = true 来显示它。

标签： css asp.net webforms

【解决方案1】：

在aspx页面中：

<style type="text/css">
    .displayPanel
    {
        display:block;
    }

    .hidePanel
    {
        display:none;
    }
</style>

在后面的代码中：

if (condition)
{
    MyPanel.CssClass = "displayPanel";
}
else
{
    MyPanel.CssClass = "hidePanel";
}

【讨论】：

问题是，当我在后面的代码中更改CssClass 时，它不会在视图上自动更改..
抱歉，不清楚。你说的 CSS 在 View 上没有改变是什么意思？
您想在客户端还是从服务器端隐藏/显示？以上代码用于服务器端，您将看到基于呈现 HTML 中的条件的类。但是如果你想在客户端隐藏，你可以使用类似的逻辑使用 javascript，但是你将无法在呈现的 HTML 中看到。
我发现了这个问题 - stackoverflow.com/questions/21144011/… 这正是我的问题和解决方案。
嗯，我正在使用的面板是一个普通的面板。但是调用来自UpdatePanel 内部的控制，显然这会导致所有问题。但是，感谢您的时间。我必须更好地描述我的设置。

【解决方案2】：

请记住，<asp:Panel> 控件将作为<div> 呈现给客户端。因此，如果 div 中没有内容，它将不会显示在客户端上。确保所有其他内容，如转发器和文本框等 Visibility 属性设置为 true（这是默认值），以便在呈现页面时它们将在那里。此外，当您将 asp 元素的可见性设置为 false 时，它实际上不会呈现在页面上。您将无法通过 JavaScript 或 jQuery 等访问元素。

如前所述，您可以在服务器上进行任何处理后使用(!IsPostBack) 更改 Visible=true/false。您真正应该使用 CSS 技巧的唯一一次是您需要客户端上的元素使用一些 jQuery 或 JavaScript 进行处理。你有没有试过这个：

if(theClient.CType == "1")
{
   MyPanel.Visible == true;
}

当然，您需要将标记更改为：
<asp:Panel ID="MyPanel" runat="server" Visible=false ></asp:Panel>

【讨论】：