Popup Fenster in asp.net

Eigentlich bin ich ja ein Popup-Hasser, aber letztens hatte ich einen Anwendungsfall, der es erforderlich machte, einen Popup-Dialog zu gestalten. Wie gesagt bin ich Popup-Hasser und hatte mich noch nicht großartig mit diesem Thema beschäftigt, ob Asp.Net hierfür eine Hilfe ist oder ob man konventionell den erforderlichen Javascript-Code in der ASPX-Datei unterbringt.

Meine Anwendung erforderte es, dass immer der gleiche Popup-Dialog von verschiedenen WebForms aus aufgerufen wird und auch mit unterschiedlichen Parametern versorgt werden muss. Ferner soll bei der Rückgabe der Dialog den entsprechenden Wert wieder an die aufrufende Seite zurückgeben.

Also wäre es wohl eine schlechte Lösung gewesen, jedes Mal einen neuen Popup-Dialog zu erstellen oder rendern zu lassen.

Für andere Fälle hatte ich schon einige JavaScripte über die Methode Startupspipte erstellt und wusste, dass die Lösung irgendwie in dieser Richtung zu finden ist.

Werden wir mal sehen, wie man so was lösen kann, schön wäre eine Funktion wie: OpenPopUp(ControlToClick, PageToOpen) direkt vom Server Code aus aufrufen zu können. Wobei ControlToClick irgendein asp.net.webcontrol ist und PageToOpen der zu öffnende Popup Fenster.

Beispiel: OpenPopUp(Button1, "http://www.google.de/").
Die Implementierung ist recht einfach und sieht wie folgt aus:

Methode OpenPopUp

	
					public void OpenPopUp(WebControl opener, String PagePath)
					{
							String clientScript;
							//Client Script für - window.open
							clientScript = "window.open('" + PagePath + "')" ;
							opener.Attributes.Add("onClick", clientScript);
					}				
				

Durch diese Methode bekommt das Asp.Net-WebControl ein Attribut hinzugefügt, das beim Onclick-Ereignis den entsprechenden JavaScript Code ausführt. Also die Implementierung für den Aufruf ist recht einfach, lässt sich prima in einer eigenen Page-Klasse hinterlegen und steht dann auf Projektebene zur Verfügung.
Die JavaScript-Methode "window.open" bietet noch weitere Möglichkeiten.

Überladen der Methode OpenPopUp

				public void OpenPopUp(WebControl opener, String PagePath,
				String windowName ,int width  , int height)
				{
				  String clientScript;
				  String windowAttribs;
				  windowAttribs = "width=" + width + "px," +
				  "height=" + height + "px," +
				  "left='+((screen.width -" + width+ ") / 2)+'," +
				  "top='+ (screen.height - " + height+ ") / 2+'";
				  // client script-zusammen setzen für window.open
				  clientScript = "window.open('" + PagePath + "',
				  '" + windowName + "', " +
				  "'" + windowAttribs + "');return false;";
				  opener.Attributes.Add("onClick", clientScript);
				}
				

Das Ganze sieht doch schon recht gut aus, oder? Wir brauchen jetzt lediglich serverseitig eine Methode aufzurufen, um die Funktionalität auf dem Client zu implementieren.

Was wir jetzt noch benötigen ist ein intelligentes PopUp-Formular. Der eine oder andere wird jetzt schon erkannt haben, welche Möglichkeiten sich bieten. Man kann dem PopUp-Fenster eine Reihe von Parametern mitgeben, indem man das Formular z.B. mit einem QueryString versorgt. Diese Lösung habe ich in meinem Projekt eingesetzt.

Mein Projekt ist eine Telemarketing-Anwendung, in der dieser Popup-Dialog Telefonnummern aus Datensätzen aufnimmt, diese gegebenenfalls dann manuell angepasst werden und dann die Telefonnummer wählt. Hierzu habe ich für das Projekt eine eigene Page-Klasse angelegt und um eine Funktion erweitert, die meine OpenPopUp aufruft.

Beispiel:

				public void ShowDialDialog(WebControl opener, WebControl telControl)
				{
				OpenPopUp(opener,"mDial.aspx?textbox=" + telControl.ClientID, "",   300, 300);
				}
				

In diese Methode übergebe ich zusätzlich das WebControl, das die Telefonnummer enthält, um somit schon mal die manuelle TextBox des PopUpdialogs zu belegen. Die ID des telConrol übergebe ich als QueryString und kann so im PopUpDialog das Control über die JavaScript opener Eigenschaft ansprechen.

Um den QueryString ohne ServerRedirect auslesen zu können, habe ich dem PopUp-Dialog noch ein hidden-FormField verpasst.
Vollständigen Quellcode downloaden: