Verhindern Sie versehentliches Doppelklicken auf eine Schaltfläche

Question

Ich habe ein paar Steuerelemente, die von ASP.NET-Schaltflächen erben und „onserverclick“ verwenden.

Wenn der Benutzer zweimal klickt, löst die Schaltfläche zwei serverseitige Ereignisse aus.Wie kann ich das verhindern?

Ich habe versucht, „this.disabled=‘true‘“ nach dem Klick (im ‚onclick‘-Attribut) über Javascript zu setzen, aber das blockiert auch das erste Postback.

Answer 1

In diesem Beispiel erfahren Sie, wie Sie die Steuerung beim Postback deaktivieren.Es sollte Ihnen helfen, das zu erreichen, was Sie erreichen möchten.

http://encosia.com/2007/04/17/disable-a-button-control-during-postback/

Answer 2

Sie möchten die Schaltfläche beim Postback nicht unbedingt deaktiviert anzeigen.Sie möchten sicherstellen, dass sie nicht versehentlich zweimal einreichen.Das Deaktivieren oder Ausblenden der Schaltfläche aufgrund von a serverseitig Die Aktion ist bereits zu spät im Spiel.Zu diesem Zeitpunkt ist die zweite Anfrage bereits unterwegs.Sie müssen dies entweder mit Javascript tun oder sicherstellen, dass Ihr serverseitiger Code nicht zweimal ausgeführt wird.

Answer 3

Im Falle eines Updatepanels und einer Schaltfläche innerhalb einer FormView-Vorlage verwende ich den folgenden Ansatz:

<script type="text/javascript">
    // Using that prm reference, hook _initializeRequest
    Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(InitializeRequestBuchung);

    // Abfangen von Mehrfachklicks auf Buttons für asynchrone Postbacks im Updatepanel
    function InitializeRequestBuchung(sender, args) {
        var arrButtonIds = ["ButtonInsert", "ButtonUpdate"];

        // Get a reference to the PageRequestManager.
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if (prm.get_isInAsyncPostBack() & jQuery.inArray(args.get_postBackElement().id, arrButtonIds) > -1) {
            args.set_cancel(true);
        }
    }
</script>

Dadurch wird ein folgendes Postback abgebrochen, wenn derzeit noch ein asynchrones Postback aktiv ist.Funktioniert perfekt.

Answer 4

Jemand anderes hat das vor ein paar Tagen irgendwo hier gesagt, und ich stimme zu – verwenden Sie einfach Javascript verstecken die Schaltfläche, anstatt sie zu deaktivieren;Sie könnten stattdessen ein „Spinner“-Bild anzeigen, das den Benutzer darüber informiert, was vor sich geht.

Answer 5

Anstatt mich zu verstecken, habe ich die Schaltflächen mithilfe von Javascript ausgetauscht.Beim Klicken auf die erste Schaltfläche wird ein weiteres ausgegrautes Bild angezeigt.

Answer 6

Legen Sie die Button-Eigenschaft UseSubmitBehavior auf „false“ fest.Erstellen Sie dann eine OnClientClick-Funktion, die die Schaltfläche deaktiviert.Es würde ungefähr so ​​aussehen:

<script type="text/javascript">
   function disableFunctn(button){
       button.disabled = true;
   }
</script>
<asp:Button ID="button1" UseSubmitBehavior="false" OnClientClick="disableFunctn(this);"/>

schnellster und günstigster Weg:

<asp:Button ID="button1" UseSubmitBehavior="false" OnClientClick="this.disabled=true;"/>

Answer 7

Sie können beispielsweise auch btnSave.Enable = false;wenn die Schaltfläche gedrückt wird und bevor die Verarbeitung für die Schaltfläche in der Click-Event-Routine erfolgt.Wenn Sie es zurücksetzen müssen, damit es aktiviert werden kann, verfügen Sie über eine separate Schaltfläche, die die Schaltfläche zur Wiederverwendung zurücksetzt.

Eine andere Methode besteht darin, die Schaltfläche mit Bestätigung so einzurichten, dass der Benutzer gefragt wird, ob er speichern möchte. Die Schaltfläche sollte beide Male angezeigt werden.

Eine weitere Methode wäre, das erste Vorkommen zu kennzeichnen und dann ein Popup für das zweite einzurichten, um eine zweite oder nachfolgende Verwendung zu überprüfen.