Panel visibility 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.