Compartir a través de

Sintaxis declarativa del control de servidor HtmlButton

  • Artículo

[Esta documentación se proporciona solo para fines preliminares y está sujeta a cambios en versiones posteriores. Se incluye temas en blanco como marcadores].

Crea un control de servidor que se asigna al elemento HTML <button> y permite crear botones de comando.

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

Comentarios

Utilice el control HtmlButton para programar con el elemento HTML <button>. Puede personalizar el código del evento ServerClick del control HtmlButton para especificar la acción que se va a realizar cuando se haga clic en el control.

Nota

El control HtmlButton representa JavaScript en el explorador cliente.El explorador del cliente debe tener habilitado JavaScript para que este control funcione correctamente.Para obtener más información sobre los scripts de cliente, vea Client Script in ASP.NET Web Pages.

También se puede personalizar la apariencia de los botones colocados en las páginas (.aspx) de ASP.NET. El elemento <button> de HTML 4.0 permite crear botones formados por elementos HTML incrustados (e incluso otros controles de formularios Web Forms).

Nota

El elemento <button> se define en la especificación de HTML 4.0.

Hay varias maneras de modificar la apariencia de un control HtmlButton. Se pueden asignar atributos de estilo al botón en la etiqueta de apertura del elemento del control, incluir elementos de formato alrededor del texto insertado entre las etiquetas de apertura y de cierre del control, o bien, asignar cambios de valor de propiedad a los eventos onmouseover y onmouseout de lado cliente, por nombrar algunas. Además, se pueden incluir imágenes en los elementos del botón e incluso otros controles de formularios Web Forms.

Ejemplo

En el ejemplo de código siguiente se muestra cómo agregar estilos, eventos DHTML, texto e imágenes a los controles HtmlButton. También se incluye código para dos controladores de eventos sencillos que muestran un mensaje a través de una instancia de un control HtmlGenericControl que se crea mediante un elemento <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>

Vea también

Referencia

HtmlButton

Otros recursos

Controles de servidor HTML