OnClick vs OnClientClick para un asp: CheckBox?


83

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

Por ejemplo, esto funciona:

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

y esto no (sin 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 ...)

Respuestas:


106

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

<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 u 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 como está en el navegador. Se representaría como:

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

Obviamente, un navegador puede entender 'OnClick' y envía una alerta.

Y en este escenario

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

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

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

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

Puede confirmar arriba mirando el HTML renderizado.

Y sí, esto no es nada intuitivo.


Buena llamada. Acabo de verificar el html generado y en realidad está poniendo atributos que no entiende en un intervalo alrededor de la entrada de la casilla de verificación, pero por lo demás tiene razón ...
Stobor

Eso es otra cosa, no me gusta el hecho de que asp: checkbox representa un intervalo adicional innecesariamente.
SolutionYogi

1
Bueno, algunos de ellos. Pone onclick en la entrada en sí, pero onClientClick en el intervalo. ¡Extraño!
Stobor

Guau. Ha pasado un tiempo desde que utilicé los controles web, por lo que mi memoria se está desvaneciendo. Prefiero usar controles HTML porque quiero controlar cómo se ve mi HTML renderizado.
SolutionYogi

2
Esa documentación es en realidad de .Net 1.1. Hasta donde yo sé, ASP .Net no tiene un evento del lado del servidor OnClick para CheckBox, por lo que cuando escribe OnClick u OnClientClick, porque no lo sabe, muestra exactamente lo que escribió, ya que es su comportamiento predeterminado ( si no me equivoco)
Sergio Rosas

9

Porque son dos tipos diferentes de controles ...

Verá, su navegador web no conoce la programación del lado del servidor. solo conoce su propio DOM y los modelos de eventos que usa ... Y para eventos de clic de objetos renderizados en él. Debe examinar el marcado final que realmente se envía al navegador desde ASP.Net para ver las diferencias usted 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, por lo que puedo recordar, no hay navegadores en ninguna parte que admitan 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 todo un mundo de información de depuración que puede ver.



6

Para aquellos de ustedes que llegaron aquí buscando el controlador del lado del servidorOnClick , esOnCheckedChanged


1
Ese es el evento del lado del servidor, no el evento del lado del cliente; que no existe.
Protector uno

1

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 controlador del lado del cliente y luego no obtendrá la etiqueta span adicional y los dos elementos.


Interesante ... Ese fue un proyecto que asumí durante un tiempo, y tenía demasiadas advertencias para ver algo útil allí ... Si mal no recuerdo, la desventaja de usar el control HTML es que no se puede hacer el servidor -manipulaciones laterales con él ...
Stobor

1

Asp.net CheckBox no es el método de soporte OnClientClick.
Si desea agregar algún evento javascript a asp: CheckBox, debe agregar atributos relacionados en los eventos "Pre_Render" o "Page_Load" en el código del servidor:

C#:

    private void Page_Load(object sender, EventArgs e)
    {
        SomeCheckBoxId.Attributes["onclick"] = "MyJavaScriptMethod(this);";
    }

Nota: asegúrese de no configurar AutoEventWireup = "false" en el encabezado de la página.

VB:

    Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyBase.Load
        SomeCheckBoxId.Attributes("onclick") = "MyJavaScriptMethod(this);"
    End Sub

0

Puedes hacer la etiqueta de esta manera:

<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)
  }

-2

Una solución es con JQuery:

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

Falta la función secundaria}
Mahdi jokar
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.