Starten eines modalen Popupfensters aus Servercode (VB)

von Christian Wenz

PDF herunterladen

Das ModalPopup-Steuerelement im AJAX Control Toolkit bietet eine einfache Möglichkeit, ein modales Popup mithilfe clientseitiger Mittel zu erstellen. Einige Szenarien erfordern jedoch, dass das Öffnen des modalen Popups auf der Serverseite ausgelöst wird.

Übersicht

Das ModalPopup-Steuerelement im AJAX Control Toolkit bietet eine einfache Möglichkeit, ein modales Popup mithilfe clientseitiger Mittel zu erstellen. Einige Szenarien erfordern jedoch, dass das Öffnen des modalen Popups auf der Serverseite ausgelöst wird.

Schritte

Zunächst ist ein ASP.NET Button-Websteuerelement erforderlich, um zu veranschaulichen, wie das ModalPopup-Steuerelement funktioniert. Fügen Sie eine solche Schaltfläche innerhalb des <Formularelements> auf einer neuen Seite hinzu:

<asp:Button ID="ClientButton" runat="server" Text="Launch
 Modal Popup (Client)" />

Anschließend benötigen Sie das Markup für das Popup, das Sie erstellen möchten. Definieren Sie es als <asp:Panel> Steuerelement, und stellen Sie sicher, dass es ein Schaltflächen-Steuerelement enthält. Das ModalPopup-Steuerelement bietet die Funktionalität, damit diese Schaltfläche das Popup schließt; andernfalls gibt es keine einfache Möglichkeit, es verschwinden zu lassen.

<asp:Panel ID="ModalPanel" runat="server" Width="500px">
 ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
 more interactive and highly-personalized Web experiences that work across all the
 most popular browsers.<br />
 <asp:Button ID="OKButton" runat="server" Text="Close" />
</asp:Panel>

Fügen Sie als Nächstes das ModalPopup-Steuerelement aus dem ASP.NET AJAX Toolkit zur Seite hinzu. Legen Sie Eigenschaften für die Schaltfläche fest, mit der das Steuerelement geladen wird, die Schaltfläche, wodurch es ausgeblendet wird, und die ID des tatsächlichen Popups.

<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server"
 TargetControlId="ClientButton" PopupControlID="ModalPanel" 
 OkControlID="OKButton" />

Wie bei allen Webseiten, die auf ASP.NET AJAX basieren; Der Skript-Manager ist erforderlich, um die erforderlichen JavaScript-Bibliotheken für die verschiedenen Zielbrowser zu laden:

<asp:ScriptManager ID="asm" runat="server" />

Führen Sie das Beispiel im Browser aus. Wenn Sie auf die Schaltfläche klicken, wird das modale Popup angezeigt. Um denselben Effekt mithilfe von serverseitigem Code zu erzielen, ist eine neue Schaltfläche erforderlich:

<asp:Button ID="ServerButton" runat="server" Text="Launch Modal Popup (Server)" 
 OnClick="ServerButton_Click" />

Wie Sie sehen können, generiert ein Klick auf die Schaltfläche ein Postback und führt die ServerButton_Click() Methode auf dem Server aus. Bei dieser Methode wird eine JavaScript-Funktion namens launchModal() ausgeführt, die ausgeführt wird, sobald die Seite geladen wurde.

<script runat="server">
 Sub ServerButton_Click(ByVal sender As Object, ByVal e As EventArgs)
 ClientScript.RegisterStartupScript(Me.GetType(), "key", "launchModal();", True)
 End Sub
</script>

Die Aufgabe von launchModal() besteht darin, das ModalPopup anzuzeigen. Die launchModal() Funktion wird ausgeführt, sobald die vollständige HTML-Seite geladen wurde. Derzeit wurde das ASP.NET AJAX-Framework jedoch noch nicht vollständig geladen. Daher legt die launchModal() Funktion einfach eine Variable fest, die das ModalPopup-Steuerelement später angezeigt werden soll.

<script type="text/javascript">
 var launch = false;
 function launchModal() 
 {
 launch = true;
 }

Die pageLoad() JavaScript-Funktion ist eine spezielle Funktion, die ausgeführt wird, sobald ASP.NET AJAX vollständig geladen wurde. Daher fügen wir dieser Funktion Code hinzu, um das ModalPopup-Steuerelement anzuzeigen, aber nur, wenn launchModal() zuvor aufgerufen wurde:

function pageLoad() 
 {
 if (launch) 
 {
 $find("mpe").show();
 }
 }
</script>

Die $find() Funktion sucht nach einem benannten Element auf der Seite und erwartet die serverseitige ID als Parameter. $find("mpe") Gibt daher die Clientdarstellung des ModalPopup-Steuerelements zurück. Mit der show() Methode kann das Popup angezeigt werden.

Das modale Popup wird angezeigt, wenn auf eine der Schaltflächen geklickt wird (Zum Anzeigen des Bilds mit voller Größe klicken)