asp.net - 送信ボタンを無効にし、ASP.NETでの送信時に読み込みアニメーションを追加する方法

Question

ユーザーがフォームを複数回送信しないようにし、ASP.NETでフォームをクリックした後に送信ボタンを無効にする方法を知る必要があります。ボタンを無効にした後、読み込みアニメーションを追加することはできますか？OnClientClickイベントを試してボタンを無効にしましたが、ページが変更なしでポストバックするOnClickイベントをキャンセルしました。どんな手掛かり？

Answer 1

これを試して：

protected void Page_Load(object sender, EventArgs e)
{            
    Page.ClientScript.RegisterOnSubmitStatement(GetType(), "ServerForm",
        "if(this.submitted) return false; this.submitted = true;");
    button.Attributes.Add("onclick", string.Format("this.value='wait...';
        this.disabled=true; {0}", ClientScript.GetPostBackEventReference
        (button, string.Empty)));
}

Answer 2

私が過去に使用した解決策は、クリック後にJavascriptを使用して自身を無効にするSystem.Web.UI.WebControls.Buttonの新しいサブクラスを作成することです。ASP.NETクライアント側の検証コードを上書きしないように注意する必要があることに注意してください。

クリック後に読み込みアニメーションを追加する場合は、クライアント側のJavaScriptを追加して、validateAndDisableScript以下を調整することで、以前に非表示にしたアニメーションアイコンを表示できます。

//
// This is a Button-derived class that will disable itself when it is clicked,
// preventing multiple submits of forms where necessary.
//
public class OneShotButton : System.Web.UI.WebControls.Button
{
    //
    // Javascript that invokes client validation (if enabled), and disables
    // the containing HTML element.  This script doesn't do the postback, so
    // that code has to be appended during OnPreRender.
    //
    private const string validateAndDisableScript =
        @"if ( typeof(Page_ClientValidate) == 'function' )" +
        @"{" +
        @"  if ( !Page_ClientValidate() ) { return false; }" +
        @"}" +
        @"this.disabled = true;";   // postback code follows


    //
    // Override OnPreRender to set Javascript associated with the onclick
    // event for this button.  Most of the Javascript is prebuilt, but we
    // have to dynamically generate the postback code.
    //
    protected override void OnPreRender(System.EventArgs e)
    {
        string onClick = string.Format("{0}{1};",
            validateAndDisableScript,
            Page.ClientScript.GetPostBackEventReference(this, string.Empty) 
            );

        Attributes.Add("onclick", onClick);

        base.OnPreRender(e);
    }
}

Answer 3

_endRequest、_beginRequestハンドラーが必要です。コードビハインドでこれを追加します。

public object endRequestHandle { get; set; }

public object beginRequestHandle { get; set; }

aspxページに、次を追加します。

 Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandle);
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandle);
//Function gets called before Ajax request
            function beginRequestHandle(sender, Args) {
                $('#SubmitButton').attr("disabled", true);
                $('#LoadingImage').css("visibility","visible");
            }
    //Function gets called after Ajax request completes
            function endRequestHandle(sender, Args) {
              $('#SubmitButton').attr("enabled", true);
                $('#LoadingImage').css("visibility","invisible");
            }