ASP.NET - Loader en Postback

Loader en Postback

Publicado por Emanuel (6 intervenciones) el 19/01/2018 15:40:53

Hola, buen día!

Estoy desarrollando una aplicación web asp.net en vb y estoy necesitando hacer que al hacerclick en un botón que va a generar una acción especifica que puede demorar, en este tiempo me muestre un loader con un gif, o un mensaje de "Procesando", estoy tratando de hacerlo pero sinceramente no me funciona, alguna idea?!

Probé varias formas usando AJAX pero ninguna me funciono! (Nunca trabaje con AJAX, capaz no logro entenderlo bien)

Saludos!

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 8

Val: 56

Loader en Postback

Publicado por Yamil Bracho (1136 intervenciones) el 19/01/2018 16:02:01

Esto lo puedes hace con javascript. En el OnClientClick del buton llamas a la funcion Javascript que te muestre el gif (Te recomiendo BlockUI)
Y en tu codigo .NET haces un RegisterClientScriptBlock para quitar el gif.
Si, es un poco engrorroso asi que mejor veo que uses JQuery para llamar un servicio en tu pagina donde hagas todo el codigo que deberia ir en el servidor

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Loader en Postback

Publicado por Emanuel (6 intervenciones) el 19/01/2018 17:04:12

Pude hacerlo andar a medias...

EN HTML tengo :

<form id="form1" runat="server" onsubmit="ShowLoading()">

<div class="loader">

      <asp:ScriptManager runat="server">

</asp:ScriptManager>

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">

<ProgressTemplate>

    <div class="modal">

        <div class="center">

            <img alt="" src="../images/basicloader.gif" />

        </div>

    </div>

</ProgressTemplate>

</asp:UpdateProgress>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

    <div  class="center">

        <asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Button1_Click" />

         <asp:Button ID="Button21" runat="server" Text="Button" />

      <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"></asp:DropDownList>

      <asp:ListBox ID="ListBox1" runat="server"></asp:ListBox>

    </div>

</ContentTemplate>

</asp:UpdatePanel>

    </div>

y al final tengo un js

<script type="text/javascript">

    function ShowLoading(e) {

        var div = document.createElement('div');

        var img = document.createElement('img');

        img.src = '../Images/ajax-loader.gif';

        div.innerHTML = "Loading...<br />";

        div.style.cssText = 'position: fixed; top: 30%; left: 40%; z-index: 5000; text-align: center;background-color:transparent;'

        div.appendChild(img);

        document.body.appendChild(div);

        // These 2 lines cancel form submission, so only use if needed.

        window.event.cancelBubble = true;

        e.stopPropagation();

</script>

Mi problema cual es... cuando hago un evento de un click en un botton me anda, pero cuando un dropdownlist hace un postback cuando cambia de valor para llenar un listbox en este caso, no termina de cargar nunca :/

Valora esta respuesta

Comentar

Loader en Postback

Publicado por Emanuel (6 intervenciones) el 19/01/2018 17:24:33

Acabo de ver que si hago otro click en algun botton, me termina bien el postback... como seria el codigo para terminar el script?

si no me equivoco seria el RegisterClientScriptBlock , pero no entiendo que parametros deberia pasarle

Valora esta respuesta

Comentar

Loader en Postback

Publicado por Emanuel (6 intervenciones) el 22/01/2018 17:28:25

Bueno, después de investigar mucho y probar varias veces dejo acá la solución, para todo aquel que necesite un "Loader" al cargar una web o hacer un postback! Mostrando un Div que está oculto y bloqueando la web para que no puedan hacer mas postback de los necesarios.

SOLUCION:

Primero que nada, en nuestro Head, antes de la etiqueta </head> referenciamos :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

En nuestro Body, creamos el Div que vamos a mostrar cuando este cargando o haciendo postback:

<div class="loading" align="center">

    Loading. Please wait.<br />

    <br />

    <img src="../images/ajax-loader.gif" />

</div>

Tener en cuenta que en la etiqueta <img> se debe referenciar el gif que se mostrara como loader, en caso de no querer incluir un gif, simplemente borrar la etiqueta y dejar solamente el texto!

Luego, al final de nuestro archivo html, despues de la etiqueta </html> ponemos :

<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>

Y por ultimo, agregamos en nuestro archivo Css el siguiente estilo:

.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;

    width: 200px;

    height: 100px;

    display: none;

    position: fixed;

    background-color: transparent;

    z-index: 999;

Ojalá les sirva a muchos, y les ahorre el tiempo de investigación que yo gaste, si se ponen a ver el código es super simple! Pero bueno... no nacemos aprendiendo, asique eso estamos haciendo en este momento!!

Saludos!

Valora esta respuesta

Comentar

Refrescar automaticamente