Kennen Sie eine gute Seite zu laden progressbar für meine ASP.net-Anwendung?

Question

Nur frage mich, wenn jemand eine brauchbare Fortschrittsbalken für C # .net-Anwendungen gesehen hat. Meine app dauert etwa 20 bis 60 Sekunden zu laden, und ich würde gerne Benutzer einen Fortschrittsbalken zeigen, während sie warten. Ich sah diese aber die Probenort scheint nicht zu funktionieren, die doesn ‚t schafft Vertrauen.

Answer 1

Sie können die AJAX Update Kontrolle .

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

Wenn Sie Animation wollen, alles, was Sie tun müssen, ist ein animiertes GIF in die ‚Progress‘ Pop.

Answer 2

Ich würde diesem Blog-Post Blick in - scheint ein guter Weg, es zu tun. Ich habe es nicht getestet mich ...

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

Answer 3

In aspx Seite müssen Sie dies schreiben, ich habe hinzugefügt bestimmte CSS-Klasse, die Sie selbst definieren müssen, functinality weise dieser Code wird Ihnen helfen,

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

Definieren Sie eine Funktion Progress sagen wie folgt

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();
    }
};

Das Beispiel conatins ein Fortschrittsindikator mit Modal, i: e, wenn Fortschritt Indikator läuft deaktiviert es andere Operationen auf dem screen.You durchgeführt werden kann, den Modal Teil entfernen, wenn Sie es brauchen tut

.