How to show and hidden Panel with button?

3 Answers 7 Views

PanelBar

Matthew asked on 12 Sep 2025, 03:24 AM | edited on 12 Sep 2025, 03:45 AM

I am implementing a one time password with google authenticator for login page. After checking the user id and password is correct, I need to hidden the login box and show the QR code, OTP textbox and submit button. I saw sample using Panel.visible = true/false to switch. It is work in Page_Load to set default Panel_GoogleAuth.visible = false, but it is not work in the login button onClick event. It can't show the Panel_GoogleAuth and just hidden the login button but not the whole Panel_Login. Does anyone know why?

My reference: Sample

aspx:

<asp:Panel ID="Panel_GoogleAuth" runat="server" Font-Names="Arial" Font-Size="12pt" HorizontalAlign="Center" Width="1024px">
    <div class="row">
        <div class="col-3"></div>

        <div class="col-5">
            <fieldset class="TOTP">
                <asp:Label ID="lblScanQRCode" runat="server" Style="padding-top: 4px">Sceen the QR Code in Google Authenticator</asp:Label>
                <br />

                <asp:Image ID="imgQRCode" runat="server" Width="200" Height="200" />
                <asp:HiddenField ID="hfSecretKey" runat="server" />
                <br />
                <asp:TextBox ID="txtOTP" runat="server" placeholder="Enter One-Time-Password"></asp:TextBox>
                <asp:Button ID="btnVerify" runat="server"Text="Verify OTP" />
                <br /><br />
                <asp:Label ID="lblMessage" runat="server"></asp:Label>
            </fieldset>
        </div>
    </div>
</asp:Panel>


<telerik:RadAjaxPanel ID="StaffPanel" runat="server" Width="99%">
    <div id="wrap-content">
        <asp:Panel ID="Panel_Login" runat="server" Font-Names="Arial" Font-Size="12pt" HorizontalAlign="Center" Width="1024px">
            <asp:Login ID="LoginUser" Class="Login" runat="server" EnableViewState="false" RenderOuterTable="false">
                <div class="accountInfo">
                    <div class="row">
                        <div>
                            <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">Staff ID:</asp:Label>
                        </div>
                        <div>
                            <asp:TextBox ID="UserName" runat="server" CssClass="textEntry" Width="114%" Height="20"></asp:TextBox>
                        </div>
                    </div>

                    <div class="row">
                        <div>
                            <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password" Style="padding-top: 4px">Password</asp:Label>
                        </div>
                        <div>
                            <asp:TextBox ID="Password" runat="server" CssClass="passwordEntry" TextMode="Password" Width="114%" Height="20"></asp:TextBox>
                        </div>
                    </div>

                    <div class="row">
                        <telerik:RadButton ID="btnLogin" runat="server" Text="Login" OnClick="RadButton_LoginCheck_Click" RenderMode="Lightweight" Width="93%" Font-Size="X-Large" Skin="Silk" Height="35px" Font-Names="Arial"></telerik:RadButton>
                    </div>
                </div>
            </asp:Login>
        </asp:Panel>
    </div>
</telerik:RadAjaxPanel>

aspx.vb:

Protected Sub btnLogin_Click(sender As Object, e As System.EventArgs) Handles btnLogin.Click
    If staffIDRegex.Match(checkStaffId).Success Then
        Panel_Login.Visible = False
        Panel_GoogleAuth.Visible = True
    End If
End Sub

3 Answers, 1 is accepted

answered on 12 Sep 2025, 04:27 AM

Hi Mattew,

Your btnLogin click is doing a Telerik AJAX postback that only updates the content inside the RadAjaxPanel. Your GoogleAuth panel is outside that RadAjaxPanel, so even though you set Panel_GoogleAuth.Visible = True on the server, the client never gets an updated DOM for it. You’re also likely resetting visibility in Page_Load on each postback.

For visibility changes to reflect on the client, both Panel_Login and Panel_GoogleAuth must be within the same AJAX update region (e.g., the same <telerik:RadAjaxPanel> or properly configured <telerik:RadAjaxManager>). If only one is inside the AJAX region or the AJAX settings are incomplete, changes won't appear as expected.

Example:

<telerik:RadAjaxPanel ID="StaffPanel" runat="server">
    <asp:Panel ID="Panel_Login" runat="server">...</asp:Panel>
    <asp:Panel ID="Panel_GoogleAuth" runat="server" Visible="false">...</asp:Panel>
</telerik:RadAjaxPanel>

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
  If Not IsPostBack Then
    Panel_GoogleAuth.Visible = False
    Panel_Login.Visible = True
  End If
End Sub

Additional Notes:

Invisible Controls and AJAX: If a control is not visible at the time of the AJAX request, it cannot be updated unless it is inside a visible container. Both initiator and updated controls must be rendered on the page for AJAX updates to work.
Default Visibility: Setting Panel_GoogleAuth.Visible = False in Page_Load is correct for the initial state, but remember that any visibility logic in Page_Load should be inside If Not IsPostBack to avoid overwriting changes on postback.

https://www.telerik.com/products/aspnet-ajax/documentation/knowledge-base/ajaxify-invisible-controls

Regards,
Rumen
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!

Matthew

commented on 12 Sep 2025, 07:09 AM | edited

Oh I see, now I put it back into RadAjaxPanel. I found what's wrong with it. It is because the login button is telerik:RadButton not a asp:button. How can I hidden the panel in radbutton onclick event, without visible=fasle ?

answered on 12 Sep 2025, 11:22 AM

You can achieve the same scenario with RadButton, e.g.

ASPX

        <telerik:RadAjaxPanel ID="StaffPanel" runat="server" Width="99%">
            <div id="wrap-content">

                <asp:Panel ID="Panel_Login" runat="server" Font-Names="Arial" Font-Size="12pt"
                    HorizontalAlign="Center" Width="1024px">
                    <asp:Login ID="LoginUser" runat="server" EnableViewState="false" RenderOuterTable="false">
                        <LayoutTemplate>
                            <div class="accountInfo">
                                <div class="row">
                                    <div>
                                        <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">Staff ID:</asp:Label>
                                    </div>
                                    <div>
                                        <asp:TextBox ID="UserName" runat="server" CssClass="textEntry" Width="114%" Height="20"></asp:TextBox>
                                    </div>
                                </div>

                                <div class="row">
                                    <div>
                                        <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password">Password</asp:Label>
                                    </div>
                                    <div>
                                        <asp:TextBox ID="Password" runat="server" CssClass="passwordEntry"
                                            TextMode="Password" Width="114%" Height="20"></asp:TextBox>
                                    </div>
                                </div>

                                <div class="row">
                                    <telerik:RadButton ID="btnLogin" runat="server" Text="Login"
                                        OnClick="btnLogin_Click"
                                        RenderMode="Lightweight" Width="93%" Font-Size="X-Large"
                                        Height="35px" Font-Names="Arial">
                                    </telerik:RadButton>
                                </div>
                            </div>
                        </LayoutTemplate>
                    </asp:Login>
                </asp:Panel>

                <asp:Panel ID="Panel_GoogleAuth" runat="server" Font-Names="Arial" Font-Size="12pt"
                    HorizontalAlign="Center" Width="1024px" Visible="false">
                    <div class="row">
                        <div class="col-3"></div>
                        <div class="col-5">
                            <fieldset class="TOTP">
                                <asp:Label ID="lblScanQRCode" runat="server">Scan the QR Code in Google Authenticator</asp:Label>
                                <br />
                                <asp:Image ID="imgQRCode" runat="server" Width="200" Height="200" />
                                <asp:HiddenField ID="hfSecretKey" runat="server" />
                                <br />
                                <asp:TextBox ID="txtOTP" runat="server" placeholder="Enter One-Time-Password"></asp:TextBox>
                                <asp:Button ID="btnVerify" runat="server" Text="Verify OTP" />
                                <br />
                                <br />
                                <asp:Label ID="lblMessage" runat="server"></asp:Label>
                            </fieldset>
                        </div>
                    </div>
                </asp:Panel>
            </div>
        </telerik:RadAjaxPanel>

ASPX.VB

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Panel_Login.Visible = True
            Panel_GoogleAuth.Visible = False
        End If
    End Sub

    Public Sub btnLogin_Click(sender As Object, e As EventArgs)
        ' Example check - replace with your real logic
        Dim tbUser = TryCast(LoginUser.FindControl("UserName"), TextBox)
        Dim tbPass = TryCast(LoginUser.FindControl("Password"), TextBox)
        Dim staffIdOk As Boolean = Not String.IsNullOrEmpty(tbUser.Text) AndAlso Not String.IsNullOrEmpty(tbPass.Text)

        If staffIdOk Then
            ' Hide login, show OTP panel
            Panel_Login.Visible = False
            Panel_GoogleAuth.Visible = True
        Else
            ' Stay on login
            Panel_Login.Visible = True
            Panel_GoogleAuth.Visible = False
        End If
    End Sub

answered on 12 Sep 2025, 11:27 AM

If the goal is not to use Panel.Visible = False/True (which removes the control from the page lifecycle completely), you can switch to client-side hiding or CSS toggling. That way, the controls remain in the markup/DOM, but are just hidden from view.

ASPX

                <asp:Panel ID="Panel_GoogleAuth" runat="server" Font-Names="Arial" Font-Size="12pt"
                    HorizontalAlign="Center" Width="1024px" style="display:none;">
                    <div class="row">
                        <div class="col-3"></div>
                        <div class="col-5">
                            <fieldset class="TOTP">
                                <asp:Label ID="lblScanQRCode" runat="server">Scan the QR Code in Google Authenticator</asp:Label>
                                <br />
                                <asp:Image ID="imgQRCode" runat="server" Width="200" Height="200" />
                                <asp:HiddenField ID="hfSecretKey" runat="server" />
                                <br />
                                <asp:TextBox ID="txtOTP" runat="server" placeholder="Enter One-Time-Password"></asp:TextBox>
                                <asp:Button ID="btnVerify" runat="server" Text="Verify OTP" />
                                <br />
                                <br />
                                <asp:Label ID="lblMessage" runat="server"></asp:Label>
                            </fieldset>
                        </div>
                    </div>
                </asp:Panel>

ASPX.VB

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Panel_Login.Style("display") = "block"
            Panel_GoogleAuth.Style("display") = "none"
        End If
    End Sub

    Public Sub btnLogin_Click(sender As Object, e As EventArgs)
        Panel_Login.Style("display") = "none"
        Panel_GoogleAuth.Style("display") = "block"
    End Sub