Hoe de knop Verzenden uit te schakelen en upload-animatie toevoegt bij verzending in ASP.NET

Ik moet weten hoe ik kan voorkomen dat gebruikers het formulier meerdere keren verzenden en de knop Verzenden uitschakelen nadat erop is geklikt in ASP.NET. Is het mogelijk om een ​​laadanimatie toe te voegen nadat de knop is uitgeschakeld? Ik heb de OnClientClick-gebeurtenis geprobeerd om de knop uit te schakelen, maar ik annuleer de OnClick-gebeurtenis die de pagina zojuist zonder enige wijzigingen weergeeft. Enig idee?

1

3 antwoord

Probeer dit:

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)));
}
3
toegevoegd
Getest. Dit is de meest elegante oplossing.
toegevoegd de auteur devXen, de bron

Een oplossing die ik in het verleden heb gebruikt, is het maken van een nieuwe subklasse van System.Web.UI.WebControls.Button die Javascript gebruikt om zichzelf uit te schakelen nadat erop is geklikt. Houd er rekening mee dat u voorzichtig moet zijn om de ASP.NET-clientzijdige validatiecode niet te overschrijven.

Als u na het klikken een loading-animatie wilt toevoegen, kunt u JavaScript aan de client toevoegen om een ​​eerder verborgen animatie-pictogram weer te geven door hieronder validateAndDisableScript aan te passen.

//
// 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);
    }
}
0
toegevoegd

U hebt _endRequest, _beginRequest-handlers nodig. Voeg in de code achter dit toe.

public object endRequestHandle { get; set; }

public object beginRequestHandle { get; set; }

Voeg dit in je aspx-pagina toe:

 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");
            }
0
toegevoegd