AJAX 컨트롤 도구 키트의 PopupControl extender는 다른 컨트롤이 활성화될 때 팝업을 트리거하는 쉬운 방법을 제공합니다. 이러한 패널에서 포스트백이 발생하고 페이지에 여러 패널이 있는 경우 클릭한 패널을 결정하기가 어렵습니다.
개요
AJAX 컨트롤 도구 키트의 PopupControl extender는 다른 컨트롤이 활성화될 때 팝업을 트리거하는 쉬운 방법을 제공합니다. 이러한 패널에서 포스트백이 발생하고 페이지에 여러 패널이 있는 경우 클릭한 패널을 결정하기가 어렵습니다.
단계
를 포스트백과 함께 사용 PopupControl 하지만 페이지에 가 UpdatePanel 없으면 컨트롤 도구 키트는 어떤 클라이언트 요소가 팝업을 트리거하여 포스트백을 발생시켰는지 확인하는 방법을 제공하지 않습니다. 그러나 작은 트릭은 이 시나리오에 대한 해결 방법을 제공합니다.
우선, 다음은 기본 설정입니다. 두 텍스트 상자는 모두 동일한 팝업, 달력을 트리거합니다. 두 개의 PopupControlExtenders 텍스트 상자와 팝업을 함께 가져옵니다.
<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:Calendar ID="c1" runat="server" OnSelectionChanged="c1_SelectionChanged" />
</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>
기본 아이디어는 팝업을 시작한 텍스트 상자를 포함하는 요소에 <form> 숨겨진 양식 필드를 추가하는 것입니다.
<input type="hidden" id="tbHidden" runat="server" />
페이지가 로드되면 JavaScript 코드는 두 텍스트 상자에 이벤트 처리기를 추가합니다. 사용자가 텍스트 상자를 클릭할 때마다 해당 이름이 숨겨진 양식 필드에 기록됩니다.
<script type="text/javascript">
function pageLoad()
{
$get("tbDeparture").onclick = saveTextBox;
$get("tbReturn").onclick = saveTextBox;
}
function saveTextBox()
{
$get("tbHidden").value = this.id;
}
</script>
서버 쪽 코드에서 숨겨진 필드의 값을 읽어야 합니다. 숨겨진 양식 필드는 조작하기 매우 간단하므로 숨겨진 값의 유효성을 검사하는 안전 목록 접근 방식이 필요합니다. 올바른 텍스트 상자가 식별되면 달력의 날짜가 기록됩니다.
<script runat="server">
Protected Sub c1_SelectionChanged(sender As object, e As EventArgs)
Dim id As String = tbHidden.Value
If (id = "tbDeparture" Or id = "tbReturn")
Dim tb As TextBox = CType(FindControl(id), TextBox)
tb.Text = CType(sender, Calendar).SelectedDate.ToShortDateString()
End If
End Sub
</script>
사용자가 텍스트 상자를 클릭하면 일정이 나타납니다(전체 크기 이미지를 보려면 클릭).
날짜를 클릭하면 텍스트 상자에 배치됩니다(전체 크기 이미지를 보려면 클릭).
