OnclientClick et OnClick ne fonctionnent pas en même temps ?

Question

J'ai un bouton comme le suivant,

<asp:Button ID="pagerLeftButton" runat="server" OnClientClick="disable(this)" onclick="pager_Left_Click" Text="<" />

Quand j'utilise mon bouton comme ça, l'onclick ne se déclenche pas. Lorsque je supprime OnClientClick, alors onclick se déclenche.

Ce que je dois faire, c'est désactiver le bouton pendant le postback et l'activer après la fin du postback.

Edit : Information supplémentaire :

J'ai ajouté un point d'arrêt à mes fonctions de déclenchement dans la partie c# et je débogue, elles ne se déclenchent pas pour sûr. Ces fonctions sont comme

protected void pager_Left_Click(object sender, EventArgs e)
{
//Do smthing.
}
protected void pager_Right_Click(object sender, EventArgs e)
{
//Do smthing.
}

et lorsque je clique sur mon bouton, il est désactivé pendant 1 à 2 secondes puis automatiquement activé, mais je ne sais pas pourquoi il est activé. Je n'ai pas ajouté de partie pour qu'il soit réactivé.

Answer 1

De http://encosia.com/disable-a-button-control-during-postback/ :

L'astuce consiste à utiliser les propriétés OnClientClick et UseSubmitBehavior du contrôle du bouton. Il existe d'autres méthodes, impliquant du code côté serveur pour ajouter des attributs, mais je pense que la simplicité de cette méthode est beaucoup plus intéressante :

<asp:Button runat="server" ID="BtnSubmit"  OnClientClick="this.disabled = true; this.value = 'Submitting...';"   UseSubmitBehavior="false"  OnClick="BtnSubmit_Click"  Text="Submit Me!" />

OnClientClick vous permet d'ajouter un OnClick côté client script. Dans ce cas, le JavaScript désactivera l'élément bouton et changera sa valeur textuelle en un message de progression. Lorsque le postback est terminé, la page nouvellement rendue ramènera le bouton à son état initial sans aucun travail supplémentaire.

L'inconvénient de la désactivation d'un bouton d'envoi du côté client est qu'elle annule l'envoi du navigateur, et donc le postback. La définition de la propriété UseSubmitBehavior à false indique à .NET d'injecter le script client nécessaire pour déclencher le postback de toute façon, au lieu de s'appuyer sur le comportement de soumission du formulaire du navigateur. Dans ce cas, le code qu'il injecte serait :

__doPostBack('BtnSubmit','')

Il est ajouté à la fin de notre code OnClientClick, ce qui nous donne ce HTML rendu :

<input type="button" name="BtnSubmit"  onclick="this.disabled = true; this.value ='Submitting...';__doPostBack('BtnSubmit','')"  value="Submit Me!" id="BtnSubmit" />

Cela donne un bel effet de désactivation du bouton et du texte de traitement, pendant que le postback se termine.

Answer 2

OnClientClick semble être très pointilleux lorsqu'il est utilisé avec OnClick.

J'ai essayé sans succès avec les cas d'utilisation suivants :

OnClientClick="return ValidateSearch();" 
OnClientClick="if(ValidateSearch()) return true;"
OnClientClick="ValidateSearch();"

Mais ils n'ont pas fonctionné. Les suivantes ont fonctionné :

<asp:Button ID="keywordSearch" runat="server" Text="Search" TabIndex="1" 
  OnClick="keywordSearch_Click" 
  OnClientClick="if (!ValidateSearch()) { return false;};" />

Answer 3

Vinay (ci-dessus) a donné une solution de rechange efficace. Ce qui fait que l'événement OnClick du bouton ne fonctionne pas qui suit la fonction de l'événement OnClientClick est que MS l'a définie de telle sorte que, une fois le bouton désactivé (dans la fonction appelée par l'événement OnClientClick), le bouton "honore" cette désactivation en n'essayant pas de terminer l'activité du bouton en appelant la méthode définie par l'événement OnClick.

J'ai passé plusieurs heures à essayer de résoudre ce problème. Une fois que j'ai supprimé l'instruction visant à désactiver le bouton d'envoi (qui se trouvait dans la fonction OnClientClick), la méthode OnClick a été appelée sans autre problème.

Microsoft, si vous écoutez, Une fois que le bouton est cliqué, il doit terminer l'activité qui lui a été assignée, même s'il est désactivé en cours de route. Tant qu'il n'est pas désactivé au moment où il est cliqué, il doit accomplir toutes les méthodes qui lui sont assignées.

Answer 4

Il y a deux problèmes ici :

La désactivation du bouton du côté client empêche le retour en arrière.

Pour y remédier, désactivez le bouton après le JavaScript onclick événement. Une façon simple de le faire est d'utiliser setTimeout comme suggéré par cette réponse .

En outre, le OnClientClick s'exécute même si la validation d'ASP.NET échoue, c'est donc probablement une bonne idée d'ajouter une vérification de la présence de Page_IsValid . Cela garantit que le bouton ne sera pas désactivé si la validation échoue.

OnClientClick="(function(button) { setTimeout(function () { if (Page_IsValid) button.disabled = true; }, 0); })(this);"

Il est plus judicieux de placer tout ce code JavaScript dans sa propre fonction, comme le montre la question :

OnClientClick="disable(this);"

function disable(button) {
    setTimeout(function () {
        if (Page_IsValid)
            button.disabled = true;
    }, 0);
}

La désactivation du bouton du côté client ne le désactive pas du côté serveur.

Pour remédier à ce problème, désactivez le bouton côté serveur. Par exemple, dans le fichier OnClick gestionnaire d'événements :

OnClick="Button1_Click"

protected void Button1_Click(object sender, EventArgs e)
{
    ((Button)sender).Enabled = false;
}

Enfin, n'oubliez pas que le fait d'éviter d'appuyer deux fois sur le même bouton n'empêche pas deux utilisateurs différents de soumettre les mêmes données en même temps. Veillez à en tenir compte du côté du serveur.

Answer 5

Que se passe-t-il si vous ne mettez pas immédiatement le bouton en état d'invalidité, mais que vous le retardez par le biais de setTimeout ? Votre fonction "disable" reviendrait et l'envoi se poursuivrait.