1

この例を実装しようとしましたが、進行状況が表示されません。私のページには UpdatePanels などが含まれていません。それが理由でしょうか?

私のページ宣言では、次を追加しました。

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

私が追加した head 要素の中に：

<script src="Scripts/jsUpdateProgress.js" type="text/javascript"></script>

追加したフォームタグのすぐ内側に：

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Panel ID="panelUpdateProgress" runat="server" CssClass="updateProgress">
    <asp:UpdateProgress runat="server" ID="UpdateProg1" DisplayAfter="0">
        <ProgressTemplate>
            <div style="position:relative; top:30%; text-align: center;">
                <img src="Processing.gif" style="vertical-align: middle" alt="Processing"/>
                  Processing...
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender runat="server" ID="ModalProgress" TargetControlID="panelUpdateProgress" BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress"/>

追加した end form タグの直後:

<script type="text/javascript">
        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);
        var ModelProgress = '<%= ModalProgress.ClientID %>';
        function beginReq(sender, args) {
            $find(ModalProgress).show();
        }            
        function endReq(sender, args) {
            $find(ModalProgress).hide();
        }
</script>

進行状況が表示されると予想されるボタン:

<asp:Button runat="server" ID="submit" CssClass="multiViewTab" Text="Submit"/>

私のフォームタグには次のものがあるため、そのボタンは間違いなくポストバックします。

onsubmit="return validateForm()"

そして、validateForm が実行されます。また、validateForm は、フォームが有効な場合に submitForm 関数を開始します。これには、Web サービスを呼び出す AJAX への JQuery 呼び出しが含まれます。

テイク 2:

はるかに単純で純粋な AJAX ですが、それでも機能しません。

 </form>
 <script type='javascript'>
   $(document).ready(function() {
    $('body').append('<div id="ajaxBusy"><p><img src="Processing.gif"></p></div>');
    $('#ajaxBusy').css("updateProgress");
  });

  $(document).ajaxStart(function () {
            $('#ajaxBusy').css("z-index", 2);
        }).ajaxStop(function () {
            $('#ajaxBusy').css("z-index", -1);
        });

z-index を使用しているのは、z-index を使用して div を本質的に表示/非表示にするその場しのぎの「ウィザード」があり、z-index を変更しないと進行状況の div が表示されないためです。

4

1 に答える 1

1

MSDN によると、 の内容が更新されると、UpdateProgressはフィードバックを提供します。UpdatePanel

私のページには UpdatePanels などが含まれていません。それが理由でしょうか?

要するに、はい。

ソース: UpdateProgress クラス

上記のリンクには良い例があります。

于 2012-06-18T18:53:20.133 に答える