OnClick vs OnClientClick pour un ASP: CheckBox?

Question

Est-ce que quelqu'un sait pourquoi un gestionnaire javascript côté client pour asp: CheckBox doit être un attribut OnClick = "" plutôt qu'un attribut OnClientClick = "", comme pour asp: Button?

Par exemple, cela fonctionne:

<asp:CheckBox runat="server" OnClick="alert(this.checked);" /> 

et cela ne (pas d'erreur):

<asp:CheckBox runat="server" OnClientClick="alert(this.checked);" /> 

mais cela fonctionne:

<asp:Button runat="server" OnClientClick="alert('Hi');" /> 

et cela ne (erreur de compilation):

<asp:Button runat="server" OnClick="alert('hi');" /> 

(Je sais à quoi sert Button.OnClick; Je me demande pourquoi CheckBox ne fonctionne pas de la même manière ...)

Answer 1

C'est très bizarre. J'ai vérifié le CheckBox documentation page qui se lit

<asp:CheckBox id="CheckBox1" 
    AutoPostBack="True|False" 
    Text="Label" 
    TextAlign="Right|Left" 
    Checked="True|False" 
    OnCheckedChanged="OnCheckedChangedMethod" 
    runat="server"/> 

Comme vous pouvez le voir, il n'y a pas d'attributs OnClick ou OnClientClick défini. En gardant cela à l'esprit, je pense que c'est ce qui se passe.

Quand vous faites cela,

<asp:CheckBox runat="server" OnClick="alert(this.checked);" /> 

ASP.NET ne modifie pas l'attribut OnClick et il rend tout comme sur le navigateur. Il serait rendu comme:

<input type="checkbox" OnClick="alert(this.checked);" /> 

De toute évidence, un navigateur peut comprendre «OnClick» et met une alerte.

Et dans ce scénario

<asp:CheckBox runat="server" OnClientClick="alert(this.checked);" /> 

Encore une fois, ASP.NET ne changera pas l'attribut et OnClientClick va le rendre comme

<input type="checkbox" OnClientClick="alert(this.checked);" /> 

Comme navigateur ne comprend rien OnClientClick qui va se passer. Il ne soulèvera pas non plus d'erreur car c'est juste un autre attribut.

Vous pouvez confirmer ci-dessus en regardant le HTML rendu.

Et oui, ce n'est pas du tout intuitif.

Answer 2

Vous avez raison, c'est incohérent. Qu'est-ce qui se passe est que CheckBox n'a pas un événement OnClick côté serveur, de sorte que votre balisage est rendu au navigateur. http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.checkbox_events.aspx

Considérant que Button a un OnClick - ASP.NET attend donc une référence à un événement dans votre balisage OnClick.

Answer 3

Parce qu'ils sont deux types différents de contrôles ...

Vous voyez, votre navigateur web ne connaît pas la programmation côté serveur. il ne connaît que son propre DOM et les modèles d'événements qu'il utilise ... Et pour les événements de clic des objets qui lui sont rendus.Vous devriez examiner le balisage final qui est réellement envoyé au navigateur à partir d'ASP.Net pour voir les différences vous-même.

<asp:CheckBox runat="server" OnClick="alert(this.checked);" /> 

rend à

<input type="check" OnClick="alert(this.checked);" /> 

et

<asp:CheckBox runat="server" OnClientClick="alert(this.checked);" /> 

rend à

<input type="check" OnClientClick="alert(this.checked);" /> 

Maintenant, autant que je me souvienne, il n'y a pas des navigateurs partout qui prennent en charge la Evénement "OnClientClick" dans leur DOM ... 01 En cas de doute, visualisez toujours la source de la sortie telle qu'elle est envoyée au navigateur ... il y a tout un monde d'informations de débogage que vous pouvez voir.

Answer 4

Je nettoyais les avertissements et les messages et je voyais que VS en avertissait: Validation (ASP.Net): L'attribut 'OnClick' n'est pas un attribut valide de l'élément 'CheckBox'. Utilisez le contrôle d'entrée html pour spécifier un gestionnaire côté client, puis vous n'obtiendrez pas la balise span supplémentaire et les deux éléments.

Answer 5

Pour ceux d'entre vous qui suis arrivé ici à la recherche du côté serveur OnClick gestionnaire est OnCheckedChanged

Answer 6

Une solution est avec JQuery:

$(document).ready(
    function() { 
     $('#mycheckboxId').click(function() { 
       // here the action or function to call 
     }); 
    } 
); 

Answer 7

Vous pouvez faire le tag comme ceci:

<asp:CheckBox runat="server" ID="ckRouteNow" Text="Send Now" OnClick="checkchanged(this)" /> 

La propriété .checked dans le JavaScript appelé sera correcte ... l'état actuel de la case à cocher:

function checkchanged(obj) { 
     alert(obj.checked) 
    }