Salve a tutti,
nella mia applicazione web sto cercando di inserire un'animazione che mi indichi che la pagina è in caricamento. Mi spiego meglio, vorrei che alla pressione di un pulsante mi appaia la scritta "loading" e che scompaia dopo aver creato e scaricato il file.
Con il codice postato sotto, al click appare il div, mentre a download avvenuto non scompare.
Come posso risolvere la questione?
Ringrazio in anticipo
Saluti
Posto di seguito il codice:
CODICE LATO SERVER
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
Dim script As String = "$(document).ready(function () { $('[id*=btnSubmit]').click(); });"
ClientScript.RegisterStartupScript(Me.GetType, "load", script, True)
End If
End Sub
Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs)
' Add Fake Delay to simulate long running process.
DtaRicerca.SelectCommand = New SqlCommand("SP1", Connetti)
DtaRicerca.SelectCommand.CommandType = CommandType.StoredProcedure
DtaRicerca.SelectCommand.Parameters.AddWithValue("@parametro1", parametro1)
DtaRicerca.SelectCommand.Parameters.AddWithValue("@parametro2", parametro2)
NomeReport = Ddlnome.SelectedItem.Text & "_PROVA.xls"
DstRicerca = New DataSet
DstRicerca.Clear()
DtaRicerca.Fill(DstRicerca, "TABELLA")
Connetti.Close()
Dim grid As New DataGrid ' dichiara la grid
SetGridLayout(grid) ' chiamo la routine che imposta alcune proprietà di visualizzazione della griglia
grid.DataSource = DstRicerca
grid.DataBind()
Response.Clear()
Response.ContentType = "application/vnd.ms-excel"
Response.ContentEncoding = System.Text.Encoding.UTF8
Response.AddHeader("Content-Disposition", "attachment; filename=" & NomeReport & "")
Me.EnableViewState = False
' creo l'HtmlTextWriter su cui renderizzo la griglia
Dim tw As New System.IO.StringWriter
Dim hw As New System.Web.UI.HtmlTextWriter(tw)
grid.RenderControl(hw)
' ottiene la stringa HTML dallo stream, e lo manda al browser, per essere interpretato da Excel
Dim str_tw As String = tw.ToString()
Response.Write(str_tw)
Response.Flush()
Response.Close()
End Sub
LATO CLIENT
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="VB.aspx.vb" Inherits="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.modal
{
position: fixed;
top: 0;
left: 0;
background-color: black;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading
{
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
$('form').live("submit", function () {
ShowProgress();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Button ID="btnSubmit" runat="server" Text="Load Customers"
OnClick="btnSubmit_Click" />
<hr />
<div class="loading" align="center">
Loading. Please wait.<br />
<br />
<img src="loader.gif" alt="" />
</div>
</form>
</body>
</html>
