Obsługa ogłaszania zwrotnego z kontrolki Popup bez kontrolki UpdatePanel (C#)

Artykuł
07/13/2023

Rozszerzenie PopupControl w zestawie narzędzi AJAX Control Toolkit oferuje łatwy sposób wyzwalania wyskakującego okienka po aktywowaniu dowolnej innej kontrolki. Po wystąpieniu ogłaszania zwrotnego w takim panelu i na stronie znajduje się kilka paneli, trudno jest określić, który panel został kliknięty.

Omówienie

Rozszerzenie PopupControl w zestawie narzędzi AJAX Control Toolkit oferuje łatwy sposób wyzwalania wyskakującego okienka po aktywowaniu dowolnej innej kontrolki. Po wystąpieniu ogłaszania zwrotnego w takim panelu i na stronie znajduje się kilka paneli, trudno jest określić, który panel został kliknięty.

Kroki

W przypadku korzystania z PopupControl elementu z ogłaszaniem zwrotnym, ale bez UpdatePanel wyświetlania elementu na stronie zestaw narzędzi Control Toolkit nie oferuje możliwości określenia, który element klienta wyzwolił wyskakujące okienko, co z kolei spowodowało powrót. Jednak mała sztuczka stanowi obejście tego scenariusza.

Po pierwsze, oto podstawowa konfiguracja: dwa pola tekstowe, które wyzwalają to samo wyskakujące okienko, kalendarz. Dwa PopupControlExtenders razem łączą pola tekstowe i wyskakujące okienka.

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

Podstawowym pomysłem jest dodanie ukrytego pola formularza w <form> elemecie zawierającym pole tekstowe, które uruchomiło wyskakujące okienko:

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

Po załadowaniu strony kod JavaScript dodaje procedurę obsługi zdarzeń do obu pól tekstowych: za każdym razem, gdy użytkownik kliknie pole tekstowe, jego nazwa jest zapisywana w polu formularza ukrytego:

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

W kodzie po stronie serwera należy odczytać wartość ukrytego pola. Ponieważ ukryte pola formularza są proste do manipulowania, wymagane jest bezpieczne podejście do sprawdzania poprawności ukrytej wartości. Po zidentyfikowaniu poprawnego pola tekstowego data z kalendarza zostanie zapisana w nim.

<script runat="server">
 protected void c1_SelectionChanged(object sender, EventArgs e)
 {
 string id = tbHidden.Value;
 if (id == "tbDeparture" || id == "tbReturn")
 {
 TextBox tb = (TextBox)FindControl(id);
 tb.Text = (sender as Calendar).SelectedDate.ToShortDateString();
 }
 }
</script>