面板可见性 asp.net

Question

请原谅我，因为这是我的第一个 post，我远非精通 IT，但我一直在为我的新工作做一个项目...

我正在使用 Visual Studio 2017 和 asp.net Web 表单模板。

我将几个面板的可见性设置为 false，并将每个面板设置为仅当从复选框列表中选择了某个选项时才可见。

我已经成功地对可见性进行了编码，但是当从复选框列表中选择了多个项目时，我希望允许用户查看多个面板...不幸的是，看起来好像只有一个面板变得可见一次。我假设它们是重叠的。

我曾尝试将每个面板放在 table 中作为一种占位符，但没有成功。

任何建议将不胜感激

aspx.vb

Protected Sub ListBox1_Changed(ByVal sender As Object, ByVal e As EventArgs) 句柄 ListBox1.SelectedIndexChanged

    If ListBox1.SelectedValue = "AA" Then

        Panel1.Visible = True

    Else
        Panel1.Visible = False

如果ListBox1.SelectedValue = "BB" 或 ListBoxLivewell.SelectedValue = "CC" 或 ListBoxLivewell.SelectedValue = "DD" 那么

        Panel2.Visible = True

    Else

        Panel2.Visible = False

    End If

Answer 1

我建议您创建空白测试页，然后试试这个：

标记：

        <asp:CheckBox ID="CheckBox1" runat="server" Text="Panel1" AutoPostBack="true" />
        <asp:CheckBox ID="CheckBox2" runat="server" Text="Panel2" AutoPostBack="true" />
        <asp:CheckBox ID="CheckBox3" runat="server" Text="Panel3" AutoPostBack="true" />

        <asp:Panel ID="Panel1" runat="server">
            <h2>Panel 1</h2>
        </asp:Panel>

        <asp:Panel ID="Panel2" runat="server">
            <h2>Panel 2</h2>
        </asp:Panel>

        <asp:Panel ID="Panel3" runat="server">
            <h2>Panel 3</h2>
        </asp:Panel>

隐藏代码：

Protected Sub CheckBox1_CheckedChanged(sender As Object, e As EventArgs) Handles CheckBox1.CheckedChanged

    ' we could use this one line
    ' Panel1.Visible = CheckBox1.Checked
    ' or

    If CheckBox1.Checked Then
        Panel1.Visible = True
    Else
        Panel1.Visible = False
    End If

End Sub


Protected Sub CheckBox2_CheckedChanged(sender As Object, e As EventArgs) Handles CheckBox2.CheckedChanged

    Panel2.Visible = CheckBox2.Checked

End Sub

Protected Sub CheckBox3_CheckedChanged(sender As Object, e As EventArgs) Handles CheckBox3.CheckedChanged

    Panel3.Visible = CheckBox3.Checked

End Sub

我们得到这个：

请注意，由于页面刚刚加载，所以我的复选框代码 NONE 有运行。事实上，如果我选中一个框，我会得到：

所以，实际上要隐藏面板 1，我现在可以 un-check 第一个框，并得到这个：

请注意面板是如何“不同步”的，因为我在启动时并没有真正检查或对面板做任何事情，因此它们没有反映正确的状态。

事实上，直到我检查，un-check 所有 3 个，然后在那时，它们都工作正常。

所以，这样做可能更好。

在第一页加载时（并且仅在第一次加载时），我会这样做：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        ShowPans()
    End If

End Sub

Sub ShowPans()

    Panel1.Visible = CheckBox1.Checked
    Panel2.Visible = CheckBox2.Checked
    Panel3.Visible = CheckBox3.Checked

End Sub

所以，现在在第一页加载时 - 我 hide/show 基于复选框代码的面板，现在一切都开始正确地“同步”

尝试用上面的方法测试空白页，但隐藏和显示面板应该可以。

请注意，在许多情况下，最好 hide/show 面板而不使用可见。这样做的原因是任何标记为 visibile = false 的控件都不会发送到浏览器。如果您有一些客户端 JavaScript 运行宁，或做事，他们将无法看到，也不会参考那些面板。

所以，在很多情况下，最好隐藏起来，而不是使用 Visible=false。如前所述，如果您使用客户端 JavaScript 来操纵此类控件，这是非常必要的。

因此，我们的代码现在会变成这样：

Protected Sub CheckBox1_CheckedChanged(sender As Object, e As EventArgs) Handles CheckBox1.CheckedChanged

    If CheckBox1.Checked Then
        Panel1.Style("display") = "normal"
    Else
        Panel1.Style("display") = "none"
    End If
End Sub


Protected Sub CheckBox2_CheckedChanged(sender As Object, e As EventArgs) Handles CheckBox2.CheckedChanged

    If CheckBox2.Checked Then
        Panel2.Style("display") = "normal"
    Else
        Panel2.Style("display") = "none"
    End If
End Sub

Protected Sub CheckBox3_CheckedChanged(sender As Object, e As EventArgs) Handles CheckBox3.CheckedChanged

    ' same as above 2 - but short hand code
    Panel3.Style("display") = IIf(CheckBox3.Checked, "normal", "none")

End Sub

现在，如果您使用 say JavaScript 客户端，您只需要执行上述操作 - 我只是想说明一下，使用 Visible 通常会成为一个问题，因为如前所述，visible = false 表示控件既不发送也不呈现浏览器端 - 当我开始写很多 JavaScript.

时，我花了一整天的时间学习这个错误

到目前为止，这看起来是 100% 服务器端代码，因此您可以使用 .Visible。

但是，做一个快速的小测试网页 - 试试上面的 - 确保它有效，然后再试一次你的代码。

面板可见性 asp.net

Panel visibility asp.net

vb.net

asp.net

visibility

panel

overlapping