asp.net - OnClick vs OnClientHaga clic para obtener un asp: CheckBox?

javascript onclientclick

Question

¿Alguien sabe por qué un controlador de javascript en el lado del cliente para asp: CheckBox debe ser un atributo OnClick = "" en lugar de un atributo OnClientClick = "", como para el botón asp:?

Por ejemplo, esto funciona:

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

y esto no (no hay error):

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

pero esto funciona:

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

y esto no (error de tiempo de compilación):

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

(Sé para qué sirve Button.OnClick; me pregunto por qué CheckBox no funciona de la misma manera ...)

Answer 1

Eso es muy raro Revisé la página de documentación de CheckBox que dice

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

Como puede ver, no hay atributos OnClick o OnClientClick definidos.

Teniendo esto en cuenta, creo que esto es lo que está sucediendo.

Cuando haces esto,

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

ASP.NET no modifica el atributo OnClick y lo representa tal como está en el navegador. Se representaría como:

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

Obviamente, un navegador puede entender ''OnClick'' y pone una alerta.

Y en este escenario

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

Nuevamente, ASP.NET no cambiará el atributo OnClientClick y lo renderizará como

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

Como el navegador no comprenderá OnClientClick, nada sucederá. Tampoco generará ningún error ya que es solo otro atributo.

Puede confirmar arriba mirando el HTML renderizado.

Y sí, esto no es intuitivo en absoluto.

Answer 2

Estaba limpiando advertencias y mensajes y veo que VS advierte al respecto: Validación (ASP.Net): El atributo ''OnClick'' no es un atributo válido del elemento ''CheckBox''. Use el control de entrada html para especificar un manejador del lado del cliente y luego no obtendrá la etiqueta de extensión adicional y los dos elementos.

Answer 3

Para aquellos de ustedes que llegaron aquí buscando el controlador OnClick lado del servidor, está OnCheckedChanged

Answer 4

Porque son dos tipos diferentes de controles ...

Usted ve, su navegador web no sabe acerca de la programación del lado del servidor. solo conoce su propio DOM y los modelos de eventos que utiliza ... Y para los eventos de clic de los objetos que se le presentan. Debería examinar el marcado final que en realidad se envía al buscador desde ASP.Net para ver las diferencias consigo mismo.

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

rinde a

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

y

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

rinde a

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

Ahora, tan cerca como puedo recordar, no hay navegadores en ningún lado que soporten el evento "OnClientClick" en su DOM ...

En caso de duda, siempre vea la fuente de la salida a medida que se envía al navegador ... hay un mundo de información de depuración que puede ver.

Answer 5

Puedes hacer la etiqueta así:

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

La propiedad .checked en el JavaScript llamado será correcta ... el estado actual de la casilla de verificación:

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

Answer 6

Tienes razón esto es inconsistente. Lo que está sucediendo es que CheckBox NO TIENE un evento OnClick del lado del servidor, por lo que su marcado se procesa en el navegador. http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.checkbox_events.aspx

Mientras que Button tiene un OnClick, ASP.NET espera una referencia a un evento en su marcado OnClick.

Answer 7

Una solución es con JQuery:

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