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>
With embedded <img> 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>
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>
With embedded <img> 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>
With rollover effect
<p />
<p />
<span id="Span1" runat="server" />
</form>
</body>
</html>