Presentando le novità di ASP.NET 4.0, abbiamo già accennato ad alcune migliorie introdotte in questa versione del .NET Framework. Due di queste sono le proprietà MetaDescription e MetaKeywords della classe Page. Il valore aggiunto sta nel fatto che possiamo inizializzare e modificare queste proprietà dinamicamente da codice.
In questo articolo vedreomo come sfruttare queste proprietà per applicare in modo semplice e veloce la localizzazione alle meta-informazioni delle pagine.
Chi non avesse molta dimestichezza con questo argomento, può leggere questo articolo di Angelo Ranucci, che spiega molto bene cosa sia la 'localizzazione' e come applicarla alle pagine web in ASP.NET 2.0.
In breve il meccanismo della Localizzazione ci permette di creare delle pagine Web che cambiano i propri contenuti in base alla lingua dell'utente e questo avviene in fase di esecuzione della pagina.
In questo articolo riprendiamo questo concetto di localizzazione e mostriamo come risulta più semplice e rapido implementarlo con la versione 4 di ASP.NET e, per farlo ci serviremo di esempi che abbiamo raccolto in una applicazione web realizzata con Visual Studio 2010.
Esempio di Localization
Supponiamo di essere una società inglese che commercia prodotti sul territorio nazionale, in Italia ed in Spagna. Vogliamo realizzare il nostro sito di commercio elettronico e vogliamo presentare i nostri prodotti nella lingua di appartenenza dell'utente che si collega.
La cosa interessante è il poter modificare a runtime tutte le proprietà di un controllo web e non solo la proprietà Text come si potrebbe pensare: nell'esempio oltre alle proprietà Text di etichette e bottoni viene modificata anche la proprietà ImgUrl di una immagine in modo da caricare la bandiera del paese rappresentativo della lingua dell'utente.
Parlando di localizzazione possiamo distinguere tra:
- Localizzazione implicita, in questo caso contrassegnamo i controlli che vogliamo localizzare con dei metadati e definiamo le traduzioni per le loro proprietà all'interno di file dei risorse associati alla pagina. Quando il server trova queste definizioni le applica automaticamente alle pagine corrispondenti
- Localizzazione esplicita, in questo caso esplicitiamo il punto in cui inserire un elemento localizzato con un tag specifico, in cui indichiamo un file di risorsa da interpellare e la chiave corrispondente all'elemento desiderato
Dalla pagina successiva vediamo come funzionano più in dettaglio e in quali casi utilizzare l'una o l'altra soluzione.
Localizzazione Implicita
Questo tipo di localizzazione ha senso quando dobbiamo impostare dei valori che usiamo solo su singole pagine. Ad esempio, il nostro sito di e-Commerce avrà una sola pagina di benvenuto quindi ha senso impostare il messaggio di benvenuto con la localizzazione implicita.
Per ogni pagina si creano tanti file di risorse quante sono le lingue di interesse. In questi file vengono riportate le proprietà localizzabili dei controlli e si specificano i valori che assumeranno. Inoltre possiamo aggiungere altre proprietà di nostro interesse.
È possibile approfondire il concetto di file di risorse in questo articolo di Francesco Camarlinghi.
Diciamo che la nostra pagina di benvenuto si chiama welcome.aspx e che vogliamo associarle tre file di risorse, uno per la lingua di default che è l'inglese, uno per l'italiano e uno per lo spagnolo: i tre file si chiameranno rispettivamente welcome.resx, welcome.aspx.it.resx e welcome.aspx.es.resx.
File di risorse locale
Creiamo il primo file di risorse associato alla pagina welcome.aspx. Per farlo, clicchiamo su uno dei controlli presenti nella pagina, apriamo il menu Strumenti e clicchiamo sulla voce Genera Risorsa locale. Visual Studio creerà una nuova cartella che sarà nominata App_LocalResources all'interno della quale sarà creato il file Welcome.aspx.resx: con la localizzazione implicita i nomi dei file di risorse riflettono i nomi delle Web Form.
La creazione di questo file di risorse ha aggiunto l'attributo meta:resourcekey ai controlli della pagina web. Lo scopo è quello di informare i controlli che in fase di esecuzione devono andare a prendere il valore delle loro proprietà dal file di risorse.
In figura vediamo il file di risorse della pagina welcome.aspx, in questo file abbiamo impostato la proprietà Text dell'etichetta Label1 al valore Welcome.
Inoltre notiamo l'aggiunta dell'attributo resourcekey all'etichetta:
<asp:Label ID="Label1" runat="server" Text="Label" meta:resourcekey="Label1Resource1" />Esaminando la sintassi, si nota che nessuna proprietà del controllo viene collegata, ma il controllo stesso viene associato ad una chiave.
In figura 2 vediamo che la chiave Label1Resource1 viene usata come prefisso seguita dalla proprietà che si vuole localizzare.
Questo meccanismo è applicabile a tutte le proprietà di un controllo e non solo a quelle localizzabili di default. Se, ad esempio, si vuole modificare la classe CSS in base alla lingua, basta creare una chiave Label1Resource1.CssClass ed impostarne il valore. Questa sintassi viene definita implicita in quanto non viene localizzata esplicitamente ogni proprietà, ma il controllo stesso.
Da osservare che quando impostiamo la localizzazione su una pagina in essa vengono automaticamente aggiunti i tag culture e uiculture, impostati su auto. Questo indica ad ASP.NET che quando la pagina viene caricata si deve far riferimento alle impostazioni di cultura e lingua del browser dell'utente.
È possibile anche far scegliere la cultura all'utente utilizzando, ad esempio, un menu a scomparsa in una pagina di configurazione del sito, in questo articolo vediamo come.
Aggiungiamo altre culture
Il file di risorse appena creato è il file di default che viene usato quando ASP.NET non trova un file di risorse con la lingua di appartenenza dell'utente. Creiamo ora un nuovo file di risorse esplicito per la lingua italiana. Facciamo una copia del file welcome.aspx.resx e la rinominiamo welcome.aspx.it.resx. L'estensione it sta ad indicare che questo file di risorse è per la lingua italiana. Se salviamo il file con il nome welcome.aspx.es-mx.resx creiamo invece un file di risorse per la lingua spagnola di cultura messicana.
Nel file di risorse per la lingua italiana modifichiamo ora la proprietà Text dell'etichetta Label1 col valore "Benvenuto". Creiamo infine un file di risorse per la lingua spagnola neutra: welcome.apsx.es.resx dove scriviamo invece "Bienvenido".
Testiamo la pagina
Non ci resta che testare la nostra pagina impostando la lingua del browser rispettivamente sulla lingua italiana, spagnola e tedesca. Vedremo che quando la lingua è l'italiano allora la pagina web visualizzerà il testo Benvenuto, quando è lo spagnolo il testo è Bienvenido e quando la lingua è il tedesco visualizziamo sempre "Welcome": non trovando il file di risorse per la lingua tedesca, il sistema usa il file di risorse di default che usa l'inglese.
Localizzazione esplicita
Questo tipo di localizzazione ha senso quando dobbiamo impostare dei valori comuni a più pagine del sito: il nostro sito di e-Commerce avrà i pulsanti di avanti e indietro ripetuti su molte pagine quindi in questo caso ha senso la localizzazione esplicita.
Anche l'immagine di testata e i banner pubblicitari possono apparire su più pagine, nell'esempio proposto l'immagine della bandiera del paese dell'utente è stata trattata con la localizzazione esplicita.
Creiamo un file di risorse globale
Vediamo come usare la localizzazione esplicita cominciando con il creare un file di risorse globale di default.
Selezioniamo la nostra soluzione, clicchiamo il pulsante destro del mouse, a questo punto clicchiamo su Aggiungi cartella ASP.NET e poi su App_GlobalResources.
Clicchiamo col pulsante destro del mouse sulla cartella appena creata e clicchiamo su Aggiungi Nuovo elemento, selezioniamo quindi File di risorse dal menu a tendina. Chiamiamo il file Resource1.resx. Creiamo un secondo file di risorse e chiamiamolo Resource1.it.resx, creiamo infine un terzo file di risorse e salviamolo col nome Resource1.es.resx. In questi tre file andiamo a scrivere nelle rispettive lingue i testi che compariranno nei pulsanti di Avanti e Indietro e aggiungiamo una stringa per l'URL della bandiera.
Associare i controlli al file di risorse
Non ci resta che associare esplicitamente le proprietà dei controlli della pagina welcome.aspx ai valori contenuti nei file di risorse. Andiamo nella finestra delle proprietà del pulsante Button1 e clicchiamo sui puntini presenti nella voce Espressioni.
Si apre una maschera all'interno della quale andremo a selezionare la voce Text. Nella lista dei tipi di espressione selezioniamo Risorse, sotto Proprietà delle Espressioni impostiamo la voce ClassKey a Resource1.resx e la voce ResourceKey a Msg1.
Abbiamo cosi associato alla proprietà Text del bottone il valore presente nella chiave Msg1 che nel caso della lingua italiana sarà "Avanti". Vediamo il codice:
<asp:Button ID="Button1" runat="server" Text="<%$ Resources:Resource1, Msg1 %>" onclick="Button1_Click" />A differenza della localizzazione implicita, qui è necessario indicare il file di risorse e, naturalmente, la chiave da cui prelevare il valore.
Testiamo la pagina
Ora possiamo testare la pagina welcome.aspx impostando la lingua del browser rispettivamente sulla lingua italiana, spagnola e tedesca. Nel caso dell'italiano vedremo il nostro tricolore e il testo Avanti sul pulsante, negli altri casi vedremo rispettivamente la bandiera spagnola e quella inglese e i relativi testi.
Localizziamo le meta-informazioni: metodo con ASP.NET 4
Una volta ricordato il concetto di localizzazione ed abbiamo presentato degli esempi concreti di utilizzo, possiamo descrivere il modo in cui applicare la localizzazione anche alle meta-informazioni delle pagine Web.
Le meta informazioni di una pagina più usate sono il titolo, la descrizione e l'insieme di parole chiave, rappresentate rispettivamente dai meta-tag <title>, <description> e <keywords>. Possiamo impostare o modificare i valori di questi meta-tag grazie alle tre rispettive proprietà ASP.NET: Page.Header.Title, Page.MetaDescription e Page.MetaKeywords.
Nota: Per poterle manipolare da codice è necessario inserire la proprietà runat="server" nel tag <head> della pagina.
Vediamo come associare dei valori a queste proprietà nell'evento Page_Load di una web form:
Page.Header.Title = GetLocalResourceObject("title").ToString();
Page.MetaDescription = GetLocalResourceObject("description").ToString();
Page.MetaKeywords = GetGlobalResourceObject("Resource1", "keywords").ToString();Usiamo il metodo GetLocalResourceObject della classe TemplateControl per prendere, nel file di risorse associato alla pagina, il valore relativo alla chiave title e alla chiave description. Usiamo il metodo GetGlobalResourceObject invece, per prelevare, nel file Resource1, il valore associato alla chiave keywords.
Abbiamo deciso di mettere le parole chiave sotto un file di risorse globale solo per esporre l'utilizzo del metodo GetGlobalResourceObject ma sarebbe più opportuno trattare le parole chiave a livello locale.
Per offrire un modello di programmazione completo presentiamo un secondo modo di accedere ai file di risorse globali:
Page.MetaKeywords = Resources.Resource1.keywords;Usando la classe Resources possiamo far riferimento al file di risorse globale Resource1 ed accedere direttamente alle sue chiavi.
Testiamo la pagina
Adesso possiamo testare la pagina goodbye.aspx impostando la lingua del browser prima sulla lingua italiana, e poi sulla spagnola e la tedesca. Visualizzando il codice html della pagina possiamo verificare che i metatag Title, Description e Keywords presentano tutti valori nella lingua corrispondente alle impostazioni del browser. Ecco il risultato per il browser impostato sull'italiano:
<title>arrivederci</title>
<meta name="description" content="descrizione italiana" />
<meta name="keywords" content="chiave1, chiave2, chiave3" />Localizziamo le meta-informazioni: metodo con le versioni ASP.NET precedenti
Con le versioni di ASP.NET precedenti alla 4 (dalla 2.0 alla 3.5) per poter modificare programmaticamente un metatag di una pagina web era necessario usare la classe HtmlMeta del namespace System.Web.UI.HtmlControls.
Si deve utilizzare la proprietà Name del controllo per specificare il nome del metadato e la proprietà Content per specificare il valore del metadato. Riproponiamo l'esempio precedente usando questo controllo:
Page.Header.Title = GetLocalResourceObject("title").ToString();
HtmlMeta metaDescription = new HtmlMeta();
metaDescription.Name = "description";
metaDescription.Content = GetLocalResourceObject("description").ToString();
Page.Header.Controls.Add(metaDescription);
HtmlMeta metaKeywords = new HtmlMeta();
metaKeywords.Name = "keywords";
metaKeywords.Content = GetGlobalResourceObject("Resource1", "keywords").ToString();
Page.Header.Controls.Add(metaKeywords);Con la versione 4 di ASP.NET riusciamo a fare in tre righe di codice quello che con le versioni precedenti si poteva realizzare con almeno 9 righe. Quindi il codice è stato ridotto del 67%. La classe HtmlMeta resta comunque utile per valorizzare tutti gli altri meta-tag HTML.
