共用方式為

HOW TO：將用戶端指令碼事件加入至 ASP.NET Web 伺服器控制項

  • 發行項

更新：2007 年 11 月

您可以如同 HTML 項目一樣使用宣告方式，將用戶端指令碼加入 ASP.NET Web 網頁上的控制項。此外，您也可以程式設計方式將用戶端指令碼事件加入 ASP.NET Web 伺服器控制項。如果事件或程式碼依賴只有在執行階段才能使用的資訊，這個選項也很有用。

注意事項：

您可以根據用戶端指令碼中的 ID 參考控制項。如需詳細資訊，請參閱 ASP.NET Web 網頁中的用戶端指令碼。

將用戶端指令碼 onclick 事件加入按鈕需要特殊的程序，本主題稍後會提供。

注意事項：

用戶端指令碼的支援是依照瀏覽器而定。例如，Internet Explorer、Mozilla 和行動裝置的瀏覽器，會提供不同類型的用戶端指令碼支援。

若要以宣告方式將用戶端事件處理常式加入 ASP.NET 伺服器控制項

  • 在控制項標記中加入事件的屬性，例如 onmouseover 或 onkeyup。針對屬性值加入想要執行的用戶端指令碼。

    注意事項：

    在屬性中的用戶端指令碼後都要加入分號 (;)。這個動作是必要的，如果 ASP.NET 產生控制項的用戶端指令碼 (例如，如果控制項的 AutoPostBack 屬性設定為 true)，就會先執行您的程式碼。

    在控制項標記中並未對應控制項屬性的任何屬性/值組，會以原本的形式傳遞給瀏覽器。

    下列程式碼範例，示範的 ASP.NET Web 網頁包含當使用者的滑鼠通過時，會變更按鈕文字顏色的用戶端指令碼。

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

若要以程式設計方式將用戶端事件處理常式加入 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;");
}

若要將用戶端點擊事件加入按鈕控制項

  • 在按鈕控制項 (Button、LinkButton 和 ImageButton 控制項) 中，將 OnClientClick 屬性設定為要執行的用戶端指令碼。

    下列程式碼範例，示範了如何將用戶端指令碼點擊事件加入 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>

安全性

用戶端指令碼可以在用戶端電腦上執行可能惡意的函式。請特別注意寫入至網頁的指令碼，尤其是那些會回應使用者的輸入而產生或改變的指令碼。如需詳細資訊，請參閱指令碼攻擊概觀。

請參閱

工作

HOW TO：設定 ASP.NET Web 網頁中控制項的 HTML 屬性

HOW TO：以動態方式將用戶端指令碼加入至 ASP.NET Web 網頁

概念

ASP.NET Web 網頁中的用戶端指令碼