showing a hidden panel in OnTextChanged event

Question

User351619809 posted

I want to show a hidden panel when a user tabs out of a text box. I want to do this asynchronously. I wrote the following code. In below code my <asp:Panel is on another part of the page. Its not right above the updatePanel. I just put the panel above my textbox code for simplicity.

<form id="form1" runat="server" method="post">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

         <asp:Panel runat="server" ID="pnlTest" Visible="false">
            This is a test

        </asp:Panel>
         <asp:UpdatePanel ID="up1" runat="server">
           <ContentTemplate >
        <asp:TextBox ID="txtTest" runat="server" OnTextChanged="txtestChanged" AutoPostBack="true"></asp:TextBox>
               </ContentTemplate>
               <Triggers>
       <asp:AsyncPostBackTrigger ControlID ="txtTest" />
      </Triggers>
             </asp:UpdatePanel>
       
    </form>

any help will be greatly appreciated.

Answer 1

User-1716253493 posted

AFAIK, the textbox should be outside update panel, then the panel is inside update panel. The code similar when you are not using ajax.

Answer 2

User-939850651 posted

Hi anjaliagarwal5,

Async post back in web forms still proceeds the whole page life cycle as if it's a traditional post. the difference is only the updated content inside target update panel that will be sent in response.

Therefore, it will not affect the content outside the UpdatePanel. If you need to achieve the requirements you mentioned, you need to change it to a full page postback ( PostBackTrigger ).

Page:
<form id="form1" runat="server" method="post">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <asp:Panel runat="server" ID="pnlTest" Visible="false">
                    This is a test
                </asp:Panel>
        <asp:UpdatePanel ID="up1" runat="server" >
            <ContentTemplate>
                <asp:TextBox ID="txtTest" runat="server" OnTextChanged="txtestChanged" AutoPostBack="true"></asp:TextBox>
            </ContentTemplate>
            <Triggers>
                <asp:PostBackTrigger ControlID="txtTest" />
            </Triggers>
        </asp:UpdatePanel>
    </form>

Code behind:
 protected void txtestChanged(object sender, EventArgs e)
        {
            pnlTest.Visible = true;
        }

Or put the panel in another UpdatePanel and use the update() function.

    <form id="form1" runat="server" method="post">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel runat="server" ID="upPanel" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Panel runat="server" ID="pnlTest" Visible="false">
                    This is a test
                </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="up1" runat="server" >
            <ContentTemplate>
                <asp:TextBox ID="txtTest" runat="server" OnTextChanged="txtestChanged" AutoPostBack="true"></asp:TextBox>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="txtTest" EventName="TextChanged" />
                <%--<asp:PostBackTrigger ControlID="txtTest" />--%>
            </Triggers>
        </asp:UpdatePanel>
    </form>

Code behind:
 protected void txtestChanged(object sender, EventArgs e)
        {
            pnlTest.Visible = true;
            upPanel.Update();
        }

Best regards,

Xudong Peng