Procedura: aggiungere eventi di script client ai controlli server Web ASP.NET

Articolo
10/22/2014

Aggiornamento: novembre 2007

È possibile aggiungere script client ai controlli in una pagina Web ASP.NET in modo dichiarativo, come per qualsiasi elemento HTML. In alternativa, è possibile aggiungere eventi di script client a un controllo server Web ASP.NET a livello di programmazione. Questa operazione è utile se l'evento o il codice si basano su informazioni accessibili solo in fase di esecuzione.

Nota:
È possibile fare riferimento ai controlli tramite l'ID nello script client. Per ulteriori informazioni, vedere Script client nelle pagine Web ASP.NET.

Aggiungere un evento script client onclick ai pulsanti richiede una procedura speciale, descritta più avanti in questa sezione.

Nota:
Il supporto per lo script client dipende dal browser. Ad esempio, Internet Explorer, Mozilla e i browser per i dispositivi mobili potrebbero fornire diversi tipi di supporto per script client.

Aggiungere un gestore di eventi client a un controllo server ASP.NET in modo dichiarativo

Nel codice del controllo, aggiungere un attributo per l'evento, ad esempio, onmouseover o onkeyup. Nel valore dell'attributo, aggiungere lo script client che si desidera eseguire.

Nota:
Aggiungere sempre un punto e virgola (;) dopo lo script client nell'attributo. Questa operazione è necessaria per far sì che, se ASP.NET genera lo script client per il controllo (ad esempio, se la proprietà AutoPostBack del controllo è impostata su true), il codice venga eseguito per primo.

Tutte le coppie attributo/valore nel codice del controllo che non corrispondono alle proprietà del controllo vengono passate al browser invariate.

Nell'esempio di codice riportato di seguito viene illustrata una pagina Web ASP.NET che include uno script client che modifica il colore del testo del pulsante al passaggio del mouse.

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

Aggiungere un gestore di eventi client a un controllo ASP.NET a livello di programmazione

Nell'evento Init o Load della pagina, richiamare il metodo Add dell'insieme Attributes del controllo.

Nell'esempio di codice riportato di seguito viene mostrato come aggiungere uno script client a un controllo TextBox. Lo script client restituisce la lunghezza del testo nel controllo TextBox. Lo script presuppone che la pagina contenga un elemento span denominato 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;");
}

Aggiungere un evento client onclick al controllo di un pulsante

Nel controllo del pulsante (controlli Button, LinkButton e ImageButton), impostare la proprietà OnClientClick sullo script client da eseguire.

Nell'esempio di codice riportato di seguito viene mostrato come aggiungere un evento script client click a un controllo 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>

Sicurezza

Lo script client può eseguire funzioni potenzialmente dannose nel computer client. Fare molta attenzione allo script aggiunto in una pagina, soprattutto se lo script è generato o modificato in base alle azioni dell'utente. Per ulteriori informazioni, vedere Cenni preliminari sugli attacchi tramite script.

Vedere anche

Attività

Procedura: impostare gli attributi HTML dei controlli nelle pagine Web ASP.NET

Procedura: aggiungere dinamicamente script client alle pagine Web ASP.NET

Concetti

Script client nelle pagine Web ASP.NET

Condividi tramite