un semplice user control per un calendario

di Marco Leoncini, in asp.net,

capita spesso che un utente debba inserire una data, per evitare errori nella digitazione da parte dell'utente ci sono molti modi, tipo ricorrere alle regular expression, o magari obbligare l'utente a scegliere la data da un calendario.
è la tecnica che ho adottato:)
per rendere il tutto riutilizzabile ho realizzato un usercontrol

partiamo dalla file ASCX ovvero l'usercontrol vero e propio:

<%@ Control Language="c#" AutoEventWireup="false" Codebehind="PopUpCalendar.ascx.cs" Inherits="Soluzioni4D.Controls.User.PopUpCalendar" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<asp:TextBox id="Date" runat="server" EnableViewState="False" ReadOnly="True"></asp:TextBox>
<asp:PlaceHolder id=PlaceHolder1 runat="server"></asp:PlaceHolder>

il codice della pagina è semplicissimo, definiamo una TextBox che riceverà il valore della data e un PlaceHolder dove andremo ad inserire un LiteralControl, più precisamente un link.
il Codebehind è leggermente più interessante:

private void Page_Load(object sender, System.EventArgs e)
{
//modificare
calendarImage = "/barsottini2/img_com/calendario.gif";
MakeLink();
ScriptIniection();
}

come prima cosa imposto il percorso dell'immagine che userò più avanti, questa cosa sarebbe da modificare e rendere configurabile, cosa che mi prometto di fare il futuro.
dopodiche richiamiamo due metodi

private void MakeLink()
{
string formName = null;
//cerco il nome del form
foreach(System.Web.UI.Control i in this.Page.Controls )
{
if (i.GetType().ToString() == "System.Web.UI.HtmlControls.HtmlForm")
{
formName = ((HtmlForm)i).Name.ToString();
}
}

StringBuilder sb = new StringBuilder("<a title=\"Pick Date from Calendar\" onclick=\"calendarPicker('");
sb.Append(formName);
sb.Append(".");
sb.Append(Date.ClientID.ToString());
sb.Append("');\" href=\"javascript:;\"><img src=\"");
sb.Append(calendarImage);
sb.Append("\"></a>");

System.Web.UI.LiteralControl lit = new System.Web.UI.LiteralControl(sb.ToString());
PlaceHolder1.Controls.Add(lit);
}

MakeLInk, in pratica cerca il nome del form, dopodiche inizializza un nuova istanza di StringBuilder , concatenando il nome del form ed il percoso dell'immagine al codice javascript necessario per a richiamare una funzione javascript.
infine tutto il contenuto dello StringBuilder viene utilizzato per costruire un nuovo LiteralControl e successiavamente inserito nel PlaceHoler.
occupiamoci adesso di ScriptIniection();

private void ScriptIniection()
{

StringBuilder sb = new StringBuilder("\n<script language=\"javascript\" type=\"text/javascript\">\n");
sb.Append("function calendarPicker(strField)\n");
sb.Append("{\n");
sb.Append("window.open('http://marco/barsottini2/controlli/Calendar.aspx?field=' + strField,'calendarPopup','width=250,height=190,resizable=yes');\n");
sb.Append("\n}\n<");
sb.Append("/");
sb.Append("script>");
if(!this.Page.IsStartupScriptRegistered("popCalendar"))this.Page.RegisterStartupScript("popCalendar",sb.ToString());
}

Molto semplicemente inizializza una nuova istanza di StringBuilder con il quale creo la funzione javascript, dopodiche se non già presente nella pagina lo registro, per adesso il percoso del WindowOpen è fisso ma parametrizzarlo non è molto difficile :).

l'user control espone anche una propietà pubblica per impostare o recuperare il valore della data

public string SelectedDate
{
get{return Date.Text;}
set{Date.Text = value;}
}

infine analizziamo solamente il contenuto del CodeBehind della pagina del calendario in quanto il file aspx non contiene nulla di interessante.
interceccitiamo l'evento DayRender, l'idea è quella, di inserire tutte le volte che viene rederizzato un giono, il codice javascript necessario a impostare il testo nella TexBox

private void Calendar1_DayRender(object sender, System.Web.UI.WebControls.DayRenderEventArgs e)
{
// Clear the link from this day
e.Cell.Controls.Clear();

System.Web.UI.HtmlControls.HtmlGenericControl Link = new System.Web.UI.HtmlControls.HtmlGenericControl();
Link.TagName = "a";
Link.InnerText = e.Day.DayNumberText;
Link.Attributes.Add("href", String.Format("JavaScript:window.opener.document.{0}.value = \'{1:d}\'; window.close();", Request.QueryString["field"], e.Day.Date));

if(e.Day.IsSelected)
{
Link.Attributes.Add("style", this.Calendar1.SelectedDayStyle.ToString());
}
e.Cell.Controls.Add(Link);
}

per realizzare l' UserControl ho preso spunto dal seguente articolo:

http://www.15seconds.com/issue/040315.htm

spero di non essermi dimenticato nulla :)

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Nella stessa categoria
I più letti del mese