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 Forms 컨트롤로 구성된 단추를 만들 수 있습니다.
참고
<button> 요소는 HTML 4.0 사양에 정의되어 있습니다.
HtmlButton 컨트롤의 모양을 수정하는 방법은 여러 가지가 있습니다. 예를 들면 컨트롤 요소의 여는 태그에서 단추에 스타일 특성을 할당하거나, 컨트롤의 여는 태그와 닫는 태그 사이에 삽입하는 텍스트 주위에 서식 지정 요소를 포함하거나, 클라이언트측 onmouseover 및 onmouseout 이벤트에 대한 속성 값의 변경 내용을 지정할 수 있습니다. 또는 단추 요소 자체 안에 이미지나 기타 Web Forms 컨트롤을 포함시킬 수도 있습니다.
예제
다음 코드 예제에서는 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>