Question

我在按钮点击时显示或隐藏面板时出现问题。默认情况下，面板是隐藏的，但是我希望在单击按钮后面板显示，现在它对我不起作用。

面板显示的唯一时间是发生另一次回发时，例如当我选择下拉并触发回发时，我的面板将显示。我认为问题在于我使用的是UpdatePanel而且只是部分回复。

以下是我使用AsyncPostBackTrigger作为我的控件（按钮）的代码。

<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>

以下是按钮的代码：

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

这是他们点击按钮后面的代码：

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

    }

这是我的小组：

   <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>

Answer 1

由于您已拥有DOM元素的ID，因此可以使用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>

如何在ASP.Net中单击按钮时显示/隐藏面板

1 个答案: