web-dev-qa-db-fra.com

Désactiver le bouton asp.net après le clic pour empêcher le double-clic

J'ai un bouton ASP.NET que je dois désactiver après que l'utilisateur a cliqué dessus pour empêcher le double-clic. Une fois la soumission terminée, il doit être réactivé. Est-ce que quelqu'un peut m'aider avec ça?

javascriptjqueryasp.netasp.net-ajax
38
Goutham

J'ai trouvé this , et ça marche:

btnSave.Attributes.Add(
    "onclick", 
    "this.disabled = true;" + ClientScript.GetPostBackEventReference(btnSave, null) + ";");
31
gkneo

Voici une solution qui fonctionne pour l’objet bouton asp.net. Sur le front-end, ajoutez ces attributs à votre définition asp: Button:

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

Dans le back-end, dans l'appel de la méthode du gestionnaire d'événements click, ajoutez ce code à la fin (de préférence dans un bloc finally)

myButton.Enabled = true;
29
kmonty

Cochez ce lien, le moyen le plus simple et il ne désactive pas les validations.

http://aspsnippets.com/Articles/Disable-Button-before-Page-PostBack-in-ASP.Net.aspx

Si vous avez par exemple.

  <form id="form1" runat="server">
      <asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Clicked" />
  </form>

Ensuite, vous pouvez utiliser

  <script type = "text/javascript">
  function DisableButton() {
      document.getElementById("<%=Button1.ClientID %>").disabled = true;
  }
  window.onbeforeunload = DisableButton;
  </script>

Pour désactiver le bouton si et après la validation a réussi, tout comme la page effectue une publication sur le serveur.

15
mohan padmanabhan

Si vous souhaitez empêcher le double-clic en raison d'un code côté serveur de réponse lente, cela fonctionne correctement:

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

Essayez de placer un Threading.Thread.Sleep (5000) sur l'événement _Click () sur le serveur et vous verrez que le bouton est désactivé pour le moment où le serveur traite l'événement click.

Pas besoin de code côté serveur pour réactiver le bouton non plus!

7
Shaun Keon

Si tout le monde s'en soucie, j'ai trouvé ce message au départ, mais j'utilise la version de validation d'ASP.NET sur la page. Les solutions fonctionnent, mais désactivez le bouton même s’il a été validé. Vous pouvez utiliser le code suivant pour le rendre ainsi, il ne désactive le bouton que s'il réussit la validation de la page.

<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Submit" OnClientClick=" if ( Page_ClientValidate() ) { this.value='Submitting..'; this.disabled=true; }" UseSubmitBehavior="false" />
3
eqiz
<asp:Button ID="btnSend" runat="server" Text="Submit"  OnClick="Button_Click"/>

        <script type = "text/javascript">
            function DisableButton()
            {
                document.getElementById("<%=btnSend.ClientID %>").disabled = true;
            }
            window.onbeforeunload = DisableButton;
        </script>
3
Reshma

Vous pouvez utiliser le client onclick event pour le faire:

yourButton.Attributes.Add("onclick", "this.disabled=true;");
3
Federico González

Il suffit d’ajouter 2 attributs pour le bouton asp:

OnClientClick="this.disabled='true';"  UseSubmitBehavior="false"

par exemple.

<asp:Button ID="Button1" runat="server" Text="TEST" OnClientClick="this.disabled='true';"  UseSubmitBehavior="false" CssClass="button-content btnwidth" OnClick="ServerSideMethod_Click"  />

Pour plus de détails:

https://bytes.com/topic/asp-net/answers/918280-disable-button-click-prevent-multiple-postbacks

2
Sachin Karche

Désactivez le bouton de l'événement OnClick, puis réactivez-le sur le gestionnaire d'événements de rappel AJAX. Voici comment je le fais avec jQuery.

<script>
$(document).ready(function() {

    $('#buttonId').click(function() {
         $(this).attr('disabled', 'disabled');
         callAjax();
    });

});

function callAjax()
{
    $.ajax({
      url: 'ajax/test.html',
      success: function(data) {
         //enable button
         $('#buttonId').removeAttr('disabled');

      }
    });
}
</script>
2
rick schott

en utilisant jQuery:

$('form').submit(function(){
    $(':submit', this).click(function() {
        return false;
    });
});
1
mtntrailrunner

Cette solution fonctionne si vous utilisez des validateurs asp.net:

<script language="javascript" type="text/javascript">
function disableButton(sender,group)
{
    Page_ClientValidate(group);
    if (Page_IsValid)
    {
        sender.disabled = "disabled";
        __doPostBack(sender.name, '');
    }
}</script>

et changez le bouton:

<asp:Button runat="server" ID="btnSendMessage" Text="Send" OnClick="btnSendMessage_OnClick" OnClientClick="disableButton(this,'theValidationGroup')" CausesValidation="true" ValidationGroup="theValidationGroup" />
1
Matteo Conta

J'aime désactiver le bouton et appeler une publication, afin que le code derrière soit toujours exécuté une fois le bouton désactivé.

voici comment j'attache du code derrière:

btnProcess.Attributes.Add("onclick", " this.disabled = true; __doPostBack('btnProcess', ''); return false;")

Puis réactivez le bouton dans le code derrière:

btnProcess.Enabled = True
1
Taylor Brown

Essayez ceci, cela a fonctionné pour moi

<asp:Button ID="button" runat="server" CssClass="normalButton" 
Text="Button"  OnClick="Button_Click" ClientIDMode="Static" 
OnClientClick="this.disabled = true; setTimeout('enableButton()', 1500);" 
UseSubmitBehavior="False"/>

Ensuite 

<script type="text/javascript">
function enableButton() {
document.getElementById('button').disabled = false;
}
</script>

Vous pouvez ajuster le délai dans "setTimeout"

1
formidablecoder

Cela fonctionne avec un bouton HTML normal.

    <input id="Button1"
    onclick="this.disabled='true';" type="button"
    value="Submit" name="Button1"
    runat="server" onserverclick="Button1_Click">

Le bouton est désactivé jusqu'à la fin de la publication, empêchant ainsi le double-clic.

0
FJT
<script type = "text/javascript">
function DisableButtons() {
    var inputs = document.getElementsByTagName("INPUT");
    for (var i in inputs) {
        if (inputs[i].type == "button" || inputs[i].type == "submit") {
            inputs[i].disabled = true;
        }
    }
}
window.onbeforeunload = DisableButtons;
</script>
0
Imad

Vous pouvez le faire avec javascript. dans votre tag form, onsubmit="javascript:this.getElementById("submitButton").disabled='true';"

0
steinberg