OnClick vs OnClientClick per asp: CheckBox?

Question

Qualcuno sa perché un gestore javascript lato client per asp: CheckBox deve essere un attributo OnClick = "" piuttosto che un attributo OnClientClick = "", come per asp: Button?

Per esempio, questo funziona:

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

e questo non lo fa (nessun errore):

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

ma questo funziona:

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

e questo non lo fa (errore di compilazione):

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

(So a cosa serve Button.OnClick; Mi chiedo perché CheckBox non funziona allo stesso modo ...)

Answer 1

Questo è molto strano. Ho controllato il CheckBox documentation page che legge

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

Come si può vedere, non v'è alcuna OnClick o OnClientClick attributi definiti.

Tenendo presente questo, penso che questo sia ciò che sta accadendo.

Quando si esegue questa operazione,

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

ASP.NET non modifica l'attributo OnClick e lo rende così come sul browser. Si sarebbe resa come:

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

Ovviamente, un browser in grado di capire 'OnClick' e mette un avviso.

E in questo scenario

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

Anche in questo caso, ASP.NET non cambierà il OnClientClick attributi e renderanno come

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

Come navigatore web non capirà nulla OnClientClick accadrà. Inoltre non genererà alcun errore in quanto è solo un altro attributo.

È possibile confermare sopra esaminando l'HTML visualizzato.

E sì, questo non è affatto intuitivo.

Answer 2

Hai ragione, questo è incoerente. Quello che sta accadendo è che CheckBox non ha un evento OnClick sul lato server, quindi il tuo markup verrà reso al browser. http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.checkbox_events.aspx

Mentre Button ha un OnClick, quindi ASP.NET si aspetta un riferimento a un evento nel markup OnClick.

Answer 3

Perché sono due diversi tipi di controlli ...

Vedete, il browser web non sa di programmazione lato server. conosce solo il proprio DOM e i modelli di eventi che usa ... E per gli eventi di click degli oggetti resi ad esso.Dovresti esaminare il markup finale che viene effettivamente inviato al browser da ASP.Net per vedere le differenze da te.

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

rende a

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

e

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

rende a

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

Ora, il più vicino che posso ricordare, non ci sono i browser ovunque che supportano il Evento "OnClientClick" nel loro DOM ...

In caso di dubbio, visualizzare sempre la fonte dell'output così come viene inviata al browser ... c'è un intero mondo di informazioni di debug che è possibile visualizzare.

Answer 4

Stavo pulendo avvisi e messaggi e vedo che VS ne mette in guardia: Validation (ASP.Net): L'attributo 'OnClick' non è un attributo valido dell'elemento 'CheckBox'. Usa il controllo di input html per specificare un gestore lato client e quindi non otterrai il tag span extra e i due elementi.

Answer 5

Per quelli di voi che si sono qui in cerca di lato server OnClick gestore è OnCheckedChanged

Answer 6

Una soluzione è con JQuery:

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

Answer 7

Si può fare il tag in questo modo:

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

La proprietà .checked nel JavaScript chiamato sarà corretta ... lo stato corrente della casella di controllo:

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