如何顯示加載gif直到刪除？

Question

我有一個repeater這是在update panel刪除按鈕。當我點擊delete button時，它可以刪除，但大約需要10秒。所以我想添加一個加載gif。我初學者加入gif。請幫幫我。感謝您的利益

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
      <ContentTemplate> 
       <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString='<%$ ConnectionStrings:NET2ConnectionString %>' SelectCommand="SELECT * FROM [ProductsRA]"></asp:SqlDataSource> 
       <asp:Repeater ID="rptuser" runat="server" DataSourceID="SqlDataSource1" OnItemCommand="rpr1_ItemCommand" OnItemDataBound="rpr1_ItemDataBound"> 
        <ItemTemplate> 
         <tr> 
          <td class="GridItems"> 
           <asp:ImageButton runat="server" ID="delbtn" ImageUrl="~/images/delete.gif" CommandName="Delete" CommandArgument='<%# Eval("ID") %>' ValidationGroup="ab" ToolTip="Delete User" /></td> 
          <td class="GridItems"><%# DataBinder.Eval(Container.DataItem,"ID") %></td> 
          <td class="GridItems"><%# DataBinder.Eval(Container.DataItem,"ProductName") %></td> 
          <td class="GridItems"><%# DataBinder.Eval(Container.DataItem,"Quantity") %></td> 
          <td class="GridItems"><%# DataBinder.Eval(Container.DataItem,"UnitPrice") %></td> 
          <td class="GridItems"> 
          </td> 
         </tr> 
        </ItemTemplate> 
        <FooterTemplate> 
         </table> 
        </FooterTemplate> 
       </asp:Repeater> 
      </ContentTemplate> 
      <Triggers> 
       <asp:AsyncPostBackTrigger ControlID="rptuser" /> 
      </Triggers> 
     </asp:UpdatePanel> 

這是CS：

protected void rpr1_ItemCommand(object source, RepeaterCommandEventArgs e) 
{ 
    DataSet.ProductsRADataTable dt = new DataSet.ProductsRADataTable(); 
    DataSetTableAdapters.ProductsRATableAdapter adp = new DataSetTableAdapters.ProductsRATableAdapter(); 

    if (e.CommandName == "Delete") 
    { 
     adp.DeleteQuery(Convert.ToInt32(e.CommandArgument)); 
    } 
} 

Answer 1

您可以使用UpdateProgess control這一點。

<asp:UpdateProgress ID="UpdateProgress1" runat="server" 
     AssociatedUpdatePanelID="UpdatePanel1"> 
    <ProgressTemplate> 
     <div class="loading_div">    
      <p>Please wait while we process the request.</p> 
      <img src="/Images/loader.gif" /> 
     </div> 
    </ProgressTemplate> 
</asp:UpdateProgress> 

如果您想在處理請求時阻止頁面，請使用覆蓋div。

.loading_div { 
    position: absolute; 
    color:#fff; 
    background-color: #000; 
    z-index: 2000 !important; 
    opacity: 0.6; 
    overflow: hidden; 
    text-align: center; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    padding-top:20%; 
} 

，它將使這樣當請求被處理：http://jsfiddle.net/codeandcloud/jLmbmLmn/