如何在ASP.Net中單擊按鈕時顯示/隱藏面板

我遇到的問題是按鈕單擊時顯示或隱藏面板。默認情況下面板是隱藏的，但是我希望面板一旦點擊按鈕就顯示出來，現在它不適合我。如何在ASP.Net中單擊按鈕時顯示/隱藏面板

面板出現的唯一時間是當發生另一個回發時，比如當我選擇下拉菜單並觸發後貼時，我的面板將顯示出來。我認爲這個問題是我使用的是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>

來源

2014-01-13 moe

哪裏有實際的'Panel1'控件？ –

Yuriy，我剛在我的初始文章中加入了面板代碼。請看頂部 – moe

所以你的Panel1在你的UpdatePanel之外？ –

既然你已經h爲您的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>

來源

2016-05-31 07:53:47

如何在ASP.Net中單擊按鈕時顯示/隱藏面板

回答

相關問題