毎回ページがロードされているときにjavascriptを実行する

Question

私のウェブアプリケーションでは、ローディングバーを含むモーダルポップアップがあります。私はこれを実行するには数秒かかる、ボタンをクリックするなど、何秒もかかるコマンドに現れます。

これは現在、1つの複雑さを除いて問題なく動作しています。ユーザーの数は、ページに移動するなどの簡単な作業では減速する可能性があります。

ページが考えられるたびにロードモーダルが表示されるように、どのようなシナリオでハードコードする必要はありませんか。

私のWebアプリケーションは、モーダルコードを含むマスターページを使用しています。

おかげ

スクリプト

function ShowLoading() { 
    $('#modalLoading').modal({ backdrop: 'static', keyboard: false, show: true }); 
} 

function HideLoading() { 
    $('#modalLoading').modal('hide'); 
} 

ASPX

<div id="modalLoading" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-body"> 
       <h2> 
        Please Wait...</h2> 
       <div class="progress"> 
        <div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 100%"> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

C＃クラス

public void loadingAlert() 
{ 
    var page = HttpContext.Current.CurrentHandler as Page; 
    page.ClientScript.RegisterStartupScript(this.GetType(), "alert", "$(function() { ShowLoading(); });", true); 
} 

Answer 1

このようなあなたのJavaScriptでBeginRequestHandlerとEndRequestHandlerセット：

$(document).ready(function() { 
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler); 
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 
}); 

function BeginRequestHandler(sender, args) { 
    var postBackId = args._postBackElement.id; 

    // Here you can add some exceptions if you want 
    if (postBackId != "control_exception_1" && postBackId != "control_exception_2") { 
     ShowLoading(); 
    } 
} 

function EndRequestHandler(sender, args) { 
    HideLoading(); 
} 

最小限のASP.NETコントロール：formにrunatサーバー、ScriptManagerとUpdatePanel。 UpdatePanelのUpdateModeをConditional（UpdatePanelを起動するコントロールのIDをTriggersに設定）またはAlways（Triggers要素を削除できます）に設定することができます。

<form id="form" runat="server"> 
    <asp:ScriptManager ID="scriptManager" runat="server"></asp:ScriptManager> 

    <asp:UpdatePanel ID="updatePanel" UpdateMode="Conditional" runat="server"> 
     <ContentTemplate> 
      <%-- Your elements --%> 
      <%-- Your buttons --%> 
     </ContentTemplate> 
     <Triggers> 
      <asp:PostBackTrigger ControlID="btn_id" /> 
     </Triggers> 
    </asp:UpdatePanel> 
</form> 

Answer 2

FORMあなたはPage.ClientScript.RegisterOnSubmitStatement(this.GetType(), "alert", "$(function() { ShowLoading(); });");を使用する必要が

SUBMIT。

これを、基本クラスまたはマスターページの 'Page Init'または 'Page Render'イベントに入れ、すべてのaspxページをこの基本クラスに拡張します。この場合

AJAX要求

あなたはdocumentオブジェクトでjQueryのイベントajaxSendをattatch shoud。これをあなたのマスターページに入れてください：

$(document).ajaxSend(function() { 
    ShowLoading(); 
});