如何在onclick事件执行代码时在ImageButton上设置加载gif

how to set a loading gif on ImageButton when the onclick event is executing code behind

本文关键字：ImageButton 设置 加载 gif 代码 onclick 事件 执行      更新时间：2023-09-26

我是网络开发的新手，在执行代码隐藏导出时，似乎无法显示加载gif。

我的onclick事件在网格视图中的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";
 }

我认为你目前的想法行不通。呈现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>

如果你想在客户端做更多的事情，请看看这个答案。

最后，我使用了一个OnClientClick事件来启动我的Js。OnClick事件执行我的服务器端导出功能。在我的导出函数中，我添加了一个唯一的cookie令牌。我将该令牌存储在一个隐藏字段中，并每秒更改一次。在Js函数中，我启动计时器并检查cookie是否与令牌匹配。如果是，我会隐藏我的加载图像。

我在这里找到了这个解决方案：检测浏览器何时接收到文件下载。

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

相关文章：