Introduzione
Fin dall’uscita di Visual Studio 2005, mi ha affascinato la possibilità di utilizzare diversi linguaggi nello stesso progetto.
Il principio è semplice, ma allo stesso tempo geniale: dato che ogni parte del codice di un linguaggio viene tradotta in un linguaggio intermedio (MSIL), è possibile combinare sorgenti di linguaggi differenti, per esempio VB e C#, per creare un progetto unico.
Questo fatto agevola soprattutto i team composti da programmatori con diverse competenze e conoscenze, dove alcuni conoscono meglio C# e altri conoscono meglio VB, ma agevola anche il programmatore “solitario”, facilitandogli l’uso dei molti esempi e componenti già pronti disponibili su Internet.In questo articolo vedremo in modo estremamente semplice come si possono applicare questi principi anche alla programmazione web. Infatti in un sito web si possono utilizzare pagine scritte in linguaggi diversi, ma anche user control con la stessa caratteristica.
Il progetto è in sé banale: creiamo due user control, uno scritto in VB e uno, sostanzialmente identico, scritto in C# per la visualizzazione della data e ora del server web. Questi user control sono utili per verificare l’ora del server, magari quando il nostro sito è in hosting all’estero.
Creazione del progetto
Naturalmente la prima cosa da fare è creare una normale applicazione web:
-
File/Nuovo sito web…
-
Selezionare “Sito web ASP.NET“, scegliere la cartella dove posizionare il progetto (per esempio C:\VB2005\UserControl) e scegliere il linguaggio predefinito (in questo articolo preferisco cominciare con VB);
-
Alla conferma avremo la nostra pagina Default.aspx vuota: aggiungiamo alcune stringhe di testo, giusto per vedere qualcosa.
A questo punto la pagina web sarà così formata:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb"
Inherits="_Default" %>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Pagina senza titolo</title>
</head>
<body style="font-size: 12pt">
<form id="form1" runat="server">
<div>
<span style="color: darkorange; font-family: Verdana">
<strong>HOME PAGE<br />
</strong><span style="color: black">
<br />
Prova di controllo personalizzato con VB<br />
<br />
<br />
<br />
Prova di controllo personalizzato con C#<br />
<br />
<br />
</span></span>
</div>
</form>
</body>
</html>
Creazione di uno User Control in VB
Procediamo ora alla creazione di uno user control con il linguaggio VB:
-
nella finestra “Esplora Soluzioni“, fare clic con il tasto destro del mouse sul nome del progetto e selezionare “Aggiungi Nuovo Elemento…”;
-
nella finestra di dialogo scegliere “Controllo utente web“, modificare il nome in “TimeVB.ascx” e, lasciando invariato il linguaggio (VB), confermare;
-
fare doppio clic su “TimeVB.ascx” e inserire un controllo Label nella finestra di progettazione del controllo e modificare il suo ID in “LabelVB“.
-
Nel file “TimeVB.ascx.vb“, invece, inserire il seguente codice:
Partial Class TimeVB
Inherits System.Web.UI.UserControl
Protected Sub Page_Load(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Me.Load
Dim dt As DateTime = DateTime.Now
LabelVB.Text = String.Concat("Ora del server: ", dt.ToString)
End Sub
End Class
Come è possibile vedere, abbiamo dichiarato una variabile dt di tipo DateTime, assegnandole la data e ora attuale. Subito dopo abbiamo assegnato alla proprietà Text della LabelVB la stringa composta da una stringa letterale e la data e ora convertita in testo con il metodo ToString.
Aggiungiamo ora il controllo nella pagina web: torniamo alla pagina Default.aspx, prendiamo con il mouse il file TimeVB.ascx e lo trasciniamo nella posizione voluta (cioè dopo la stringa “Prova di controllo personalizzato con VB” presente nella pagina).
Se a questo punto eseguiamo il progetto con F5, otterremo l’effetto voluto: abbiamo la nostra data e ora visualizzati nella pagina.
Creazione di uno User Control in C#
Procediamo nello stesso modo per creare lo user control in C#:
-
nella finestra “Esplora Soluzioni“, fare clic con il tasto destro del mouse sul nome del progetto e selezionare “Aggiungi Nuovo Elemento…”;
-
nella finestra di dialogo scegliere “Controllo utente web“, modificare il nome in “TimeCS.ascx” e, dopo aver modificato il linguaggio in “Visual C#“, confermare;
-
fare doppio clic su “TimeCS.ascx” e inserire un controllo Label nella finestra di progettazione del controllo e modificare il suo ID in “LabelCS“;
-
nel file “TimeCS.ascx.cs“, invece, inserire il seguente codice:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class TimeCS : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
DateTime dt = DateTime.Now;
LabelCS.Text = string.Concat("Ora del server: ", dt);
}
}
Anche questa volta aggiungiamo il controllo nella pagina web: torniamo alla pagina Default.aspx, prendiamo con il mouse il file TimeCS.ascx e lo trasciniamo nella posizione voluta (cioè dopo la stringa “Prova di controllo personalizzato con C#” presente nella pagina).
Eseguiamo nuovamente il progetto con F5 per verificare che entrambi i controlli, scritti in VB e in C#, funzionino correttamente.
Per differenziare le due versioni del controllo possiamo anche cambiare qualche proprietà dei controlli Label inseriti nei due controlli, magari cambiandone i colori, il font e quant’altro si desideri, così come ho fatto nell’esempio allegato a questo articolo.
La pagina default.aspx finale
Diamo ora uno sguardo alla pagina Default.aspx finale, dopo l’aggiunta dei due controlli utente:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb"
Inherits="_Default" %><%@ Register src="TimeCS.ascx"
mce_src="TimeCS.ascx" TagName="TimeCS" TagPrefix="uc2" %>
<%@ Register src="TimeVB.ascx" mce_src="TimeVB.ascx" TagName="TimeVB" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Pagina senza titolo</title>
</head>
<body style="font-size: 12pt">
<form id="form1" runat="server">
<div>
<span style="color: darkorange; font-family:
Verdana"><strong>HOME PAGE<br />
</strong><span style="color: black">
<br />
Prova di controllo personalizzato con VB<br />
<uc1:TimeVB ID="TimeVB1" runat="server" />
<br />
<br />
<br />
Prova di controllo personalizzato con C#<br />
<uc2:TimeCS ID="TimeCS1" runat="server" />
<br />
<br />
</span></span>
</div>
</form>
</body>
</html>
Ci sono due elementi da notare: il primo è che sono state aggiunte due direttive per la registrazione dei due controlli che abbiamo aggiunto alla pagina:
<%@ Register src="TimeCS.ascx" mce_src="TimeCS.ascx"
TagName="TimeCS" TagPrefix="uc2" %>
<%@ Register src="TimeVB.ascx" mce_src="TimeVB.ascx"
TagName="TimeVB" TagPrefix="uc1" %>
mentre il secondo è costituito dai due tag che inseriscono ciascun controllo utente nella posizione della pagina che abbiamo stabilito:
<uc1:TimeVB ID="TimeVB1" runat="server" /> <uc2:TimeCS ID="TimeCS1" runat="server" />
Conclusioni
I controlli utente che abbiamo creato sono estremamente banali, ma l’obiettivo di questo articolo era quello di mostrare come si crea e si inserisce un controllo utente e come possono essere create delle parti dell’applicazione web scritte in linguaggi differenti.
Un’altra particolarità interessante dei controlli utente è il fatto che nella finestra di progettazione del controllo stesso possono essere inseriti più “controlli-base”. Per esempio possono essere inseriti una Label, una Textbox e un ListBox: in questo caso il controllo utente sarà un controllo composto da tutti i controlli che sono stati inseriti al suo interno, semplificando il riutilizzo di componenti complessi (per esempio un controllo per inserire in un colpo solo un “form” di login). Questa possibilità, estremamente semplice da provare, non è mostrata in questo esempio ma viene lasciata come esercizio al lettore.
L’esempio è scaricabile da qui.
L'Angolo di SuperMario 