Conosci una buona barra di avanzamento del caricamento della pagina per la mia applicazione ASP.net?

Question

Mi chiedo solo se qualcuno ha visto una barra di avanzamento utilizzabile per le app C # .net. La mia app impiega circa 20-60 secondi per caricare e mi piacerebbe mostrare agli utenti una barra di avanzamento mentre attendono. Ho visto questo ma il sito di esempio non sembra funzionare e non funziona ispirare fiducia.

Answer 1

Puoi utilizzare il AJAX UpdateProgress control .

<asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:UpdateProgress runat="server" id="PageUpdateProgress">
        <ProgressTemplate>
            Loading...
        </ProgressTemplate>
    </asp:UpdateProgress>
    <asp:UpdatePanel runat="server" id="Panel">
        <ContentTemplate>
            <asp:Button runat="server" id="UpdateButton" onclick="UpdateButton_Click" text="Update" />
        </ContentTemplate>
    </asp:UpdatePanel>

Se vuoi l'animazione, tutto ciò che devi fare è inserire un .gif animato in "ProgressTemplate".

Answer 2

Vorrei esaminare questo post del blog - sembra un buon modo per farlo. Non l'ho provato io stesso ...

http://mattberseth.com/blog/2008/05/aspnet_ajax_progress_bar_contr.html

Answer 3

Nella pagina aspx devi scrivere questo, ho aggiunto alcune classi CSS che tu stesso devi definire, funzionalità che questo codice ti aiuterà

<asp:Panel ID="ProgressIndicatorPanel" runat="server" Style="display: none" CssClass="modalPopup">
        <div id="ProgressDiv" class="progressStyle">
            <ul class="ProgressStyleTable" style="list-style:none;height:60px">
                <li style="position:static;float:left;margin-top:0.5em;margin-left:0.5em">
                    <asp:Image ID="ProgressImage" runat="server" SkinID="ProgressImage" />
                </li>
                <li style="position:static;float:left;margin-top:0.5em;margin-left:0.5em;margin-right:0.5em">
                    <span id="ProgressTextTableCell"> Loading, please wait... </span>
                </li>
            </ul>
        </div>
    </asp:Panel>

Definisci una funzione come ProgressIndicator come segue

var ProgressIndicator = function (progPrefix) {
    var divId = 'ProgressDiv';
    var textId = 'ProgressTextTableCell';
    var progressCss = "progressStyle";

    if (progPrefix != null) {
        divId = progPrefix + divId;
        textId = progPrefix + textId;
    }

    this.Start = function (textString) {
        if (textString) {
            $('#' + textId).text(textString);
        }
        else {
            $('#' + textId).text('Loading, please wait...');
        }
        this.Center();
        //$('#' + divId).show();
        var modalPopupBehavior = $find('ProgressModalPopupBehaviour');
        if (modalPopupBehavior != null) modalPopupBehavior.show();
    }

    this.Center = function () {
        var viewportWidth = jQuery(window).width();
        var viewportHeight = jQuery(window).height();
        var progressDiv = $("#" + divId);
        var elWidth = progressDiv.width();
        var elHeight = progressDiv.height();
        progressDiv.css({ top: ((viewportHeight / 2) - (elHeight / 2)) + $(window).scrollTop(),
            left: ((viewportWidth / 2) - (elWidth / 2)) + $(window).scrollLeft(), visibility: 'visible'
        });
    }

    this.Stop = function () {
        //$("#" + divId).hide();
        var modalPopupBehavior = $find('ProgressModalPopupBehaviour');
        if (modalPopupBehavior != null) modalPopupBehavior.hide();
    }
};

L'esempio fornito include un indicatore di progresso con Modal, i: e quando l'indicatore di progresso è in esecuzione, disabilita altre operazioni da eseguire sullo schermo. Puoi rimuovere la parte modale se non ti serve.