UpdatePanel을 사용하여 팝업 컨트롤에서 포스트백 처리(C#)Handling Postbacks from A Popup Control With an UpdatePanel (C#)

Christian Wenzby Christian Wenz

코드 다운로드 또는 PDF 다운로드Download Code or Download PDF

AJAX 컨트롤 도구 키트의 PopupControl extender는 다른 컨트롤이 활성화 될 때 팝업을 쉽게 트리거하는 방법을 제공 합니다.The PopupControl extender in the AJAX Control Toolkit offers an easy way to trigger a popup when any other control is activated. 이러한 팝업 내에서 포스트백이 발생 하는 경우 특별 한 주의를 기울여야 합니다.Special care has to be taken when a postback occurs within such a popup.

개요Overview

AJAX 컨트롤 도구 키트의 PopupControl extender는 다른 컨트롤이 활성화 될 때 팝업을 쉽게 트리거하는 방법을 제공 합니다.The PopupControl extender in the AJAX Control Toolkit offers an easy way to trigger a popup when any other control is activated. 이러한 팝업 내에서 포스트백이 발생 하는 경우 특별 한 주의를 기울여야 합니다.Special care has to be taken when a postback occurs within such a popup.

단계Steps

포스트백을 사용 하 여 PopupControl를 사용 하는 경우 UpdatePanel는 포스트백으로 인 한 페이지 새로 고침을 방지할 수 있습니다.When using a PopupControl with a postback, an UpdatePanel can prevent the page refresh caused by the postback. 다음 태그는 몇 가지 중요 한 요소를 정의 합니다.The following markup defines a couple of important elements:

  • ASP.NET AJAX 컨트롤 Toolkit이 작동 하도록 하는 ScriptManager 컨트롤A ScriptManager control so that the ASP.NET AJAX Control Toolkit works
  • 둘 다 popup을 트리거하는 두 개의 TextBox 컨트롤Two TextBox controls which will both trigger a popup
  • Popup으로 사용할 Panel 컨트롤A Panel control that will serve as the popup
  • 패널 내에서 Calendar 컨트롤은 UpdatePanel 컨트롤 내에 포함 되어 있습니다.Within the panel, a Calendar control is embedded within an UpdatePanel control
  • 텍스트 상자에 패널을 할당 하는 두 개의 PopupControlExtender 컨트롤Two PopupControlExtender controls that assign the panel to the text boxes
<form id="form1" runat="server">
 <asp:ScriptManager ID="asm" runat="server" />
 <div>
 Departure date: <asp:TextBox ID="tbDeparture" runat="server" />
 Return date: <asp:TextBox ID="tbReturn" runat="server" />
 </div>
 <asp:Panel ID="pnlCalendar" runat="server">
 <asp:UpdatePanel ID="up1" runat="server">
 <ContentTemplate>
 <asp:Calendar ID="c1" runat="server" 
 OnSelectionChanged="c1_SelectionChanged" />
 </ContentTemplate>
 </asp:UpdatePanel>
 </asp:Panel>
 <ajaxToolkit:PopupControlExtender ID="pce1" runat="server"
 TargetControlID="tbDeparture" PopupControlID="pnlCalendar" Position="Bottom" />
 <ajaxToolkit:PopupControlExtender ID="pce2" runat="server"
 TargetControlID="tbReturn" PopupControlID="pnlCalendar" Position="Bottom" />
</form>

Calendar 컨트롤의 OnSelectionChanged 특성이 설정 되어 있는지 확인 합니다.Note that the OnSelectionChanged attribute of the Calendar control is set. 따라서 사용자가 일정 내에서 날짜를 선택 하면 포스트백이 발생 하 고 서버 쪽 메서드 c1_SelectionChanged()이 실행 됩니다.So when the user selects a date within the calendar, a postback occurs and the server-side method c1_SelectionChanged() is executed. 이 메서드 내에서 현재 날짜를 검색 하 여 텍스트 상자에 다시 써야 합니다.Within that method, the current date must be retrieved and written back to the textbox.

이에 대 한 구문은 다음과 같습니다. 즉, 먼저 페이지의 PopupControlExtender에 대 한 프록시 개체를 생성 해야 합니다.The syntax for that is as follows: First of all, a proxy object for the PopupControlExtender on the page must be generated. ASP.NET AJAX 컨트롤 도구 키트는 GetProxyForCurrentPopup() 메서드를 제공 합니다.The ASP.NET AJAX Control Toolkit offers the GetProxyForCurrentPopup() method. 이 메서드가 반환 하는 개체는 메서드 호출을 트리거한 컨트롤이 아니라 popup을 트리거한 컨트롤로 값을 다시 보내는 Commit() 메서드를 지원 합니다.The object this method returns supports the Commit() method which sends a value back to the control that triggered the popup (not the control that triggered the method call!). 다음 코드에서는 선택 된 날짜를 Commit() 메서드에 대 한 인수로 제공 하 여 코드에서 선택한 날짜를 텍스트 상자에 다시 씁니다.The following code provides the selected date as the argument for the Commit() method, causing the code to write the selected date back to the text box:

<script runat="server">
 protected void c1_SelectionChanged(object sender, EventArgs e)
 {
 PopupControlExtender pce = AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page);
 pce.Commit((sender as Calendar).SelectedDate.ToShortDateString());
 }
</script>

이제 달력 날짜를 클릭할 때마다 선택한 날짜가 연결 된 텍스트 상자에 표시 되어 현재 여러 웹 사이트에서 찾을 수 있는 날짜 선택 컨트롤을 만듭니다.Now whenever you click on a calendar date, the selected date appears in the associated text box, creating a date picker control that can currently be found on many websites.

사용자가 텍스트 상자를 클릭할 때 달력이 표시 되는 The Calendar appears when the user clicks into the textbox

사용자가 텍스트 상자를 클릭 하면 달력이 나타납니다 (전체 크기 이미지를 보려면 클릭).The Calendar appears when the user clicks into the textbox (Click to view full-size image)

날짜를 클릭 텍스트 상자에 배치 됩니다.Clicking on a date puts it in the textbox

날짜를 클릭 하면 텍스트 상자에 배치 됩니다 (전체 크기 이미지를 보려면 클릭).Clicking on a date puts it in the textbox (Click to view full-size image)