Modales Dialoge sind eine sehr gute Möglichkeit um mit dem Benutzer zu interagieren ohne den aktuellen Kontext zu verlassen. Meiner Meinung nach, eignen sich im Webbereich am besten Lösungen die auf CSS und JavaScript basieren. Ein gutes Beispiel ist SimpleModal welches auf jQuery basiert. Im ASP.NET Ajax Control Toolkit gibt es das ModalPopup, mit dem sich ebenfalls modale Fenster oder Dialoge gestalten lassen.
Kürzlich stand ich vor der Aufgabe einen solchen modalen Dialog in den CommunityServer zu integrieren. Ich schaute mir verschiedene jQuery Lösungen an, um herauszufinden, welche am besten geeignet ist.
Schließlich entdeckte ich, das der CommunityServer eine eigene Lösung mitbringt die in einem Servercontrol gekapselt ist.
Der folgende Code stellt einen Button bereit, mit dem ein modales Fenster angezeigt werden kann, indem eine andere Webseite steckt:
<CS:ModalButton ID="ModalButton1" runat="server" Url="http://dotnet-snippets.de" Text="Modal Demo" Width="800" Height="600" />
Diese Lösung ist nur dann geeignet, wenn nur etwas anzeigt werden soll. Möchte man den Dialog nutzen um Entscheidungen vom Benutzer abzufragen, oder um zum Beispiel einen Fileupload Dialog anzubieten, benötigt man ein wenig JavaScript um an den Rückgabewert heran zukommen. Der folgende Code öffnet ein modales Fenster, in dem eine normale aspx Seite steckt und übergibt die Parameter "id" und "startdate". Die Parameter 800 und 600 geben die Größe des Fensters in Pixel an. Es wird außerdem eine Callback Methode angegeben, die aufgerufen wird, wenn das Fenster geschlossen wird:
<script type="text/javascript">
function OpenWindow(id, startdate) {
Telligent_Modal.Open("DynamicContent.aspx?ID=" + id + "&startdate=" + startdate, 800, 600, onCloseFunction);
}
</script>
In der aspx Seite DynamicContent.aspx ist ein kleines JavaScript, das dafür verantwortlich ist den Rückgabewert zurückzugeben:
<script type="text/javascript">
function CloseWindow(returnValue) {
window.parent.Telligent_Modal.Close(returnValue);
}
</script>
Die Modalen Fenster im CommunityServer können über eine zentrale CSS Datei gestylt werden und haben so alle die gleiche Optik.