AJAX 컨트롤 도구 키트의 PopupControl 확장기는 다른 컨트롤이 활성화될 때 팝업을 트리거하는 쉬운 방법을 제공합니다. 한 페이지에서 둘 이상의 팝업 컨트롤을 사용할 수도 있습니다.
개요
AJAX 컨트롤 도구 키트의 PopupControl 확장기는 다른 컨트롤이 활성화될 때 팝업을 트리거하는 쉬운 방법을 제공합니다. 한 페이지에서 둘 이상의 팝업 컨트롤을 사용할 수도 있습니다.
단계
ASP.NET AJAX 및 Control Toolkit의 기능을 활성화하려면 컨트롤을 ScriptManager 페이지의 아무 곳에나 배치해야 합니다(요소 내 <form> ).
<asp:ScriptManager ID="asm" runat="server" />
다음으로 팝업 역할을 하는 패널을 추가합니다. 현재 시나리오에서 패널에는 컨트롤이 포함되어 있습니다 Calendar . 일정의 포스트백으로 인한 페이지 새로 고침을 방지하기 위해 패널이 컨트롤 내에 UpdatePanel 배치됩니다.
<asp:Panel ID="pnlCalendar" runat="server">
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:Calendar ID="c1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
페이지에는 두 개의 텍스트 상자도 포함되어 있습니다. 각 텍스트 상자에 대해 텍스트 상자가 활성화되면 일정 팝업이 나타납니다.
<div>
Departure date: <asp:TextBox ID="tbDeparture" runat="server" />
Return date: <asp:TextBox ID="tbReturn" runat="server" />
</div>
이제 두 텍스트 상자 각각을 로 확장합니다 PopupControlExtender. 특성은 TargetControlID extender에 연결된 컨트롤의 ID를 제공합니다. 특성에는 PopupControlID 팝업 패널의 ID가 포함됩니다. 이 경우 두 확장기 모두 동일한 패널을 표시하지만 다른 패널도 가능합니다.
<ajaxToolkit:PopupControlExtender ID="pce1" runat="server"
TargetControlID="tbDeparture" PopupControlID="pnlCalendar" Position="Bottom" />
<ajaxToolkit:PopupControlExtender ID="pce2" runat="server"
TargetControlID="tbReturn" PopupControlID="pnlCalendar" Position="Bottom" />
이제 텍스트 필드 내에서 클릭할 때마다 일정이 필드 아래에 표시되어 날짜를 선택할 수 있습니다. (선택한 날짜를 텍스트 상자로 다시 가져오는 방법은 다른 자습서에서 다룹니다.)
사용자가 텍스트 상자를 클릭하면 일정이 나타납니다(전체 크기 이미지를 보려면 클릭).
