AJAX 컨트롤 도구 키트의 PopupControl 확장기는 다른 컨트롤이 활성화될 때 팝업을 트리거하는 쉬운 방법을 제공합니다. 이러한 팝업 내에서 포스트백이 발생할 때 특별한 주의를 기울여야 합니다.
개요
AJAX 컨트롤 도구 키트의 PopupControl 확장기는 다른 컨트롤이 활성화될 때 팝업을 트리거하는 쉬운 방법을 제공합니다. 이러한 팝업 내에서 포스트백이 발생할 때 특별한 주의를 기울여야 합니다.
단계
를 포스트백과 함께 사용하는 PopupControl 경우 는 UpdatePanel 포스트백으로 인한 페이지 새로 고침을 방지할 수 있습니다. 다음 태그는 몇 가지 중요한 요소를 정의합니다.
-
ScriptManagerASP.NET AJAX 컨트롤 도구 키트가 작동할 수 있도록 하는 컨트롤 - 둘 다 팝업을 트리거하는 두 개의
TextBox컨트롤 -
Panel팝업으로 사용할 컨트롤 - 패널
Calendar내에서 컨트롤이 컨트롤 내에UpdatePanel포함됩니다. - 텍스트 상자에 패널을 할당하는 두 개의
PopupControlExtender컨트롤
<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>
컨트롤의 OnSelectionChanged 특성이 Calendar 설정됩니다. 따라서 사용자가 일정 내에서 날짜를 선택하면 포스트백이 발생하고 서버 쪽 메서드 c1_SelectionChanged() 가 실행됩니다. 해당 메서드 내에서 현재 날짜를 검색하고 텍스트 상자에 다시 작성해야 합니다.
의 구문은 다음과 같습니다. 우선 페이지에서 의 프록시 개체 PopupControlExtender 를 생성해야 합니다. ASP.NET AJAX 컨트롤 도구 키트는 메서드를 GetProxyForCurrentPopup() 제공합니다. 이 메서드가 반환하는 개체는 값을 팝업을 트리거한 컨트롤(메서드 호출을 트리거한 컨트롤이 아님)으로 다시 보내는 메서드를 지원 Commit() 합니다. 다음 코드는 선택한 날짜를 메서드의 인수 Commit() 로 제공하므로 코드는 선택한 날짜를 텍스트 상자에 다시 작성합니다.
<script runat="server">
Protected Sub c1_SelectionChanged(sender As object, e As EventArgs)
Dim pce As PopupControlExtender = AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page)
pce.Commit(CType(sender, Calendar).SelectedDate.ToShortDateString())
End Sub
</script>
이제 일정 날짜를 클릭할 때마다 선택한 날짜가 연결된 텍스트 상자에 표시되어 현재 많은 웹 사이트에서 찾을 수 있는 날짜 선택 컨트롤을 만듭니다.
사용자가 텍스트 상자를 클릭하면 일정이 나타납니다(전체 크기 이미지를 보려면 클릭).
날짜를 클릭하면 텍스트 상자에 배치됩니다(전체 크기 이미지를 보려면 클릭).
