3

誰かがC＃.netアプリの使用可能なプログレスバーを見たことがあるかどうか疑問に思っています。私のアプリの読み込みには約20〜60秒かかります。ユーザーが待機している間、進行状況バーを表示したいと思います。私はこれを見ましたが、サンプルサイトは機能していないようで、自信を刺激しません。

4

3 に答える 3

4

AJAX UpdateProgress コントロールを使用できます。 

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

アニメーションが必要な場合は、アニメーション化された .gif を「ProgressTemplate」にポップするだけです。

于 2008-10-21T22:34:47.790 に答える
1

私はこのブログ投稿を調べます-それを行う良い方法のようです. 私はそれを自分でテストしていません...

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

于 2008-10-21T05:58:11.860 に答える
1

これを書く必要があるaspxページで、あなた自身が定義する必要がある特定のCSSクラスを追加しました。機能的には、このコードが役立ちます

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

ProgressIndicator と言う関数を次のように定義します。

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

与えられた例では、進行状況インジケーターがモーダルで含まれています。つまり、進行状況インジケーターが実行されている場合、画面で実行される他の操作が無効になります。必要がない場合は、モーダル部分を削除できます。

于 2012-09-14T04:50:57.500 に答える