HtmlButton 服务器控件声明性语法

[本文档仅供预览,在以后的发行版中可能会发生更改。包含的空白主题用作占位符。]

创建一个服务器端控件,该控件映射到 <button> HTML 元素并允许您创建下压按钮。

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

备注

使用 HtmlButton 控件可以对 HTML <button> 元素进行编程。 可以为 HtmlButton 控件的 ServerClick 事件提供自定义代码,以指定在单击该控件时执行的操作。

备注

HtmlButton 控件将 JavaScript 呈现到客户端浏览器。客户端浏览器必须启用了 JavaScript,此控件才能正常运行。有关客户端脚本的更多信息,请参见 Client Script in ASP.NET Web Pages

还可以自定义放置在 ASP.NET (.aspx) 页中的按钮的外观。 HTML 4.0 <button> 元素使您能够创建由嵌入的 HTML 元素(甚至其他 Web 窗体控件)构成的按钮。

备注

<button> 元素是在 HTML 4.0 规范中定义的。

修改 HtmlButton 控件的外观有多种方法。 例如,可以在控件元素的开始标记中向按钮分配样式特性,在插入到控件的开始和结束标记之间的文本周围添加格式设置元素,或者为客户端的 onmouseover 和 onmouseout 事件分配属性值更改。 还可以在按钮元素自身内部包含图像,或甚至包含其他 Web 窗体控件。

示例

下面的代码示例演示如何向 HtmlButton 控件添加样式、DHTML 事件、文本和图像。 它还包含两个简单事件处理程序的代码,这两个事件处理程序通过由 <span> 元素创建的 HtmlGenericControl 的实例显示消息。

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

请参见

参考

HtmlButton

其他资源

HTML 服务器控件