Gerir os postbacks a partir de um controle popup sem um UpdatePanel (VB)

por Christian Wenz

Descarregar PDF

O extensor PopupControl no AJAX Control Toolkit oferece uma forma fácil de ativar um pop-up quando qualquer outro controlo está ativado. Quando ocorre uma ocorrência de postback num destes painéis e há vários painéis na página, é difícil determinar qual o painel que foi clicado.

Descrição geral

O extensor PopupControl no AJAX Control Toolkit oferece uma forma fácil de ativar um pop-up quando qualquer outro controlo está ativado. Quando ocorre um postback num painel e há vários painéis na página, é difícil determinar qual painel foi acionado.

Passos

Ao utilizar um PopupControl com um postback, mas sem um UpdatePanel na página, o Control Toolkit não oferece uma maneira de determinar qual elemento cliente desencadeou o popup, que por sua vez originou o postback. No entanto, um pequeno truque oferece uma solução alternativa para este cenário.

Antes de mais, aqui está a configuração básica: duas caixas de texto que ativam o mesmo pop-up, um calendário. Dois PopupControlExtenders unem caixas de texto e pop-ups.

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

A ideia básica é adicionar um campo de formulário oculto no <form> elemento que contém a caixa de texto que deu início ao pop-up:

<input type="hidden" id="tbHidden" runat="server" />

Quando a página é carregada, o código JavaScript adiciona um gestor de eventos a ambas as caixas de texto: Sempre que o utilizador clica numa caixa de texto, o seu nome é escrito no campo de formulário oculto:

<script type="text/javascript">
 function pageLoad()
 {
 $get("tbDeparture").onclick = saveTextBox;
 $get("tbReturn").onclick = saveTextBox;
 }
 function saveTextBox()
 {
 $get("tbHidden").value = this.id;
 }
</script>

No código do lado do servidor, o valor do campo oculto deve ser lido. Como os campos de formulário oculto são triviais de manipular, é necessária uma abordagem de safelist para validar o valor oculto. Depois de identificada a caixa de texto correta, a data do calendário é escrita nela.

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

O Calendário aparece quando o utilizador clica na caixa de texto (Clique para ver a imagem em tamanho real)

Ao clicar numa data, aparece na caixa de texto (Clique para ver a imagem em tamanho real)