Figura 1
Introduzione
In questo articolo, vediamo come creare una finestra popup per la visualizzazione di un calendario e dopo aver selezionato una data, riportare la data in un controllo TextBox della finestra chiamante, come mostrato in figura 1.
Creazione delle pagine
Si crea un nuovo progetto Web, inseriamo una pagina di tipo master page, e due pagine aspx, una di essa dovrà far parte della master page.
Nella finestra dedicata al calendario, inseriamo un controllo Calendar, ed un controllo di tipo input, come mostrato dal codice html qui di seguito:
<input id="control" runat="server" name="control" style="z-index: 103; left: 16px;
position: absolute; top: 32px" type="hidden" />
Vediamo il codice da inserire nella pagina, nell'evento load.
Quando viene caricata la pagina, dobbiamo inserire nel controllo input html creato in precedenza, il nome del controllo Textbox, che dovrà contenere la data selezionata del calendario.
Di seguito si riporta il codice da inserire nell'evento load, della pagina.
VB.Net
control.Value = Request.QueryString(
"textbox").ToString()
C#
control.Value = Request.QueryString[
"textbox"].ToString();
A questo punto, la nostra pagina calendario è quasi finita, dobbiamo solo gestire la parte riguardante la selezione data. Infatti una volta, che l'utente avrà selezionato la data, la finestra popup, dovrà riportare tale valore nella casella di testo, della pagina chiamante e chiudere la finestra popup.
Nell'evento SelectionChanged del controllo calendario, inseriamo il seguente codice:
Nella pagina che avrà il compito di richiamare la finestra popup relativa al calendario, inseriamo un controllo textbox, ed un
VB.Net
Dim StrScript As String
StrScript = "<script>window.opener.document.forms[0].elements['ctl00$ContentPlaceHolder1$" + control.Value + "'].value = '"
StrScript += Calendar1.SelectedDate.ToString("dd-MM-yyyy")
StrScript += "';window.close();"
StrScript += "</" + "script>"
If (Not Page.IsClientScriptBlockRegistered("clientScript")) Then
Page.RegisterClientScriptBlock("clientScript", StrScript)
End If
C#
string StrScript;
StrScript = "<script>window.opener.document.forms[0].elements['ctl00$ContentPlaceHolder1$" + control.Value + "'].value = '";
StrScript += Calendar1.SelectedDate.ToString("dd-MM-yyyy");
StrScript += "';window.close();";
StrScript += "</" + "script>";
if (!Page.IsClientScriptBlockRegistered("clientScript"))
Page.RegisterClientScriptBlock("clientScript", StrScript);
Nella pagina che avrà il compito di richiamare la finestra popup relativa al calendario, inseriamo un controllo textbox, ed un controllo image button.
Tale controllo, sarà inserito all'interno del tag <A, come riportato dal seguente codice Html
VB.Net
<a href="javascript:;" onclick="window.open('CalendarioVB.aspx?textbox=TextBox2', 'reg','width=250,height=225,left=270,top=180')">
<asp:ImageButton ID="imbCalendario" runat="server" Height="32px" ImageUrl="~/calendario.gif"
Style="left: 770px; top: 440px" Width="32px" /></a>
C#
<A onclick="window.open('default2.aspx?textbox=TextBox2', 'reg','width=250,height=225,left=270,top=180')"
href="javascript:;"><asp:ImageButton id="imbCalendario"
runat="server" Width="32px" Height="32px" Style="left: 770px; top: 440px" ImageUrl="~/calendario.gif"></asp:ImageButton></A>
A questo punto non ci resta che testare la nostra applicazione, avviamo il nostro progetto, con default la pagina quella che dovrà richiamare la popup, vedremo che al click sull'immagine del calendario, verrà visualizzata la finestra popup con il relativo calendario.
Conclusione:
In questo articolo si è visto come avviare da una pagina asp.net inclusa in una master page, una finestra PopUp per la visualizzazione di un calendario, ed una volta selezionato tale valore riportarlo nella casella di testo.
Tramite la parola Download è possibile scaricare il file di esempio utilizzato nell'articolo.
Download