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.
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.
.gif) 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 runat="server">
<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" runat="server">
<asp:button id="Button1" runat="server"
text="Button1"
onmouseover="MakeRed();"
onmouseout="RestoreColor();" />
</form>
</body>
</html>
<%@ Page Language="C#" %>
<html>
<head runat="server">
<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" runat="server">
<asp:button id="Button1" runat="server"
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 runat="server">
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" runat="server">
<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 runat="server">
protected void Button1_Click(Object sender, EventArgs e)
{
Label1.Text = "Server click handler called.";
}
</script>
<html >
<body>
<form id="form1" runat="server">
<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