Comment : ajouter des événements de script client à des contrôles serveur Web ASP.NET

  • Article

Mise à jour : novembre 2007

Vous pouvez ajouter un script client à des contrôles dans une page Web ASP.NET de façon déclarative, comme vous les ajouteriez à des éléments HTML. Vous pouvez aussi ajouter par programme des événements de script client à un contrôle serveur Web ASP.NET, ce qui est utile si l'événement ou le code s'appuie sur des informations uniquement disponibles au moment de l'exécution.

Remarque :

Vous pouvez référencer des contrôles par ID dans un script client. Pour plus d'informations, consultez Script client dans les pages Web ASP.NET.

L'ajout d'un événement onclick de script client aux boutons requiert une procédure spéciale, indiquée plus loin dans cette rubrique.

Remarque :

La prise en charge du script client dépend du navigateur. Par exemple, Internet Explorer, Mozilla et les navigateurs des périphériques mobiles peuvent fournir différents types de prises en charge du script client.

Pour ajouter de façon déclarative un gestionnaire d'événements client à un contrôle serveur ASP.NET

  • Dans le balisage du contrôle, ajoutez un attribut pour l'événement, par exemple onmouseover ou onkeyup. Pour la valeur de l'attribut, ajoutez le script client que vous souhaitez exécuter.

    Remarque :

    Ajoutez toujours un point-virgule (;) après le script client dans l'attribut. Cette opération est requise pour permettre l'exécution de votre code en premier lieu si ASP.NET génère le script client pour le contrôle (par exemple, lorsque la propriété AutoPostBack du contrôle a la valeur true).

    Toute paire attribut/valeur figurant dans le balisage du contrôle et ne correspondant pas aux propriétés du contrôle est passée telle quelle au navigateur.

    L'exemple de code suivant montre une page Web ASP.NET contenant un script client qui modifie la couleur de texte du bouton lorsque la souris de l'utilisateur passe dessus.

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

Pour ajouter par programme un gestionnaire d'événements client à un contrôle ASP.NET

  • Dans l'événement Init ou Load de la page, appelez la méthode Add de la collection Attributes du contrôle.

    L'exemple de code suivant montre comment ajouter un script client à un contrôle TextBox. Le script client affiche la longueur du texte dans le contrôle TextBox. Le script suppose que la page contient un élément span nommé 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;");
}

Pour ajouter un événement onclick client à un contrôle bouton

  • Dans le contrôle bouton (contrôles Button, LinkButton et ImageButton), affectez à la propriété OnClientClick le script client à exécuter.

    L'exemple de code suivant montre comment ajouter un événement Click de script client à un contrôle 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>

Sécurité

Le script client est susceptible d'exécuter des fonctions malveillantes sur l'ordinateur client. Soyez extrêmement vigilant avec le script que vous écrivez dans une page, en particulier s'il est généré ou modifié en réponse à une entrée d'utilisateur. Pour plus d'informations, consultez Vue d'ensemble des attaques de script.

Voir aussi

Tâches

Comment : définir des attributs HTML pour des contrôles dans les pages Web ASP.NET

Comment : ajouter de manière dynamique un script client à des pages Web ASP.NET

Concepts

Script client dans les pages Web ASP.NET