如何在onclick事件執行代碼後在ImageButton上設置加載gif

我對webdevelopment相當陌生，而且我似乎無法獲取加載gif以顯示，而我在導出後執行代碼。如何在onclick事件執行代碼後在ImageButton上設置加載gif

我的onclick事件在GridView中的Imagebutton上。你能幫我麼？在這裏，我有ImageButtons：

<HeaderTemplate> 
     <asp:ImageButton ID="btnExport" OnClick="btnExport_Click" runat="server" ImageUrl="~/Images/excel.gif" AlternateText="Export top records!"/> 
     <asp:ImageButton ID="btnExportRed" OnClick="btnExportRed_Click" runat="server" ImageUrl="~/Images/excel_red.gif" AlternateText="Export all records!"/> 
</HeaderTemplate>

這是我的代碼背後：

protected void btnExport_Click(object sender, EventArgs e) 
{ 
    try 
    { 
     LoadWaitImage(); 


      [functional code] 

     UnloadWaitImage(); 
    } 
    catch (Exception ex) 
    { 
     lblMessage.Text = ex.Message; 
     upnlMsg.Update(); 
     UnloadWaitImage(); 
    } 
} 


private void LoadWaitImage() 
{ 
    ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "showMyImage", "hideLoading()", true); 
} 

private void UnloadWaitImage() 
{ 
    ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "showMyImage", "hideLoading()", true); 
}

和JS來火：

function showLoading() 
{ 
    document.getElementById('lblMessage').value = ""; 
    document.getElementById('ucMarketing_btnSearch').disabled = true; 
    document.getElementById('btnClearFilters').disabled = true; 
    document.getElementById('imgSaveToSegments').disabled = true; 
    document.getElementById('divLoadingImg2').style.display = ""; 
} 
function hideLoading() 
{ 
    document.getElementById('ucMarketing_btnSearch').disabled = false; 
    document.getElementById('btnClearFilters').disabled = false; 
    document.getElementById('imgSaveToSegments').disabled = false; 
    document.getElementById('divLoadingImg2').style.display = "none"; 
}

來源

2012-08-29 Ana Demeny

'LoadWaitImage'正在調用'hideLoading（）'，是一個錯字？ –

是的，它是：私人無效LoadWaitImage（） ScriptManager.RegisterClientScriptBlock（this.Page，this.GetType（），「showMyImage」，「showLoading（）」，true）; （） } private void UnloadWaitImage（） ScriptManager.RegisterClientScriptBlock（this.Page，this.GetType（），「hideMyImage」，「hideLoading（）」，true）; } –

另外，這裏是包含圖像的div：

它不在GridView中，但在同一個UpdatePanel中 –

我不認爲你目前的想法是要工作。呈現HTML的客戶端瀏覽器與運行代碼隱藏的服務器完全分離。當單擊ImageButton時，瀏覽器會同步將HTML表單發佈到服務器，並等待響應。此響應將在事件處理程序方法結束後的一段時間發送。

如果您想在客戶端執行某些操作（如顯示和隱藏圖像），則需要使用AJAX異步執行操作。通過UpdatePanel控件，ASP.Net WebForms使這非常簡單。

爲了得到這個工作，你需要用UpdatePanel控件圍繞你想要的頁面區域更改。然後添加一個或多個要更新的觸發器。最後使用UpdateProgress控件顯示您的加載圖像。事情是這樣的：

<asp:GridView runat="server"> 
    ... 
    <HeaderTemplate> 
     <asp:ImageButton ID="btnExport" OnClick="btnExport_Click" runat="server" 
      ImageUrl="~/Images/excel.gif" AlternateText="Export top records!"/> 
     <asp:ImageButton ID="btnExportRed" OnClick="btnExportRed_Click" runat="server" 
      ImageUrl="~/Images/excel_red.gif" AlternateText="Export all records!"/> 
    </HeaderTemplate> 
</asp:GridView> 

<asp:UpdatePanel ID="Update" runat="server"> 
    <asp:UpdateProgress ID="Progress" runat="server"> 
     <ProgressTemplate> 
     <!-- HTML/ASP for your image --> 
     </ProgressTemplate> 
    </asp:UpdateProgress> 
    <Triggers> 
     <asp:AsyncPostBackTrigger ControlID="btnExport" EventName="Click" /> 
    </Triggers> 
</asp:UpdatePanel>

如果你想要做更多的客戶端的東西，有見this answer。

來源

2012-08-29 08:46:49

非常感謝您的幫助。我試圖在UpdatePanel中包裝我的按鈕，但似乎AsyncPostBack不喜歡Response.BinaryWrite。當我做出口業務時，我無法擺脫這種情況。 –

好的，我不知道你在做什麼。我想你會需要一些客戶端代碼（例如一個jQuery點擊事件處理程序）在請求發送到服務器之前顯示加載映像。不過，我不確定在這種情況下動畫是否會繼續。 –

是的，這正是我解決問題的方法。看到我的答案:)。非常感謝 –

最後，我用一個OnClientClick事件來啓動我的Js。 OnClick事件，爲導出執行我的服務器端功能。在我的導出功能中，我添加了一個唯一的Cookie令牌。我將該令牌存儲在隱藏字段中，並且每秒更改一次。在Js函數中，我啓動計時器並檢查cookie以匹配令牌。如果是這樣，我隱藏我的加載圖像。

我在這裏找到了這個解決方案： Detect when browser receives file download。

下面是一個示例： http://geekswithblogs.net/GruffCode/archive/2010/10/28/detecting-the-file-download-dialog-in-the-browser.aspx。

來源

2012-08-31 08:11:42

如何在onclick事件執行代碼後在ImageButton上設置加載gif

回答

相關問題