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" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>PostBackForm</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
</HEAD>
<body MS_POSITIONING="FlowLayout">
<form id="PostBackForm" method="post" runat="server">
<P><asp:linkbutton id="LinkButton1" runat="server">LinkButton</asp:linkbutton></P>
<P><asp:button id="Button1" runat="server" Text="Button"></asp:button></P>
<P><asp:ImageButton id="ImageButton1" runat="server" ImageUrl="register.gif">
</asp:ImageButton></P>
</form>
</body>
</HTML>
------------------------------------------------------------------------
PostBack.aspx 페이지를 실행하면 LinkeButton, Button, ImageButton이 출력되고, 각각의버튼을 클릭하면 포스트 백이 발생합니다.
ASP.NET에서는 이렇듯 버튼 컨트롤을 사용하는 것 만으로도 포스트 백이 동작하도록 이미 정의가 되어 있는 것입니다.
실행결과를 간단히 살펴본 후 HTML 소스 보기를 이용하여 클라이언트에 출력되는 코드를 한번 살펴보도록 합시다.
다음은 HTML 소스 코드 중에 중요한 내용만 정리한 것입니다.
■ PostBack.aspx.html
------------------------------------------------------------------------
<form name="PostBackForm" method="post" action="PostBack.aspx" id="PostBackForm">
<input type="hidden" name="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" value="dDwxMzA4NzEwNzUwOztsPEltYWdlQnV0dG9uMTs+PjnNwC+C4uWJMPgyQyc2Jqn06mS1" />
<script language="javascript">
<!--
function __doPostBack(eventTarget, eventArgument) {
var theform;
if (window.navigator.appName.toLowerCase().indexOf("netscape") > -1) {
theform = document.forms["PostBackForm"];
}
else {
theform = document.PostBackForm;
}
theform.__EVENTTARGET.value = eventTarget.split("$").join(":");
theform.__EVENTARGUMENT.value = eventArgument;
theform.submit();
}
// -->
</script>
<a id="LinkButton1" href="javascript:__doPostBack('LinkButton1','')">LinkButton</a>
<input type="submit" name="Button1" value="Button" id="Button1" />
<input type="image" name="ImageButton1" id="ImageButton1" src="register.gif" border="0" />
------------------------------------------------------------------------
출력되는 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" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>DoPostBack</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script language="javascript">
function ImgButtonClick()
{
if (confirm("등록하시겠습니까?"))
{
<%=Page.GetPostBackEventReference(Button1)%>;
}
}
</script>
</HEAD>
<body MS_POSITIONING="FlowLayout">
<form id="Form1" method="post" runat="server">
<P><asp:Label id="Label1" runat="server"></asp:Label></P>
<P><asp:Button id="Button1" runat="server" Text="Button"></asp:Button></P>
<P><INPUT id="Button2" type="button" value="Button" name="Button3" runat="server"></P>
<P><asp:HyperLink id="HyperLink1" runat="server">HyperLink</asp:HyperLink></P>
<P><IMG id="IMG1" alt="" src="register.gif" runat="server"></P>
<P><a href="<%=Page.GetPostBackClientHyperlink(Button1, "")%>">
[HTML HyperLink]</a></P>
<P><asp:TextBox id="TextBox1" runat="server"></asp:TextBox></P>
</form>
</body>
</HTML>
----------------------------------------------------------------------------------------
■ 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 되었습니다<br>";
}
----------------------------------------------------------------------------------------
코드를 하나씩 확인해 보도록 합시다.
우선 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 클릭의 포스트 백을 발생하라고 선언하고 있습니다. 모든 작업이 완료된 후 실행 결과를 확인해 봅시다.
***********************그림**************************
실행 결과에서처럼 필요한 경우 클라이언트 또는 Attributes 속성을 추가하여 다른 컨트롤의 포스트 백 결과를 직접 호출할 수가 있었습니다.
실제 구현에서도 많이 사용되는 부분이기 때문에 꼭 이해하시기 바랍니다.
최근 덧글