How to: Add Client Script Events to ASP.NET Web Server Controls

  • Article

You can add client script to controls on an ASP.NET Web page declaratively, as you would to HTML elements. Alternatively, you can add client script events to an ASP.NET Web server control programmatically, which is useful if the event or the code relies on information that is available only at run time.

Note

You can reference controls by ID in client script. For more information, see Client Script in ASP.NET Web Pages.

Adding a client script onclick event to buttons requires a special procedure, which is provided later in this topic.

Note

Support for client script depends on the browser. For example, Internet Explorer, Mozilla, and browsers for mobile devices might provide different types of support for client script.

To add a client event handler to an ASP.NET server control declaratively

  • In the control's markup, add an attribute for the event, for example, onmouseover or onkeyup. For the attribute's value, add the client script that you want to execute.

    Note

    Always add a semicolon (;) after the client script in the attribute. This is required so that if ASP.NET generates client script for the control (for example, if the control's AutoPostBack property is set to true), your code will run first.

    Any attribute/value pairs in the control's markup that do not correspond to control properties are passed through to the browser as is.

    The following code example shows an ASP.NET Web page that includes client script that changes the button text color when the user passes the mouse over it.

    <%@ 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>

To add a client event handler to an ASP.NET control programmatically

  • In the page's Init or Load event, call the Add method of the control's Attributes collection.

    The following code example shows how to add client script to a TextBox control. The client script displays the length of the text in the TextBox control. The script assumes that the page contains a span element named 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;");
}

To add a client onclick event to a button control

  • In the button control (Button, LinkButton, and ImageButton controls), set the OnClientClick property to the client script to execute.

    The following code example shows how to add a client script click event to a Button control.

    <%@ 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 xmlns="http://www.w3.org/1999/xhtml" >
<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>

Security

Client script can perform potentially malicious functions on the client computer. Be extremely careful about the script that you write into a page, especially if the script is generated or altered in response to user input. For more information, see Script Exploits Overview.

See Also

Tasks

How to: Set HTML Attributes for Controls in ASP.NET Web Pages

How to: Add Client Script Dynamically to ASP.NET Web Pages

Concepts

Client Script in ASP.NET Web Pages