Verarbeiten von Postbacks über ein Popupsteuerelement mit einem UpdatePanel-Steuerelement (VB)

von Christian Wenz

PDF herunterladen

Der PopupControl-Extender im AJAX Control Toolkit bietet eine einfache Möglichkeit, ein Popup auszulösen, wenn ein anderes Steuerelement aktiviert wird. Besondere Vorsicht ist zu beachten, wenn ein Postback innerhalb eines solchen Popups erfolgt.

Überblick

Der PopupControl-Extender im AJAX Control Toolkit bietet eine einfache Möglichkeit, ein Popup auszulösen, wenn ein anderes Steuerelement aktiviert wird. Besondere Vorsicht ist zu beachten, wenn ein Postback innerhalb eines solchen Popups erfolgt.

Schritte

Wenn Sie ein PopupControl mit einem Postback verwenden, kann die UpdatePanel Seitenaktualisierung durch das Postback verhindert werden. Das folgende Markup definiert einige wichtige Elemente:

• Ein ScriptManager Steuerelement, damit das ASP.NET AJAX Control Toolkit funktioniert
• Zwei TextBox Steuerelemente, die beide ein Popup auslösen
• Ein Panel Steuerelement, das als Popup dient
• Innerhalb des Bereichs wird ein Calendar Steuerelement in ein UpdatePanel Steuerelement eingebettet.
• Zwei PopupControlExtender Steuerelemente, die den Textfeldern den Bereich zuweisen

<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:UpdatePanel ID="up1" runat="server">
 <ContentTemplate>
 <asp:Calendar ID="c1" runat="server" OnSelectionChanged="c1_SelectionChanged" />
 </ContentTemplate>
 </asp:UpdatePanel>
 </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>

Beachten Sie, dass das OnSelectionChanged Attribut des Calendar Steuerelements festgelegt ist. Wenn der Benutzer also ein Datum innerhalb des Kalenders auswählt, erfolgt ein Postback, und die serverseitige Methode c1_SelectionChanged() wird ausgeführt. Innerhalb dieser Methode muss das aktuelle Datum abgerufen und in das Textfeld zurückgeschrieben werden.

Die Syntax dafür lautet wie folgt: Zunächst muss ein Proxyobjekt für den PopupControlExtender auf der Seite generiert werden. Das ASP.NET AJAX Control Toolkit bietet die GetProxyForCurrentPopup() -Methode. Das Von dieser Methode zurückgegebene Objekt unterstützt die Commit() -Methode, die einen Wert zurück an das Steuerelement sendet, das das Popup ausgelöst hat (nicht das Steuerelement, das den Methodenaufruf ausgelöst hat!). Der folgende Code stellt das ausgewählte Datum als Argument für die Commit() -Methode bereit, wodurch der Code das ausgewählte Datum zurück in das Textfeld schreibt:

<script runat="server">
 Protected Sub c1_SelectionChanged(sender As object, e As EventArgs)
 Dim pce As PopupControlExtender = AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page)
 pce.Commit(CType(sender, Calendar).SelectedDate.ToShortDateString())
 End Sub
</script>

Wenn Sie nun auf ein Kalenderdatum klicken, wird das ausgewählte Datum im zugeordneten Textfeld angezeigt, sodass ein Datumsauswahl-Steuerelement erstellt wird, das derzeit auf vielen Websites zu finden ist.

Der Kalender wird angezeigt, wenn der Benutzer in das Textfeld klickt (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Wenn Sie auf ein Datum klicken, wird es in das Textfeld eingefügt (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

ZurückWeiter