Zpracování postbacků z ovládacího prvku Automaticky otevírané okno bez ovládacího prvku UpdatePanel (C#)

Článek
07/13/2023

Extender PopupControl v sadě nástrojů AJAX Control Toolkit nabízí snadný způsob, jak aktivovat automaticky otevírané okno, když je aktivován jakýkoli jiný ovládací prvek. Když se v takovém panelu objeví postback a na stránce je několik panelů, je těžké určit, který panel byl kliknul.

Přehled

Extender PopupControl v sadě nástrojů AJAX Control Toolkit nabízí snadný způsob, jak aktivovat automaticky otevírané okno, když je aktivován jakýkoli jiný ovládací prvek. Když se v takovém panelu objeví postback a na stránce je několik panelů, je těžké určit, který panel byl kliknul.

Postup

Při použití PopupControl s postback, ale bez na UpdatePanel stránce, Control Toolkit nenabízí způsob, jak určit, který prvek klienta aktivoval automaticky otevírané okno, které způsobilo postback. Pro tento scénář ale nabízí alternativní řešení malý trik.

Nejprve je zde základní nastavení: dvě textová pole, která aktivují stejné automaticky otevírané okno, kalendář. Dvě PopupControlExtenders s sebou spojují textová pole a automaticky otevírané okno.

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

Základní myšlenkou je přidat skryté pole formuláře do <form> prvku, který obsahuje textové pole, které spustilo automaticky otevírané okno:

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

Po načtení stránky javascriptový kód přidá obslužnou rutinu události do obou textových polí: Pokaždé, když uživatel klikne na textové pole, zapíše se jeho název do skrytého pole formuláře:

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

V kódu na straně serveru musí být přečtená hodnota skrytého pole. Vzhledem k tomu, že skrytá pole formuláře jsou pro manipulaci triviální, vyžaduje se přístup k ověření skryté hodnoty na seznam bezpečných adres. Jakmile identifikujete správné textové pole, zapíše se do něj datum z kalendáře.

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