c# - trigger - ASP.NET Muestra el mensaje "Cargando..." mientras el panel de actualización se está actualizando

updatepanel c#

Question

Hola, estoy creando una aplicación ASP.NET/C#. Tengo un panel de actualización que lleva tiempo actualizar. ¿Hay alguna manera de mostrar un mensaje "Cargando ... Espere" durante el tiempo de los cálculos?

Actualmente estoy usando la animación del panel AJAX que aparece y desaparece gradualmente, para hacer que el panel desaparezca mientras se calcula y luego reaparece cuando termine. Pero eso no es muy práctico.

Necesito mostrar un mensaje si es posible.

Gracias por cualquier ayuda.

Este es el código de mi panel:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click"/>
    </Triggers>
    <ContentTemplate>
        //Contents goes here
    </ContentTemplate>
</asp:UpdatePanel>

Y el extensor de animación Ajax Panel.

<ajaxToolkit:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server" TargetControlID="UpdatePanel1">
    <Animations>
        <OnUpdating>
            <FadeOut Duration="1" Fps="20" />
        </OnUpdating>
        <OnUpdated>
            <FadeIn Duration="2" Fps="20" />
        </OnUpdated>
    </Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>

Answer 1

Puedes usar el código como abajo cuando

usando la imagen como carga

<asp:UpdateProgress id="updateProgress" runat="server">
    <ProgressTemplate>
        <div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
            <asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/images/ajax-loader.gif" AlternateText="Loading ..." ToolTip="Loading ..." style="padding: 10px;position:fixed;top:45%;left:50%;" />
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

usando texto como carga

<asp:UpdateProgress id="updateProgress" runat="server">
    <ProgressTemplate>
        <div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
            <span style="border-width: 0px; position: fixed; padding: 50px; background-color: #FFFFFF; font-size: 36px; left: 40%; top: 40%;">Loading ...</span>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

Answer 2

Puedes usar el control UpdateProgress :

También vea: ajax "cargando" el ícono con los postbacks de UpdatePanel

Answer 3

Tutorial impresionante: 3 formas diferentes de mostrar el progreso en una aplicación AJAX de ASP.NET