如何：向 ASP.NET Web 服务器控件添加客户端脚本事件

  • 项目

更新：2007 年 11 月

可以像对 HTML 元素那样，以声明方式向 ASP.NET 网页上的控件添加客户端脚本。或者，如果事件或代码依赖仅在运行时可用的信息，可以通过编程方式向 ASP.NET Web 服务器控件添加客户端脚本事件。

7ytf5t7k.alert_note(zh-cn,VS.90).gif说明：

可以在客户端脚本中通过 ID 引用控件。有关更多信息，请参见 ASP.NET 网页中的客户端脚本。

向按钮添加客户端脚本 onclick 事件需要一个专门过程，本主题后面的内容会对此进行介绍。

7ytf5t7k.alert_note(zh-cn,VS.90).gif说明：

对客户端脚本的支持取决于浏览器。例如，Internet Explorer、Mozilla 和移动设备浏览器可能会对客户端脚本提供不同类型的支持。

以声明方式向 ASP.NET 服务器控件添加客户端事件处理程序

  • 在控件的标记中添加事件属性，例如，onmouseover 或 onkeyup。针对属性值添加要执行的客户端脚本。

    7ytf5t7k.alert_note(zh-cn,VS.90).gif说明：

    始终都要在属性中的客户端脚本之后添加一个分号 (;)。这是必需的，这样就可以在 ASP.NET 生成控件的客户端脚本（例如，如果控件的 AutoPostBack 属性设置为 true）时首先运行此代码。

    控件标记中任何不与控件属性 (property) 对应的属性 (attribute)/值对都会按原样传递给浏览器。

    下面的代码示例演示一个包含客户端脚本的 ASP.NET 网页，当用户将鼠标移到按钮上方时，此脚本就会更改该按钮的文本颜色。

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

以编程方式向 ASP.NET 控件添加客户端事件处理程序

  • 在页面的 Init 或 Load 事件中调用控件的 Attributes 集合的 Add 方法。

    下面的代码示例演示如何向 TextBox 控件添加客户端脚本。该客户端脚本显示 TextBox 控件中的文本长度。该脚本假定页面包含一个名为 spanCounter 的 span 元素。

    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;");
}

向按钮控件添加客户端 Onclick 事件

  • 在按钮控件（Button、LinkButton 和 ImageButton 控件）中，将 OnClientClick 属性设置为要执行的客户端脚本。

    下面的代码示例演示如何向 Button 控件添加客户端脚本 Click 事件。

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

安全性

客户端脚本可以在客户端计算机上执行潜在的恶意功能。对于写入某一页面的脚本一定要非常小心，特别是在为响应用户输入生成或更改该脚本的情况下。有关更多信息，请参见脚本侵入概述。

请参见

任务

如何：在 ASP.NET 网页中设置控件的 HTML 属性

如何：向 ASP.NET 网页动态添加客户端脚本

概念

ASP.NET 网页中的客户端脚本