In der Kategorie das tägliche Problem fällt mein Popup Kalender. Eigentlich nervte mich wieder einmal das eingeben von einem Datum in eine Textbox bei einer Hotelbuchung. Mein Wunsch ein PopUp Fenster mit dem ASP.NET Calender Control, indem ich einfach auf mein gewünschtes Datum klicke.
In einer ASPX Seite muss dafür eine Textbox ein Client seitiges Script bekommen. Dies muss man einer erst der Textbox anhängen.
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
vonDatum.Attributes.Add("onclick", "Jscript:popupKal();")
End Sub |
Das Client Script startet dann ein neues Browser Fenster im modalen Modus. Per Parameter wird dann die Größe und das Aussehen bestimmt. Das neue Browser Fenster muss einen Wert zurück liefern der in der Variable ret gehalten wird. Dieser Wert wird dann in das HTML Input Element geschrieben.
<script language="javascript">
function popupKal()
{
var ret=window.showModalDialog("kalender.aspx",window,"dialogHeight: 290px; dialogWidth: 340px; status: No;");
document.getElementById('vonDatum').value=ret;
} |
Dieses Script ist direkt in die ASPX Seite eingebettet. Zu bevorzugen wäre ein dynamsiches laden des Scripts mit RegisterClientScript. Dann kann man auch die Controlnamen dynamisch setzen. Diese ändern sich z.B. bei einer Schachtelung von Controls, also wenn eine Textbox in einem Panel liegt.
Die Kalender Seite beinhaltet dann nur das Calendar Control. Das kann über Attribute noch optisch ansprechender gestaltet werden.
<asp:Calendar id="Calendar1" runat="server"></asp:Calendar> |
Wenn nun der Benutzer ein Datum auswählt, wird ein Server Event gefeuert. In dem wird der Rückgabewert gesetzt. Das ist demnach das vom Benutzer gewählte Datum. Darüberhinaus wird das eigene Kalender Fenster wieder geschlossen.
In diesem Beispiel wird das Script dynamisch per RegisterStartup Script geladen. Das heist nach dem Roundtrip wird auf alle Fälle das Script ausgeführt.
Private Sub Calendar1_SelectionChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Calendar1.SelectionChanged
Dim script As String
script = "<script language=JScript>"
script += "parent.window.returnValue='" & Calendar1.SelectedDate.ToShortDateString & "' ;"
script += "window.close();"
script += "</script>"
RegisterStartupScript("closeme", script)
End Sub |
Ein Problem trat in meinem Fall auf. Für den Postback wurde ein neues (und damit drittes) Browser Fenster erzeugt. Dies muss mit dem modalen Dialog zusammenhängen. Ich fand jedenfalls einen Workaround mit folgender Deklaration im Head Bereich der Kalernder.aspx Seite.