doPostBack의 이해, a tag에 C# Event 걸기

1.4 doPostBack() 함수 사용하기

 

ASP.NET에서 새롭게 소개 된 웹 폼 페이지에서 서버와의 Submit 동작을 포스트 백(PostBack)이라는 동작으로 처리하고 있습니다. 포스트 백은 버튼 컨트롤(Button, LinkButton, ImageButton)들을 등록하면 확인할 수 있습니다. 이런 포스트 백의 이벤트를 클라이언트 스크립트에서 직접 접근하여 처리하는 방법에 대해서 지금부터 알아보도록 하겠습니다.

 

① PostBack 알아보기

웹 폼을 하나 만든 후 LinkButton과 Button, ImageButton을 하나씩 추가하여 다음과 같이 만들어 봅시다.

 

■ PostBack.aspx

------------------------------------------------------------------------

<%@ Page language="c#" Codebehind="PostBack.aspx.cs" AutoEventWireup="false" Inherits="ClientScript.PostBack" %>


             
                           
                           
                           
                           
                           
             
             
                           

                                        
LinkButton
                                        

                                        

                           
             

------------------------------------------------------------------------

 

PostBack.aspx 페이지를 실행하면 LinkeButton, Button, ImageButton이 출력되고, 각각의버튼을 클릭하면 포스트 백이 발생합니다. ASP.NET에서는 이렇듯 버튼 컨트롤을 사용하는 것 만으로도 포스트 백이 동작하도록 이미 정의가 되어 있는 것입니다. 실행결과를 간단히 살펴본 후 HTML 소스 보기를 이용하여 클라이언트에 출력되는 코드를 한번 살펴보도록 합시다. 다음은 HTML 소스 코드 중에 중요한 내용만 정리한 것입니다.

 

■ PostBack.aspx.html

------------------------------------------------------------------------

…


…

LinkButton

------------------------------------------------------------------------

 

출력되는 HTML 코드에서 확인할 수 있듯이 ASP.NET의 웹 폼은 포스트 백을 기반으로 하며, 포스트 백을 처리하는 클라이언트 스크립트는 바로 __doPostBack() 메서드 부분입니다. LinkButton 컨트롤의 HTML 출력에서의 링크가 javascript:__doPostBack(‘LinkButton1’,’’)으로 설정되어 있는 것을 확인할 수 있습니다. Button 컨트롤의 경우에는 submit으로 변환되기 때문에 버튼을 클릭하면 폼 자체가 submit 되면서 포스트 백이 일어나게 됩니다. 또한 메서드의 인자로 eventTarget과 eventArgument는 각각 포스트 백을 일으키는 컨트롤의 UniqeID와 넘겨주는 인자를 가리키게 됩니다.

 

이렇듯 웹 폼에서 포스트 백 이벤트를 발생하기 위해서는 __doPostBack() 메서드를 호출해야 한다는 것을 한번 더 확인하고 다음으로 넘어갑시다.

 

② 클라이언트 스크립트에서의 포스트 백 사용

포스트 백 이벤트를 클라이언트에서 제어하게 되는 경우를 한번 알아봅시다. 앞서 살펴본 코드에서 포스트 백을 발생하기 위해서는 앞의 코드에서처럼 __doPostBack() 메서드를 사용하여야 하는데 직접 코드를 입력하여도 되지만 ASP.NET에서는 이미 Page 클래스에 메서드가 정의되어 있습니다. 바로 GetPostBackEventReference, GetPostBackClientHyperlink 메서드로 __doPostBack()의 문자로 반환하게 됩니다. 두 메서드의 차이로는 GetPostBackEventReference를 통해서는 doPostBack() 메서드의 문자가 출력되지만, GetPostBackClientHyperlink는 앞의 LinkButton의 출력결과처럼 <a> 태그에서 doPostBack() 메서드를 호출할 수 있도록 javascript: 문자가 앞에 붙게 됩니다. 이런 메서드들을 이용한다면 쉽게 클라이언트 스크립트나 HTML 컨트롤에서 포스트 백을 구현할 수 있게 됩니다.

 

그렇다면 실제 어떤 경우에 클라이언트에서 포스트 백을 사용하게 될까요? 예를 들어 버튼을 클릭하였을 때 발생하는 이벤트를 이미지의 하이퍼 링크를 클릭하였을 때도 똑같이 발생하고자 할 때, 로그인을 할 때 TextBox 컨트롤을 사용하고 있는 경우에 엔터를 눌렀을 때 버튼을 클릭한 것과 동일한 이벤트를 수행하고자 할 때 여러 가지 상황에서 활용할 수 있게 됩니다. 지금부터 간단한 예제를 통하여 클라이언트 또는 다른 컨트롤의 포스트 백으로 직접 접근하는 방법에 대해서 알아보도록 합시다. 예제는 Label 컨트롤과 Button 컨트롤을 추가하고, Button 컨트롤을 클릭할 때 Label에 버튼을 클릭하였다는 문자를 출력하게 됩니다. 간단히 이렇게 구현한 다음 HTML의 Button 컨트롤, HyperLink 컨트롤, TextBox 컨트롤들을 추가하여 각각 버튼을 클릭하였을 때와 엔터를 쳤을 때 모두 Button을 클릭한 결과를 나타낼 수 있도록 변경하였습니다. 코드를 확인해 봅시다.

 

■ DoPostBack.aspx

------------------------------------------------------------------------

<%@ Page language="c#" Codebehind="DoPostBack.aspx.cs" AutoEventWireup="false" Inherits="ClientScript.DoPostBack" %>


             
                           
                           
                           
                           
                           
                     
             
             
                           
                                        

                                        

                                        

                                        
HyperLink
                                        

                                        
">[HTML HyperLink]
                                        

                           
             

------------------------------------------------------------------------

 

■ DoPostBack.aspx.cs (중요부분)

------------------------------------------------------------------------

private void Page_Load(object sender, System.EventArgs e)
{
             // 여기에 사용자 코드를 배치하여 페이지를 초기화합니다.
             Button2.Attributes["OnClick"] = "ImgButtonClick();";
             IMG1.Attributes["OnClick"] = "ImgButtonClick();";
             HyperLink1.NavigateUrl = Page.GetPostBackClientHyperlink(Button1, "");
             TextBox1.Attributes["onKeyPress"] = "if(event.keyCode == 13) {" + Page.GetPostBackEventReference(Button1) + "; return false;}";
}

…

private void Button1_Click(object sender, System.EventArgs e)
{
             Label1.Text += "Button 컨트롤에 의해 PostBack 되었습니다

";
}

------------------------------------------------------------------------

 

코드를 하나씩 확인해 보도록 합시다. 우선 aspx 파일에서 ImgButtonClick() 메서드를 선언하고, <%=Page.GetPostBackEventReference(Button1)%>를 통해서 Button1을 클릭하였을 때의 포스트 백을 발생하게 됩니다. 이런 효과는 cs 파일의 Button2.Attributes["OnClick"] = "ImgButtonClick();" 구문과 IMG1.Attributes["OnClick"] = "ImgButtonClick();" 구문에서 각각 처리되는 것을 확인할 수 있습니다. 출력되는 결과의 HTML 코드를 확인해 보면 각각의 컨트롤에 ImgButtonClick() 메서드가 맵핑되어 있는 것을 확인할 수 있습니다.

 

그리고 cs 파일의 HyperLink1.NavigateUrl = Page.GetPostBackClientHyperlink(Button1, "") 구문과 aspx 파일의 <a href="<%=Page.GetPostBackClientHyperlink(Button1, "")%>"> 구문을 통해서는 javascript:doPostBack(‘Button’,’’)로 맵핑하고 있습니다.

 

마지막으로 TextBox 컨트롤의 TextBox1.Attributes["onKeyPress"] = "if(event.keyCode == 13) {" + Page.GetPostBackEventReference(Button1) + "; return false;}" 통해서 엔터를 눌렀을 때에는 Button 클릭의 포스트 백을 발생하라고 선언하고 있습니다. 모든 작업이 완료된 후 실행 결과를 확인해 봅시다.