PostBack ■ASP.NET

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 속성을 추가하여 다른 컨트롤의 포스트 백 결과를 직접 호출할 수가 있었습니다.

실제 구현에서도 많이 사용되는 부분이기 때문에 꼭 이해하시기 바랍니다.

 

출처 : http://skymong9.egloos.com/1455497


AutoPostBack ■ASP.NET

이벤트 인자(enent argument)

HTML 서버 컨트롤과 웹 폼 컨트롤은 Common Language Runtime(CLR)의 표준을 따르는데, 모든 이벤트는 이벤트를 발생시킨 객체(object)와 해당 이벤트의 정보를 가지는 이벤트 객체(arguments)로 구성되는 두 개의 인자를 가진다.

 

다음은 Button1_Click 이벤트 핸들러이다. 이 소스 코드처럼 대부분의 이벤트 핸들러 함수는 첫 번째 인자로 이벤트가 발생한 객체를 나타내는 Object형 인자와 두번째 인자로 이벤트에 대한 정보를 가지고 있는 System.EventArgs형 인자를 취한다.


EX>
------------------------------------------------------------------

C#

private void Button1_Click(object sender, System.EventArgs e)

{

Response.Write("Button1컨트롤: Click 이벤트 발생<br>");

}

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

일반적으로 두 번째 인자는 System.EventArgs 타입이지만 ImageButton 컨트롤의 경우에는

ImageClickEventArgs형의 인자를 취하는데 이는 사용자가 이미지의 어느 위치를 클릭했는지에 대한 좌표정보를 추가적으로 가지고 있다.

 

AutoPostBack 프로퍼티

기존의 ASP프로그래밍에서는 클라이언트의 사용자가 웹 서버로의 라운드 트립을 일으키는 방법은 특정 페이지로 폼을 서브밋하는 방법과 특정 페이지로 리디렉트하는 방법밖에 없었다. 하지만 ASP.NET에서는 서버 컨트롤의 이벤트에 의해서 라운드 트립이 일어날 수 있다. 하지만 이러한 서버 컨트롤의 이벤트가 모두 서버에서 처리된다면 서버와 클라이언트 간의 라운드 트립이 과다하게 일어나게 된다. 이것은 서버나 클라이언트나 네트워크 측면에서 모두 부담이 될 수밖에 없다.

따라서 기본적으로 Button 계열의 컨트롤의 click 이벤트만 즉시 postback하도록 설정되어 있다. 그외의 이벤트들은 페이지의 POSt시에 일괄적으로 발생하고 처리된다. 하지만 경우에 따라서는 Button 이외의 컨트롤에서도 이벤트가 발생했을 때 즉시 postback되도록 해야 할 필요가 있는데 이 때 사용되는 것이 'AutoPostBack'프로퍼티이다.



[출처] [ASP.NET with C#] 이벤트 인자 & AutoPostBack프로퍼티|작성자 고릴라펀치



 


부산 청사포 ■ PICTURE

























부족한 사진 봐주셔서 감사합니다.


OLYMPUS E-420 + ZUIKO 25mm 2.8F(PEN CAKE)




Triceratops -Fever- ■ TELL THE MUSIC




이 그루브

이 콧소리

아...최고였지...

Mr.Children - Everything(It`s you) ■ TELL THE MUSIC


She & Him Change is hard(live) ■ TELL THE MUSIC




나긋나긋~

조용조용~

좋타~

hide-Dice(LIve) 미분류




hide

치렁치렁한 그가 요즘 다시 보고 싶다...

1 2 3