Gewusst wie: Hinzufügen von Clientskriptereignissen zu ASP.NET-Webserversteuerelementen

Artikel
10/22/2014

Aktualisiert: November 2007

Sie können Steuerelementen auf einer ASP.NET-Webseite Clientskript deklarativ hinzufügen – genauso wie bei HTML-Elementen. Alternativ können Clientskriptereignisse einem ASP.NET-Webserversteuerelement programmgesteuert hinzugefügt werden. Dies ist nützlich, wenn das Ereignis oder der Code von Informationen abhängt, die nur zur Laufzeit verfügbar sind.

Hinweis:
Sie können in Clientskript auf Steuerelemente über deren ID verweisen. Weitere Informationen finden Sie unter Clientskript in ASP.NET-Webseiten.

Ein Hinzufügen von onclick-Clientskriptereignissen zu Schaltflächen erfordert ein besonderes Vorgehen, auf das später in diesem Kapitel eingegangen wird.

Hinweis:
Unterstützung für Clientskript hängt vom Browser ab. So wird Clientskript von Internet Explorer, Mozilla und Browsern für mobile Geräte möglicherweise auf unterschiedliche Weise unterstützt.

So fügen Sie einem ASP.NET-Serversteuerelement deklarativ einen Clientereignishandler hinzu

Fügen Sie im Markup des Steuerelements ein Attribut für das Ereignis hinzu, z. B. onmouseover oder onkeyup. Fügen Sie als Wert des Attributs das Clientskript hinzu, das Sie ausführen möchten.

Hinweis:
Schließen Sie das Clientskript im Attribut immer mit einem Semikolon (;) ab. Dies ist notwendig, damit Ihr Code zuerst ausgeführt wird, wenn von ASP.NET Clientskript für das Steuerelement generiert wird (wenn z. B. die AutoPostBack-Eigenschaft des Steuerelements auf true festgelegt ist).

Attribut-Wert-Paare im Markup des Steuerelements, die keinen Steuerelementeigenschaften entsprechen, werden unverändert an den Browser weitergegeben.

Das folgende Codebeispiel zeigt eine ASP.NET-Webseite, die Clientskript enthält, das die Textfarbe der Schaltfläche ändert, sobald der Benutzer den Mauszeiger darüber bewegt.

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

So fügen Sie einem ASP.NET-Steuerelement programmgesteuert einen Clientereignishandler hinzu

Rufen Sie im Init-Ereignis oder im Load-Ereignis der Seite die Add-Methode der Attributes-Auflistung des Steuerelements auf.

Im folgenden Codebeispiel wird veranschaulicht, wie einem TextBox-Steuerelement Clientskript hinzugefügt wird. Das Clientskript zeigt die Länge des Texts im TextBox-Steuerelement an. Dem Skript liegt die Annahme zugrunde, dass die Seite ein span-Element mit dem Namen spanCounter enthält.
```
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;");
}

So fügen Sie einem Schaltflächensteuerelement ein Client-onclick-Ereignis hinzu

Legen Sie im Schaltflächensteuerelement (Button, LinkButton oder ImageButton) die OnClientClick-Eigenschaft auf das auszuführende Clientskript fest.

Im folgenden Codebeispiel wird veranschaulicht, wie einem Button-Steuerelement ein Clientskript mit einem Klickereignis hinzugefügt wird.

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

Sicherheit

Clientskripts sind in der Lage, potenziell böswillige Funktionen auf dem Clientcomputer auszuführen. Seien Sie daher besonders vorsichtig mit dem Skript, das Sie in die Seite schreiben, vor allem, wenn das Skript als Antwort auf eine Benutzereingabe generiert oder geändert wird. Weitere Informationen finden Sie unter Übersicht über Skriptangriffe.

Siehe auch

Aufgaben

Gewusst wie: Festlegen von HTML-Attributen für Steuerelemente in ASP.NET-Webseiten

Gewusst wie: Dynamisches Hinzufügen von Clientskripts zu ASP.NET-Webseiten

Konzepte

Clientskript in ASP.NET-Webseiten

Freigeben über