0

我对 web 开发相当陌生,我似乎无法显示加载 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";
 }
4

2 回答 2

0

我认为你目前的想法不会奏效。呈现 HTML 的客户端浏览器与运行代码隐藏的服务器完全分离。单击 ImageButton 时,浏览器会将您的 HTML 表单同步发布到服务器,并等待响应。此响应将在您的事件处理程序方法结束后的某个时间发送。

如果你想在客户端做一些事情(比如显示和隐藏图像),你将需要使用 AJAX 异步做一些事情。ASP.Net WebForms 通过控件使这变得非常容易UpdatePanel

要使其正常工作,您将使用 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>

如果您想做更多客户端的事情,请参阅此答案

于 2012-08-29T08:46:49.507 回答
0

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

我在这里找到了这个解决方案: Detect when browser received file download

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

于 2012-08-31T08:11:42.673 回答