클라이언트 스크립트를 HTML 요소에 추가하는 것처럼 ASP.NET 웹 페이지의 컨트롤에도 선언적으로 추가할 수 있습니다. 또는 클라이언트 스크립트 이벤트를 프로그래밍 방식으로 ASP.NET 웹 서버 컨트롤에 추가할 수도 있습니다. 이 방법은 이벤트 또는 코드가 런타임에만 사용할 수 있는 정보에 의존하는 경우 유용합니다.
.gif) 참고 |
|---|
|
클라이언트 스크립트에서 ID를 기준으로 컨트롤을 참조할 수 있습니다. 자세한 내용은 ASP.NET 웹 페이지의 클라이언트 스크립트를 참조하십시오. |
클라이언트 스크립트 onclick 이벤트를 단추에 추가하려면 이 항목의 뒷부분에 나오는 특수한 절차를 수행해야 합니다.
| 참고 |
|---|
|
브라우저에 따라 클라이언트 스크립트에 대한 지원 형식이 다릅니다. 예를 들어 Internet Explorer, Mozilla 및 모바일 장치용 브라우저에서는 각각 다른 형식으로 클라이언트 스크립트를 지원합니다. |
클라이언트 이벤트 처리기를 선언적으로 ASP.NET 서버 컨트롤에 추가하려면
-
컨트롤의 태그에서 onmouseover 또는 onkeyup 같은 이벤트 특성을 추가합니다. 특성 값에 대해서는 실행할 클라이언트 스크립트를 추가합니다.
참고 특성에서 클라이언트 스크립트 뒤에는 항상 세미콜론(;)을 추가해야 합니다. 이렇게 하면 ASP.NET에서 컨트롤에 대한 클라이언트 스크립트를 생성하는 경우(예: 컨트롤의 AutoPostBack 속성이 true로 설정되어 있는 경우) 사용자 코드가 맨 먼저 실행됩니다.
컨트롤의 태그에서 컨트롤 속성과 일치하지 않는 특성/값 쌍은 원래 상태로 브라우저에 전달됩니다.
다음 코드 예제에서는 사용자가 마우스를 단추 위로 가져가면 단추의 텍스트 색을 변경하는 클라이언트 스크립트가 포함된 ASP.NET 웹 페이지를 보여 줍니다.
C#
코드 복사<%@ Page Language="C#" %>
<html>
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
var previousColor;
function MakeRed()
{
previousColor = window.event.srcElement.style.color;
window.event.srcElement.style.color = "#FF0000";
}
function RestoreColor()
{
window.event.srcElement.style.color = previousColor;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:button id="Button1" runat="server"
text="Button1"
onmouseover="MakeRed();"
onmouseout="RestoreColor();" />
</form>
</body>
</html>클라이언트 이벤트 처리기를 프로그래밍 방식으로 ASP.NET 컨트롤에 추가하려면
-
페이지의 Init 또는 Load 이벤트에서 컨트롤에 대한 Attributes 컬렉션의 Add 메서드를 호출합니다.
다음 코드 예제에서는 TextBox 컨트롤에 클라이언트 스크립트를 추가하는 방법을 보여 줍니다. 이 클라이언트 스크립트는 TextBox 컨트롤의 텍스트 길이를 표시합니다. 이 때 스크립트에서는 페이지에 spanCounter라는 span 요소가 포함되어 있다고 가정합니다.
protected void Page_Load(object sender, EventArgs e) { String displayControlName = "spanCounter"; TextBox1.Attributes.Add("onkeyup", displayControlName + ".innerText=this.value.length;"); }
단추 컨트롤에 클라이언트 onclick 이벤트를 추가하려면
-
단추 컨트롤(Button, LinkButton 및 ImageButton 컨트롤)에서 실행할 클라이언트 스크립트를 OnClientClick 속성 값으로 설정합니다.
다음 코드 예제에서는 Button 컨트롤에 클라이언트 스크립트 click 이벤트를 추가하는 방법을 보여 줍니다.
<%@ Page Language="C#" %> <script runat="server"> protected void Button1_Click(Object sender, EventArgs e) { Label1.Text = "Server click handler called."; } </script> <html > <body> <form id="form1" runat="server"> <asp:Button ID="Button1" Runat="server" OnClick="Button1_Click" OnClientClick="return confirm('Ready to submit.')" Text="Test Client Click" /> <br /> <asp:Label ID="Label1" Runat="server" text="" /> </form> </body> </html>
보안
클라이언트 스크립트는 클라이언트 컴퓨터에서 잠재적으로 악의적인 함수를 수행할 가능성이 있습니다. 특히 사용자 입력에 대한 응답으로 스크립트가 생성 또는 변경되는 경우에는 페이지에 스크립트를 작성할 때 매우 주의해야 합니다. 자세한 내용은 스크립트 악용 개요를 참조하십시오.
원문보기