방법: ASP.NET 웹 서버 컨트롤에 클라이언트 스크립트 이벤트 추가

Visual Studio 2010

업데이트: 2007년 11월

클라이언트 스크립트를 HTML 요소에 추가하는 것처럼 ASP.NET 웹 페이지의 컨트롤에도 선언적으로 추가할 수 있습니다. 또는 클라이언트 스크립트 이벤트를 프로그래밍 방식으로 ASP.NET 웹 서버 컨트롤에 추가할 수도 있습니다. 이 방법은 이벤트 또는 코드가 런타임에만 사용할 수 있는 정보에 의존하는 경우 유용합니다.

7ytf5t7k.alert_note(ko-kr,VS.100).gif참고:

클라이언트 스크립트에서 ID를 기준으로 컨트롤을 참조할 수 있습니다. 자세한 내용은 ASP.NET 웹 페이지의 클라이언트 스크립트를 참조하십시오.

클라이언트 스크립트 onclick 이벤트를 단추에 추가하려면 이 항목의 뒷부분에 나오는 특수한 절차를 수행해야 합니다.

7ytf5t7k.alert_note(ko-kr,VS.100).gif참고:

브라우저에 따라 클라이언트 스크립트에 대한 지원 형식이 다릅니다. 예를 들어 Internet Explorer, Mozilla 및 모바일 장치용 브라우저에서는 각각 다른 형식으로 클라이언트 스크립트를 지원합니다.

클라이언트 이벤트 처리기를 선언적으로 ASP.NET 서버 컨트롤에 추가하려면

  • 컨트롤의 태그에서 onmouseover 또는 onkeyup 같은 이벤트 특성을 추가합니다. 특성 값에 대해서는 실행할 클라이언트 스크립트를 추가합니다.

    7ytf5t7k.alert_note(ko-kr,VS.100).gif참고:

    특성에서 클라이언트 스크립트 뒤에는 항상 세미콜론(;)을 추가해야 합니다. 이렇게 하면 ASP.NET에서 컨트롤에 대한 클라이언트 스크립트를 생성하는 경우(예: 컨트롤의 AutoPostBack 속성이 true로 설정되어 있는 경우) 사용자 코드가 맨 먼저 실행됩니다.

    컨트롤의 태그에서 컨트롤 속성과 일치하지 않는 특성/값 쌍은 원래 상태로 브라우저에 전달됩니다.

    다음 코드 예제에서는 사용자가 마우스를 단추 위로 가져가면 단추의 텍스트 색을 변경하는 클라이언트 스크립트가 포함된 ASP.NET 웹 페이지를 보여 줍니다.

    <%@ Page Language="VB"%>
    <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>
    
<%@ 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 Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs)
        Dim displayControlName As String = "spanCounter"
        TextBox1.Attributes.Add("onkeyup", _
            displayControlName & ".innerText=this.value.length;")
    End Sub
    
protected void Page_Load(object sender, EventArgs e)
{
    String displayControlName = "spanCounter";
    TextBox1.Attributes.Add("onkeyup", displayControlName + 
        ".innerText=this.value.length;");
}

단추 컨트롤에 클라이언트 onclick 이벤트를 추가하려면

  • 단추 컨트롤(Button, LinkButtonImageButton 컨트롤)에서 실행할 클라이언트 스크립트를 OnClientClick 속성 값으로 설정합니다.

    다음 코드 예제에서는 Button 컨트롤에 클라이언트 스크립트 click 이벤트를 추가하는 방법을 보여 줍니다.

    <%@ Page Language="VB" %>
    <script runat="server">
        Sub Button1_Click(ByVal sender As Object, _
            ByVal e As System.EventArgs)
            Label1.Text = "Server click handler called."
        End Sub
    </script>
    
    <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>
    
<%@ Page Language="C#" %>
<script runat="server">
    protected void Button1_Click(Object sender, EventArgs e)
    {
        Label1.Text = "Server click handler called.";
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<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>

클라이언트 스크립트는 클라이언트 컴퓨터에서 잠재적으로 악의적인 함수를 수행할 가능성이 있습니다. 특히 사용자 입력에 대한 응답으로 스크립트가 생성 또는 변경되는 경우에는 페이지에 스크립트를 작성할 때 매우 주의해야 합니다. 자세한 내용은 스크립트 악용 개요를 참조하십시오.

표시: