web-dev-qa-db-fra.com

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

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, onclick ne se déclenche pas. Lorsque je supprime OnClientClick, onclick se déclenche.

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

Modifier: Informations supplémentaires:

J'ai ajouté un point d'arrêt à mes fonctions de tir en partie c # et je débogue, elles ne se déclenchent pas à coup 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 et automatiquement activé, mais je ne sais pas pourquoi il est activé. Je n'ai ajouté aucune partie pour qu'il soit réactivé.

c#asp.netpostbackonclickonclientclick
53
stckvrflw

De cela article sur web.archive.org :

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

<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 script OnClick côté client. Dans ce cas, le JavaScript désactivera l'élément bouton et changera sa valeur textuelle en un message de progression. Une fois la publication terminée, la page nouvellement rendue ramène le bouton à son état initial sans aucun travail supplémentaire.

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

__doPostBack('BtnSubmit','')

Ceci est ajouté à la fin de notre code OnClientClick, nous donnant 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 bouton Nice désactiver l'effet et le traitement du texte, tandis que la publication se termine.

97
Vinay Pandey

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 éléments suivants ont fonctionné:

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

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

J'ai lutté plusieurs heures pour essayer de comprendre cela. Une fois que j'ai supprimé l'instruction pour désactiver le bouton d'envoi (qui était à l'intérieur de la fonction OnClientClick), la méthode OnClick a été appelée sans autre problème.

Microsoft, si vous écoutez, une fois que vous avez cliqué sur le bouton, il devrait terminer l'activité qui lui est affectée même s'il est désactivé pendant la durée de cette activité. Tant qu'il n'est pas désactivé lorsqu'il est cliqué, il doit terminer toutes les méthodes attribuées.

6
Patrick

Il y a deux problèmes ici:

La désactivation du bouton côté client empêche la publication

Pour surmonter cela, désactivez le bouton après l'événement JavaScript onclick. Un moyen simple de le faire est d'utiliser setTimeout comme suggéré par cette réponse .

De plus, le code OnClientClick s'exécute même si la validation ASP.NET échoue, il est donc probablement judicieux d'ajouter une vérification pour 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 pratique de mettre 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 côté client ne le désactive pas côté serveur

Pour surmonter cela, désactivez le bouton côté serveur. Par exemple, dans le gestionnaire d'événements OnClick:

OnClick="Button1_Click"

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

Enfin, gardez à l'esprit que le fait d'empêcher les pressions sur des boutons en double n'empêche pas deux utilisateurs différents de soumettre les mêmes données en même temps. Assurez-vous d'en tenir compte du côté serveur.

6
Sam

Que se passe-t-il si vous ne définissez pas immédiatement le bouton sur désactivé, mais que vous retardez cela via setTimeout? Votre fonction "désactiver" reviendrait et la soumission continuerait.

2
Hans Kesting

Votre JavaScript est correct, sauf si vous avez d'autres scripts en cours d'exécution sur cette page qui peuvent tout corrompre. Vous pouvez vérifier cela en utilisant Firebug .

J'ai maintenant testé un peu et il semble vraiment qu'ASP.net ignore les contrôles désactivés. Fondamentalement, la publication est publiée, mais le framework ignore probablement de tels événements car il "suppose" qu'un bouton désactivé ne peut pas générer de publication et il ignore donc les gestionnaires éventuellement attachés. Maintenant, ce n'est que mon raisonnement personnel, on pourrait utiliser Reflector pour vérifier cela plus en profondeur.

Comme solution, vous pourriez vraiment essayer de faire la désactivation plus tard, en gros vous retardez le control.disabled = "disabled" appeler en utilisant un JavaTimer ou une autre fonctionnalité. De cette façon, la publication au serveur est émise avant que le contrôle ne soit désactivé par la fonction JavaScript. N'a pas testé cela mais cela pourrait fonctionner

1
Juri

fonction UpdateClick (btn) {

    for (i = 0; i < Page_Validators.length; i++) {

        ValidatorValidate(Page_Validators[i]);

        if (Page_Validators[i].isvalid == false)

            return false;
    }

    btn.disabled = 'false';

    btn.value = 'Please Wait...';

    return true;
}
0
user3783446