Panel visibility asp.net - asp.net

Question

Forgive me as this is my first post and I am far from being IT savvy but I have been working on a project for my new job...
I am using Visual Studio 2017 and a asp.net Web form template.
I have several panels that I have set visibility to false and have set each panel to become only visible if a certain option is selected from a checkbox list.
I have managed to successfully code the visibility HOWEVER I want to allow the user to view more than one panel when more than one item is selected from the checkbox list... unfortunately it looks as though only one panel becomes visible at a time. I am assuming that they are overlapping .
I have tried putting each panel in a table to act as sort of a placeholder but with no success.
Any advice would be much appreciated 🙏
aspx.vb
Protected Sub ListBox1_Changed(ByVal sender As Object, ByVal e As EventArgs) Handles ListBox1.SelectedIndexChanged
If ListBox1.SelectedValue = "AA" Then
Panel1.Visible = True
Else
Panel1.Visible = False
If ListBox1.SelectedValue = "BB" Or ListBoxLivewell.SelectedValue = "CC" Or ListBoxLivewell.SelectedValue = "DD" Then
Panel2.Visible = True
Else
Panel2.Visible = False
End If

Answer 1

I suggest you create blank test page, and try this:
Markup:
<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>
code behind:
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
We get this:
Do note, since the page just loaded, then NONE of my check box code has run. And in fact if I check ONE box, I get this:
So, in fact to hide the Panel 1, I can now un-check the first box, and get this:
Note how the panels are in a way "out of sync", since I don't really check, or do anything with the panels on startup, and thus they don't reflect the correct status.
In fact, untill I check, and un-check all 3, then at that point, they all work ok.
So, probably better would be to do this.
On the first page load (and ONLY ONLY first load), I would do this:
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
So, now on first page load - I hide/show the panels based on check box code, and now everything starts out "synced" up correctly
Do try a test blank page with above, but hiding and showing the panels should work.
Do note, that in MANY cases it is better to hide/show the panels and NOT use visibile. The reason for this is that any control marked as visibile = false IS NOT SENT to the browser. If you have some client side JavaScript running, or doing things, they will NOT be able to see, nor reference those panels.
So, in many cases, it is FAR better to hide, and NOT use Visible=false. As noted, this is VERY much a requement if you using client side JavaScript to manipulate such controls.
As a result, our code would now become this:
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
Now, you ONLY need to do the above if you using say JavaScript client side - I just wanted to make clear that using Visible can often be a issue, since as noted visible = false means the control is NOT sent nor rendered browser side - I spent a hard day of bugs learning this when I then started to write a lot of JavaScript.
Since, so far, this looks to be 100% server side code, so you can use .Visible.
but, do cook up a quick tiny test web page - play with above - make sure it works, and then try again on your code.