Partager via

Syntaxe déclarative du contrôle serveur HtmlButton

  • Article

Mise à jour : novembre 2007

Crée un contrôle côté serveur mappé à l'élément HTML <button> et permet de créer des boutons de commande.

<button
    CausesValidation="False|True"
    Disabled="Disabled"
    EnableViewState="False|True"
    Id="string"
    ValidationGroup="String"
    Visible="False|True"
    OnDataBinding="OnDataBinding event handler"
    OnDisposed="OnDisposed event handler"
    OnInit="OnInit event handler"
    OnLoad="OnLoad event handler"
    OnPreRender="OnPreRender event handler"
    OnServerClick="OnServerClick event handler"
    OnUnload="OnUnload event handler"
    runat="server"
    >
        <!--buttonText, image, or control--> 
</button>

Notes

Utilisez le contrôle HtmlButton pour programmer en vous servant de l'élément <button> HTML. Vous pouvez fournir le code personnalisé de l'événement ServerClick du contrôle HtmlButton pour spécifier l'action exécutée lors d'un clic sur le contrôle.

Remarque :

Le contrôle HtmlButton retourne du code JavaScript au navigateur client. Le JavaScript doit être activé sur le navigateur client pour que ce contrôle fonctionne correctement. Pour plus d'informations sur le script client, consultez Script client dans les pages Web ASP.NET.

Vous pouvez également personnaliser l'apparence des boutons que vous placez dans des pages ASP.NET (.aspx). L'élément HTML 4.0 <button> permet de créer des boutons composés d'éléments HTML incorporés (et même d'autres contrôles Web Forms).

Remarque :

L'élément <button> est défini dans la spécification HTML 4.0.

Il est possible de modifier l'apparence d'un contrôle HtmlButton de plusieurs façons. Vous pouvez assigner des attributs de style au bouton dans la balise d'ouverture de l'élément control, inclure des éléments de mise en forme autour du texte que vous insérez entre les balises d'ouverture et de fermeture du contrôle ou assigner des modifications de valeur de propriété pour les événements onmouseover et onmouseout côté client, pour ne citer que celles-là. Vous pouvez également inclure des images dans les éléments de bouton eux-mêmes, voire inclure d'autres contrôles Web Forms.

Exemple

L'exemple de code suivant montre comment ajouter des styles, des événements DHTML, du texte et des images aux contrôles HtmlButton. Il inclut également le code de deux gestionnaires d'événements simples qui affichent un message via une instance de HtmlGenericControl, créée par un élément <span>.

<%@ Page Language="VB" AutoEventWireup="True" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>HtmlButton Control</title>

   <script runat="server">
      Sub Button1_OnClick(Source As Object, e As EventArgs)
         Span1.InnerHtml = "You clicked Button1"
      End Sub

      Sub Button2_OnClick(Source As Object, e As EventArgs)
         Span1.InnerHtml = "You clicked Button2"
      End Sub
   </script>

</head>

<body>
   <h3>HtmlButton Sample</h3>

   <form id="Form1" runat="server">
      <p />
      <button id="Button1" 
              onserverclick="Button1_OnClick" 
              style="font: 8pt verdana;
                    background-color:Lime;
                    border-color:black;
                    height:30;
                    width:100" 
              runat="server">
          <img src="/quickstart/aspplus/images/right4.gif" alt="Embedded image" /> Click me!
       </button>
       &nbsp;With embedded &lt;img&gt; tag
       <p />
       <p />
       <button id="Button2" 
               onserverclick="Button2_OnClick" 
               style="font: 8pt verdana;
                      background-color:Lime;
                      border-color:black;
                      height:30;
                      width:100"
               onmouseover="this.style.backgroundColor='yellow'"
               onmouseout="this.style.backgroundColor='lightgreen'"
               runat="server">
          Click me too!
       </button>
       &nbsp;With rollover effect
       <p />        
       <p />
       <span id="Span1" runat="server" />
   </form>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="True" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>HtmlButton Control</title>

   <script runat="server">
      void Button1_OnClick(object Source, EventArgs e) 
      {
         Span1.InnerHtml="You clicked Button1";
      }
      void Button2_OnClick(object Source, EventArgs e) 
      {
         Span1.InnerHtml="You clicked Button2";
      }
   </script>

</head>
<body>
   <h3>HtmlButton Sample</h3>

   <form id="Form1" runat="server">
      <p />
      <button id="Button1" 
              onserverclick="Button1_OnClick" 
              style="font: 8pt verdana;
                    background-color:Lime;
                    border-color:black;
                    height:30;
                    width:100" 
              runat="server">
          <img src="/quickstart/aspplus/images/right4.gif" alt="Embedded image" /> Click me!
       </button>
       &nbsp;With embedded &lt;img&gt; tag
       <p />
       <p />
       <button id="Button2" 
               onserverclick="Button2_OnClick" 
               style="font: 8pt verdana;
                      background-color:Lime;
                      border-color:black;
                      height:30;
                      width:100"
               onmouseover="this.style.backgroundColor='yellow'"
               onmouseout="this.style.backgroundColor='Lime'"
               runat="server">
          Click me too!
       </button>
       &nbsp;With rollover effect
       <p />        
       <p />
       <span id="Span1" runat="server" />
   </form>
</body>
</html>

Voir aussi

Référence

HtmlButton

Autres ressources

Contrôles serveur HTML