Como: Adicionar cliente Script Events para controles de servidor Web do ASP.NET

Artigo
10/15/2014

Você pode adicionar script de cliente a controles em uma página Web ASP.NET declarativamente, como você faria para elementos HTML.Como alternativa, você pode adicionar eventos de script de cliente a um controle de servidor Web do ASP.NET, por meio de programação, o que é útil se o evento ou o código basear-se nas informações que estão disponíveis somente em tempo de execução.

Observação:
Você pode fazer referência a controles pela identificação no script de cliente.Para obter mais informações, consulte Script de Cliente em Páginas da Web ASP.NET.

Adicionar um evento onclick de script de cliente aos botões requer um procedimento especial, que é apresentado posteriormente neste tópico.

Observação:
O suporte para script de cliente depende do navegador.Por exemplo, Internet Explorer, Mozilla e navegadores para dispositivos móveis podem fornecer diferentes tipos de suporte para script de cliente.

Para adicionar um manipulador de eventos de cliente a um controle de servidor ASP.NET declarativamente

Na marcação do controle, adicione um atributo para o evento, por exemplo, onmouseover ou onkeyup.Para o valor do atributo, adicione o script de cliente que você deseja executar.

Observação:
Sempre adicione um ponto-e-vírgula (;) após o script de cliente no atributo.Isso é necessário para que, se o ASP.NET gerar script de cliente para o controle (por exemplo, se a propriedade AutoPostBack do controle estiver definida como true), seu código será executado primeiro.

Quaisquer pares atributo/valor na marcação do controle que não correspondem às propriedades do controle são passados para o navegador como se estivessem.

O exemplo de código a seguir mostra uma página Web do ASP.NET que inclui script de cliente para alterar a cor do texto do botão quando o usuário passar o mouse sobre ele.

<%@ Page Language="VB"%>
<html>
<head >
  <title>Untitled Page</title>
  <script type="text/javascript">
      var previousColor;
      function MakeRed()
      {
          previousColor = window.event.srcElement.style.color;
          window.event.srcElement.style.color = "#FF0000";
      }
      function RestoreColor()
      {
          window.event.srcElement.style.color = previousColor;
      }
  </script>
</head>
<body>
  <form id="form1" >
    <asp:button id="Button1" 
      text="Button1"
        onmouseover="MakeRed();"onmouseout="RestoreColor();" />
  </form>
</body>
</html>

<%@ Page Language="C#" %>
<html>
<head >
  <title>Untitled Page</title>
  <script type="text/javascript">
      var previousColor;
      function MakeRed()
      {
          previousColor = window.event.srcElement.style.color;
          window.event.srcElement.style.color = "#FF0000";
      }
      function RestoreColor()
      {
          window.event.srcElement.style.color = previousColor;
      }
  </script>
</head>
<body>
  <form id="form1" >
  <asp:button id="Button1"  
    text="Button1" 
      onmouseover="MakeRed();"onmouseout="RestoreColor();" />
  </form>
</body>
</html>

Para adicionar um manipulador de eventos de cliente para um controle ASP.NET por meio de programação

No evento Init ou Load da página, chame o método Add da coleção Attributes do controle.

O exemplo de código a seguir mostra como adicionar script de cliente a um controle TextBox.O script de cliente exibe o tamanho do texto no controle TextBox.O script assume que a página contém um elemento span chamado spanCounter.
```
Protected Page_Load(ByVal sender As Object, _
    ByVal e As System.EventArgs)
    Dim displayControlName As String = "spanCounter"
    TextBox1.Attributes.Add("onkeyup", _
        displayControlName & ".innerText=this.value.length;")
End Sub
```

protected void Page_Load(object sender, EventArgs e)
{
    String displayControlName = "spanCounter";
    TextBox1.Attributes.Add("onkeyup", displayControlName + 
        ".innerText=this.value.length;");
}

Para adicionar um evento de clique de cliente a um controle de botão

No controle do botão (controles Button, LinkButton e ImageButton), defina a propriedade OnClientClick como o script de cliente a executar.

O exemplo de código a seguir mostra como adicionar um evento de clique de script de cliente para um controle Button.

<%@ Page Language="VB" %>
<script >
    Sub Button1_Click(ByVal sender As Object, _
        ByVal e As System.EventArgs)
        Label1.Text = "Server click handler called."
    End Sub
</script>

<body>
  <form id="form1" >
    <asp:Button ID="Button1" Runat="server" 
      OnClick="Button1_Click" 
        OnClientClick="return confirm('Ready to submit.')" 
        Text="Test Client Click" />
    <br />
    <asp:Label ID="Label1" Runat="server" text="" />
  </form>
</body>
</html>

<%@ Page Language="C#" %>
<script >
    protected void Button1_Click(Object sender, EventArgs e)
    {
        Label1.Text = "Server click handler called.";
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
  <form id="form1" >
    <asp:Button ID="Button1" Runat="server" 
      OnClick="Button1_Click" 
        OnClientClick="return confirm('Ready to submit.')" 
        Text="Test Client Click" />
    <br />
    <asp:Label ID="Label1" Runat="server" text="" />
  </form>
</body>
</html>

Segurança

Script de cliente pode executar funções potencialmente mal-intencionadas no computador cliente.Seja extremamente cuidadoso com o script que você escreve em uma página, especialmente se o script for gerado ou alterado em resposta a entrada do usuário.Para obter mais informações, consulte Visão Geral de Scripts Maliciosos.

Consulte também

Tarefas

Como: conjunto atributos HTML para controles em páginas da Web do ASP.NET

Como: Adicionar script de cliente dinamicamente a páginas da Web do ASP.NET

Conceitos

Script de Cliente em Páginas da Web ASP.NET

Compartilhar via