Cómo: Agregar eventos de secuencias de comandos de cliente a los controles de servidor Web ASP.NET

Artículo
10/22/2014

Actualización: noviembre 2007

Las secuencias de comandos de cliente se pueden agregar a los controles de una página Web ASP.NET mediante declaración, del mismo modo que se agregarían a elementos HTML. Opcionalmente, puede agregar eventos de secuencias de comandos de cliente a un control de servidor Web ASP.NET mediante programación, lo que resulta útil cuando el evento o el código depende de información que sólo está disponible en tiempo de ejecución.

Nota:
Puede hacer referencia a los controles mediante el identificador en la secuencia de comandos de cliente. Para obtener más información, vea Script de cliente en páginas web ASP.NET.

Para agregar un evento onclick de secuencia de comandos de cliente a los botones es necesario seguir un procedimiento especial, que se explica más adelante en este tema.

Nota:
La compatibilidad con la secuencia de comandos de cliente depende del explorador. Por ejemplo, Internet Explorer, Mozilla y los exploradores para dispositivos móviles pueden proporcionar tipos de compatibilidad distintos para las secuencias de comandos de cliente.

Para agregar un controlador de eventos de cliente a un control de servidor ASP.NET mediante declaración

En el formato del control, agregue un atributo para el evento, por ejemplo, onmouseover u onkeyup. Para el valor del atributo, agregue la secuencia de comandos de cliente que desea ejecutar.

Nota:
Agregue siempre un punto y coma (;) a continuación de la secuencia de comandos de cliente en el atributo. Esto es necesario para que, si ASP.NET genera la secuencia de comandos de cliente para el control (por ejemplo, si la propiedad AutoPostBack del control está establecida en true), el código se ejecute en primer lugar.

Los pares de atributo y valor del formato del control que no se corresponden con las propiedades de éste se pasan al explorador tal y como están.

En el ejemplo de código siguiente se muestra una página Web ASP.NET que incluye una secuencia de comandos de cliente que cambia el color del texto de un botón cuando el usuario pasa el mouse (ratón) por encima de él.

<%@ 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 agregar un controlador de eventos de cliente a un control de servidor ASP.NET mediante programación

En el evento Init o Load de la página, llame al método Add de la colección Attributes del control.

En el ejemplo de código siguiente se muestra cómo agregar una secuencia de comandos de cliente a un control TextBox. La secuencia de comandos de cliente muestra la longitud del texto en el control TextBox. La secuencia de comandos presupone que la página contiene un elemento span denominado 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 agregar un evento onclick de cliente a un control de botón

En el control de botón (controles Button, LinkButton e ImageButton), establezca la propiedad OnClientClick en la secuencia de comandos de cliente que se debe ejecutar.

En el ejemplo de código siguiente se muestra cómo agregar un evento Click de secuencia de comandos de cliente a un control 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>

Seguridad

Las secuencias de comandos de cliente pueden realizar funciones potencialmente dañinas en el equipo cliente. Tenga mucho cuidado con las secuencias de comandos que escribe en las páginas, especialmente si la secuencia de comandos se genera o se altera en respuesta a los datos introducidos por el usuario. Para obtener más información, vea Información general sobre los ataques mediante secuencias de comandos.

Vea también

Tareas

Cómo: Establecer atributos HTML de controles en páginas Web ASP.NET

Cómo: Agregar secuencias de comandos de cliente a las páginas Web ASP.NET dinámicamente

Conceptos

Script de cliente en páginas web ASP.NET