여러 팝업 컨트롤 사용(C#)

작성자: Christian Wenz

PDF 다운로드

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" />

이제 텍스트 필드 내에서 클릭할 때마다 일정이 필드 아래에 표시되어 날짜를 선택할 수 있습니다. (선택한 날짜를 텍스트 상자로 다시 가져오는 방법은 다른 자습서에서 다룹니다.)

사용자가 텍스트 상자를 클릭하면 일정이 나타납니다(전체 크기 이미지를 보려면 클릭).

다음