Starten eines modalen Popupfensters über den Servercode (C#)

von Christian Wenz

PDF herunterladen

Das ModalPopup-Steuerelement im AJAX Control Toolkit bietet eine einfache Möglichkeit, ein modales Popup mit clientseitigen Mitteln zu erstellen. In einigen Szenarien ist es jedoch erforderlich, dass das Öffnen des modale Popups serverseitig ausgelöst wird.

Überblick

Das ModalPopup-Steuerelement im AJAX Control Toolkit bietet eine einfache Möglichkeit, ein modales Popup mit clientseitigen Mitteln zu erstellen. In einigen Szenarien ist es jedoch erforderlich, dass das Öffnen des modale Popups serverseitig ausgelöst wird.

Schritte

Zunächst ist ein ASP.NET Button-Websteuerelement erforderlich, um die Funktionsweise des ModalPopup-Steuerelements zu veranschaulichen. 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 Button-Steuerelement enthält. Das ModalPopup-Steuerelement bietet die Funktionalität, damit eine solche Schaltfläche das Popup schließt. sonst gibt es keine einfache Möglichkeit, sie 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, die das Steuerelement lädt, die Schaltfläche, durch die 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 mit 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. In dieser Methode wird eine JavaScript-Funktion namens launchModal() ausgeführt, um genau zu sein. Die JavaScript-Funktion wird ausgeführt, sobald die Seite geladen wurde:

<script runat="server">
 protected void ServerButton_Click(object sender, EventArgs e)
 {
 ClientScript.RegisterStartupScript(this.GetType(), "key", "launchModal();", true);
 }
</script>

Die Aufgabe von launchModal() besteht darin, das ModalPopup anzuzeigen. Die launchModal() Funktion wird ausgeführt, nachdem die vollständige HTML-Seite geladen wurde. Zu diesem Zeitpunkt wurde das ASP.NET AJAX-Frameworks jedoch noch nicht vollständig geladen. Daher legt die launchModal() Funktion nur eine Variable fest, die das ModalPopup-Steuerelement später angezeigt werden muss:

<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. Seine show() Methode lässt das Popup erscheinen.

Das modale Popup wird angezeigt, wenn auf eine der Schaltflächen geklickt wird (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Nächste