moe
moe

Reputation: 5249

How to Show/Hide a Panel upon Click of a Button in ASP.Net

I am having issues showing up or hiding a Panel on a button click. By default the panel is hidden but I want the panel to show up once the button is clicked and it is not working for me now.

The only time the panel shows up is when another post-back occurs, like when I select drop down and that triggers a post-back then my panel will show up. I think the issue is that I am using an UpdatePanel and which is only doing a partial post back.

Here is the code where I am using AsyncPostBackTrigger for my control (Button).

<div id="dvGrid" style="padding: 10px; width: 876px">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
               <asp:GridView ID="GridView1" runat="server" Width="870px" OnRowDataBound="RowDataBound"
                    AutoGenerateColumns="False" Font-Names="Arial" Font-Size="11pt" AlternatingRowStyle-BackColor="#C2D69B"
                    HeaderStyle-BackColor="green" ShowFooter="True" OnPageIndexChanging="OnPaging"
                    DataKeyNames="DEV_SK">
                    <AlternatingRowStyle BackColor="#C2D69B" />
                    <Columns> 
                       <asp:TemplateField ItemStyle-Width="30px" HeaderText="ID" Visible = "false">
                            <ItemTemplate>
                                <asp:Label ID="lblDEV_SK" runat="server" Text='<%# Eval("DEV_SK")%>'></asp:Label>
                            </ItemTemplate>
                            <ItemStyle Width="10px" />
                        </asp:TemplateField>
                </asp:GridView>
             </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btnUpdate"  />
            </Triggers>
        </asp:UpdatePanel>  
    </div>

and here is the the code for the button:

<asp:Button ID="btnUpdate" runat="server" Text="SAVE" OnClick = "Update" Visible = "true" 
Font-Bold="False" Font-Size="Large" Height="30px" Width="157px"/>

and here is the code behind once they click the button:

 protected void Update(object sender, EventArgs e)
    {
        Panel1.Visible = true;
        //do somthing else

    }

and here is my Panel:

   <div>
       <asp:Panel ID="Panel1" runat="server" BorderStyle="Groove" Height="109px" Visible="false"
            Width="870px" BackColor="#FFFFE1">
            <asp:Label ID="Label2" runat="server" Text="SIGN" Font-Bold="True" 
                ForeColor="#FF3300"></asp:Label>
            <br />
            <br />

            <asp:Label ID="lblUID" runat="server" Text="User ID:"></asp:Label>
            <asp:TextBox ID="txtUID" runat="server" Height="22px" Width="145px"></asp:TextBox> &nbsp;&nbsp;
            &nbsp;&nbsp;

            <asp:Label ID="lblPass" runat="server" Text="Password:"></asp:Label>
            <asp:TextBox ID="txtPass" runat="server" Height="23px" TextMode="Password" style="margin-top: 0px"></asp:TextBox>
            <br />
            <br />
            &nbsp;<asp:Button ID="btnSubmit" runat="server" Text="Submit" Width="183px"
                onclick="btnSubmit_Click" 
                OnClientClick="return confirm('Are you sure you want to submit?');" 
                Font-Bold="False" Font-Size="Medium" Height="30px" 
                style="margin-right: 1px" />
            <br />
        </asp:Panel>

    </div>

Upvotes: 0

Views: 14445

Answers (1)

Mihir Kale
Mihir Kale

Reputation: 1118

Since you already have the IDs of you DOM elements, you can achieve this by using JQuery.

<head>
<script src='https://code.jquery.com/jquery-1.12.4.min.js' >
<script>

  $(document).ready( function() {
     $('#btnSubmit').click(function(e) {
          $('#Panel1').toggle(); //Show or Hide
          e.preventDefault(); 
     });

  });
</script>

Upvotes: 0

Related Questions