Mostrare una gif di loading

Question

Ciao a tutti, sto avendo difficoltà nel mostrare/nascondere una gif di caricamento mentre effettuo una webrequest per riempire delle combobox ed una gridview.

Fino ad ora ho creato un popup control contenente l'immagine, ma non sto riuscendo a mostrarlo e nasconderlo prima e dopo la funzione chiamata.

Ho usato .ShowOnPageLoad = true; su un altro popup senza problemi, ma questo dovrebbe avere un comportamento diverso.

<dx:ASPxPopupControl ID="pcLoading" runat="server" ClientInstanceName="popUpLoading"
        Height="120px" Modal="True" CloseAction="CloseButton" Width="120px" AllowDragging="True"
        PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter" HeaderText="" CloseButtonImage-Height="0px" ShowHeader="False">
        <ContentCollection>
            <dx:PopupControlContentControl runat="server">
                <img src="Img/tire-load.gif" alt="Loading..." id="loadingGif" height="100" width="100" />
            </dx:PopupControlContentControl>
        </ContentCollection>
    </dx:ASPxPopupControl>

Sono nuovo in asp.net, ho letto di utilizzare eventualmente i controlli updatepanel e updateprogress ma non sono riuscito a farlo funzionare in quanto non mi sembra compatibile con l'impostazione della pagina:
(di seguito l'inizio della pagina, ho provato ad includere tutto tranne il popupcontrol della gif nell'update panel, e il popup della gif nell'updateprogress)

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <%//////////////////////////////////////
    /////        POPUP TEMPI         /////
    //////////////////////////////////////%>
    <dx:ASPxPopupControl ID="pcTempiRicambi" runat="server" ClientInstanceName="popUpTempiRicambi"
        Height="120px" Modal="True" CloseAction="CloseButton" Width="550px" AllowDragging="True"
        PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter" HeaderText="">
        <ContentCollection>
            <dx:PopupControlContentControl runat="server">
                <br />
                <br />

                <table width="100%">
                    <tr height="20px">
                        <td width="15%"style="border:1px solid black; padding-left:10px;">
                            <dx:ASPxLabel ID="lblIdPart" runat="server" Text=""></dx:ASPxLabel>

Oppure di inserire del codice javascript direttamente nella pagina asp, non sono riuscito a far funzionare nessuno di entrambi i metodi di cui ho letto, e credo ci debba essere un metodo per invocare il popup in runtime senza avere tutti i problemi che sto riscontrando.

Answer 1

Salve HeadOwn,

Hai visto la documentazione rilevata per immagini?

ASP.NET_WorkingWithImages

Puoi dare anche un'occhiata a QUESTO thread (dal forum inglese).

---

Microsoft offre questo servizio gratuitamente, per aiutare gli utenti e aumentare il database dei prodotti e delle tecnologie. Il contenuto fornito “as is“ non comporta alcuna responsabilità da parte dell’azienda.

Answer 2

Salve HeadOwn,

Hai visto la documentazione rilevata per immagini?

*link*

Puoi dare anche un'occhiata a *link* thread (dal forum inglese).

---

Microsoft offre questo servizio gratuitamente, per aiutare gli utenti e aumentare il database dei prodotti e delle tecnologie. Il contenuto fornito “as is“ non comporta alcuna responsabilità da parte dell’azienda.

Purtroppo i link sono collegati a pagine che non esistono più o a codici non correlati alla problematica, o almeno credo, tu ci hai trovato qualcosa che dovrebbe aiutarmi?

Answer 3

Ho risolto utilizzando UpdatePanel ed UpdateProgress:

con l'aiuto di un collega ho collegato il contenuto della pagina, alla pagina master, modificando l'asp:content nella pagina:

<asp:Content ID="Content" ContentPlaceHolderID="Content1" runat="server">

ed inserendo nel body di Site.Master

<asp:ScriptManager ID="smCRM" runat="server"></asp:ScriptManager>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="ResultsUpdatePanel" DynamicLayout="true">
            <ProgressTemplate>
                    <img src="Img/loading.gif" style="display: block; margin-left: auto; margin-right: auto; padding-top: 20%;">
            </ProgressTemplate>
        </asp:UpdateProgress>

        <asp:UpdatePanel ID="ResultsUpdatePanel" runat="server" ChildrenAsTriggers="true" UpdateMode="Always">
            <ContentTemplate>
                                    <asp:ContentPlaceHolder ID="Content1" runat="server">
                                    </asp:ContentPlaceHolder>
            </ContentTemplate>
        </asp:UpdatePanel>

Ho sintetizzato il codice utilizzato per renderlo più chiaro qualora potesse tornare utile a qualcun'altro.

Grazie della risposta a chi ha voluto aiutarmi, e buon proseguimento