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 コントロールを使用して、<button> HTML 要素をプログラムで制御します。 ServerClick コントロールの HtmlButton イベントのカスタム コードを作成して、コントロールがクリックされたときに実行するアクションを指定できます。
.gif "メモ") メモ |
|---|
HtmlButton コントロールは、JavaScript をクライアント ブラウザーに描画します。このコントロールが正常に動作するには、クライアント ブラウザーで JavaScript が有効になっている必要があります。クライアント スクリプトの詳細については、「ASP.NET Web ページのクライアント スクリプト」を参照してください。 |
ASP.NET (.aspx) ページに配置するボタンの外観もカスタマイズできます。 HTML 4.0 の <button> 要素を使用すると、埋め込み HTML 要素 (他の Web フォーム コントロールも含む) で構成されたボタンを作成できます。
| メモ |
|---|
<button> 要素は、HTML 4.0 仕様で定義されています。 |
HtmlButton コントロールの外観を変更するには、たくさんの方法があります。 たとえば、コントロール要素の開始タグで、コントロールの開始タグと終了タグの間に挿入するテキストに関する書式設定要素などのスタイル属性をボタンに割り当てることができます。プロパティ値の変更をクライアント側の onmouseover イベントと onmouseout イベントに割り当てることもできます。 ボタン要素そのものにイメージを含めることもできます。他の Web フォーム コントロールを含めることもできます。
使用例
スタイル、DHTML イベント、テキスト、およびイメージを HtmlButton コントロールに追加する方法を次のコード例に示します。 <span> 要素で作成された HtmlGenericControl のインスタンスを通じてメッセージを表示する 2 つの単純なイベント ハンドラーのコードも含まれています。
<%@ 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>