OnClick vs OnClientClick para um asp: CheckBox?


83

Alguém sabe por que um manipulador de javascript do lado do cliente para asp: CheckBox precisa ser um atributo OnClick = "" em vez de um atributo OnClientClick = "", como para asp: Button?

Por exemplo, isso funciona:

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

e isso não (sem erro):

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

mas isso funciona:

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

e isso não (erro de tempo de compilação):

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

(Eu sei para que serve o Button.OnClick; estou me perguntando por que o CheckBox não funciona da mesma maneira ...)

Respostas:


106

Isso é muito estranho. Eu verifiquei a página de documentação do CheckBox que diz

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

Como você pode ver, não há atributos OnClick ou OnClientClick definidos.

Tendo isso em mente, acho que é isso que está acontecendo.

Quando você faz isso,

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

ASP.NET não modifica o atributo OnClick e o renderiza como está no navegador. Seria processado como:

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

Obviamente, um navegador pode entender 'OnClick' e colocar um alerta.

E neste cenário

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

Novamente, ASP.NET não mudará o atributo OnClientClick e o renderizará como

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

Como o navegador não entende o OnClientClick, nada acontecerá. Ele também não gerará nenhum erro, pois é apenas outro atributo.

Você pode confirmar acima, olhando para o HTML renderizado.

E sim, isso não é nada intuitivo.


Boa decisão. Acabei de verificar o html gerado e, na verdade, ele está colocando os atributos que não entende em uma extensão em torno da entrada da caixa de seleção, mas caso contrário, você está certo ...
Stobor

Isso é outra coisa, eu não gosto do fato de que asp: checkbox renderiza uma extensão adicional desnecessariamente.
SolutionYogi

1
Bem, alguns deles. Ele coloca onclick na própria entrada, mas onClientClick na extensão. Esquisito!
Stobor

Uau. Já faz um tempo que não uso os controles da web, então minha memória está sumindo. Eu prefiro usar controles HTML porque desejo controlar a aparência do meu HTML renderizado.
SolutionYogi

2
Essa documentação é, na verdade, do .Net 1.1. Pelo que eu sei, ASP .Net não tem um evento do lado do servidor OnClick para CheckBox, então quando você escreve OnClick ou OnClientClick, porque ele não sabe, ele renderiza exatamente o que você escreveu, pois é seu comportamento padrão ( se não me engano)
Sergio Rosas

9

Porque são dois tipos diferentes de controles ...

Você vê, seu navegador da web não sabe sobre programação do lado do servidor. ele só conhece seu próprio DOM e os modelos de eventos que usa ... E para eventos de clique de objetos renderizados para ele. Você deve examinar a marcação final que é realmente enviada para o navegador do ASP.Net para ver as diferenças você mesmo.

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

renderiza para

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

e

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

renderiza para

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

Agora, pelo que me lembro, não há navegadores em nenhum lugar que ofereçam suporte ao evento "OnClientClick" em seu DOM ...

Em caso de dúvida, sempre veja a origem da saída conforme ela é enviada ao navegador ... há um mundo inteiro de informações de depuração que você pode ver.



6

Para aqueles que chegaram aqui procurando o manipulador do lado do servidorOnClick , éOnCheckedChanged


1
Esse é o evento do lado do servidor, não o evento do lado do cliente; que não existe.
Protetor um de

1

Eu estava limpando avisos e mensagens e vi que o VS avisa sobre isso: Validação (ASP.Net): O atributo 'OnClick' não é um atributo válido do elemento 'CheckBox'. Use o controle de entrada html para especificar um manipulador do lado do cliente e você não obterá a tag span extra e os dois elementos.


Interessante ... Esse foi um projeto que assumi por um tempo, e tinha muitos avisos para ver algo útil nele ... Se bem me lembro, a desvantagem de usar o controle HTML é que você não pode fazer servidor - manipulações
laterais

1

Asp.net CheckBox não é compatível com o método OnClientClick.
Se você deseja adicionar algum evento javascript ao asp: CheckBox, você deve adicionar atributos relacionados em "Pre_Render" ou em eventos "Page_Load" no código do servidor:

C #:

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

Nota: Certifique-se de não definir AutoEventWireup = "false" no cabeçalho da 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

Você pode fazer a tag assim:

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

A propriedade .checked no JavaScript chamado estará correta ... o estado atual da caixa de seleção:

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

-2

Uma solução é com JQuery:

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

Função Seconf} ausente
Mahdi jokar
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.