Procedura dettagliata: aggiunta di risorse localizzate a un file JavaScript

Aggiornamento: novembre 2007

In questa procedura dettagliata viene illustrato come includere risorse localizzate in un file ECMAScript (JavaScript). Le risorse in questione sono stringhe. L'aggiunta di risorse localizzate in un file JavaScript avviene quando si crea un file JavaScript autonomo e l'applicazione deve fornire valori diversi per diverse lingue e impostazioni cultura.

Il file JavaScript autonomo non viene incorporato come risorsa in un assembly, pertanto non può accedere ai valori in un file di risorse. I valori stringa localizzati sono invece inclusi direttamente nel file script e vengono recuperati durante l'esecuzione dello script nel browser.

Le diverse lingue e impostazioni cultura richiedono la creazione di un file script distinto per ciascuna di esse. In ogni file script viene incluso un oggetto in formato JSON contenente i valori delle risorse localizzate per la lingua o le impostazioni cultura in questione.

Prerequisiti

Per implementare le procedure di questa esercitazione è necessario:

• Microsoft Visual Studio 2005 o Microsoft Visual Web Developer Express Edition.

• Sito Web ASP.NET compatibile AJAX.

Creazione di un file JavaScript contenente valori delle risorse localizzate

Per aggiungere valori delle risorse a un file JavaScript

1. Aggiungere una cartella denominata Scripts nella directory radice del sito Web.

2. In questa cartella aggiungere un file JScript denominato CheckAnswer.js, quindi aggiungere il codice seguente al file.

   Sys.Application.add_load(SetButton);
   function SetButton()
   {
       $get('Button1').value = Answer.Verify;
   }
   function CheckAnswer()
   {
       var firstInt = $get('firstNumber').innerText;
       var secondInt = $get('secondNumber').innerText;
       var userAnswer = $get('userAnswer');
   
       if ((Number.parseLocale(firstInt) + Number.parseLocale(secondInt)) == userAnswer.value)
       {
           alert(Answer.Correct);
           return true;
       }
       else
       {
           alert(Answer.Incorrect);
           return false;
       }
   }
   
   Answer={
   "Verify":"Verify Answer",
   "Correct":"Yes, your answer is correct.",
   "Incorrect":"No, your answer is incorrect."
   };
   

   Sys.Application.add_load(SetButton);
   function SetButton()
   {
       $get('Button1').value = Answer.Verify;
   }
   function CheckAnswer()
   {
       var firstInt = $get('firstNumber').innerText;
       var secondInt = $get('secondNumber').innerText;
       var userAnswer = $get('userAnswer');
   
       if ((Number.parseLocale(firstInt) + Number.parseLocale(secondInt)) == userAnswer.value)
       {
           alert(Answer.Correct);
           return true;
       }
       else
       {
           alert(Answer.Incorrect);
           return false;
       }
   }
   
   Answer={
   "Verify":"Verify Answer",
   "Correct":"Yes, your answer is correct.",
   "Incorrect":"No, your answer is incorrect."
   };
   

   Il codice di script consente di aggiungere un gestore per l'evento load della classe Sys.Application. Il gestore imposta il testo del pulsante ma, anziché impostarlo su una stringa, lo imposta su un valore definito in una classe denominata Answer.Verify. Ciò consente al codice di utilizzare un valore localizzato.

   Lo script contiene anche una funzione che verifica il risultato dell'utente con l'aggiunta di due numeri. Utilizza la funzione alert per consentire all'utente di sapere se la risposta è corretta. Come accade per il testo del pulsante, il messaggio visualizzato nella finestra di dialogo alert viene impostato su un valore stringa localizzato senza alcun postback al server.

   Un tipo denominato Answer viene utilizzato nello script per definire l'insieme di valori localizzati da utilizzare nel file. Il tipo Answer viene definito nel formato JSON alla fine del file CheckAnswer.js.

3. In the Scripts folder, add a JScript file named CheckAnswer.it-IT.js. Add the following code to the file.

   Sys.Application.add_load(SetButton);
   function SetButton()
   {
       $get('Button1').value = Answer.Verify;
   }
   function CheckAnswer()
   {
       var firstInt = $get('firstNumber').innerText;
       var secondInt = $get('secondNumber').innerText;
       var userAnswer = $get('userAnswer');
   
       if ((Number.parseLocale(firstInt) + Number.parseLocale(secondInt)) == userAnswer.value)
       {
           alert(Answer.Correct);
           return true;
       }
       else
       {
           alert(Answer.Incorrect);
           return false;
       }
   }
   Answer={
   "Verify":"Verificare la risposta",
   "Correct":"Si, la risposta e’ corretta.",
   "Incorrect":"No, la risposta e’ sbagliata."
   };
   

   Sys.Application.add_load(SetButton);
   function SetButton()
   {
       $get('Button1').value = Answer.Verify;
   }
   function CheckAnswer()
   {
       var firstInt = $get('firstNumber').innerText;
       var secondInt = $get('secondNumber').innerText;
       var userAnswer = $get('userAnswer');
   
       if ((Number.parseLocale(firstInt) + Number.parseLocale(secondInt)) == userAnswer.value)
       {
           alert(Answer.Correct);
           return true;
       }
       else
       {
           alert(Answer.Incorrect);
           return false;
       }
   }
   Answer={
   "Verify":"Verificare la risposta",
   "Correct":"Si, la risposta e’ corretta.",
   "Incorrect":"No, la risposta e’ sbagliata."
   };
   

   Questo file è identico al file CheckAnswer.js, eccetto per il fatto che contiene un tipo Answer con valori in italiano.

   Per fornire il testo localizzato in altre lingue, è possibile creare più file JavaScript. Il codice JavaScript rimane lo stesso, ma i valori definiti nel tipo Answer sono in lingue diverse. Il nome di ciascun file JavaScript deve includere la lingua e le impostazioni locali appropriate.

Utilizzo dei valori delle risorse JavaScript in una pagina ASP.NET

Ora è possibile creare una pagina Web ASP.NET che utilizza il codice di script creato in precedenza. La pagina consente di verificare l'effetto della modifica di una lingua.

Per utilizzare i valori delle risorse JavaScript in una pagina Web ASP.NET

1. Creare una pagina Web ASP.NET.

2. Sostituire il contenuto della pagina Web con il markup e il codice seguenti:

   <%@ Page Language="VB" AutoEventWireup="true" UICulture="auto" Culture="auto" %>
   
   <script >
   
   
       Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
           Dim _firstInt As Int32
           Dim _secondInt As Int32
   
           Dim _random As New Random()
           _firstInt = _random.Next(0, 20)
           _secondInt = _random.Next(0, 20)
   
           firstNumber.Text = _firstInt.ToString()
           secondNumber.Text = _secondInt.ToString()
   
           If (IsPostBack) Then
               userAnswer.Text = ""
               System.Threading.Thread.CurrentThread.CurrentUICulture = System.Globalization.CultureInfo.CreateSpecificCulture(selectLanguage.SelectedValue)
           Else
               selectLanguage.Items.FindByValue(System.Threading.Thread.CurrentThread.CurrentUICulture.TwoLetterISOLanguageName).Selected = True
           End If
       End Sub
   
       Protected Sub selectLanguage_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
           System.Threading.Thread.CurrentThread.CurrentUICulture = System.Globalization.CultureInfo.CreateSpecificCulture(selectLanguage.SelectedValue)
       End Sub
   </script>
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head id="Head1" >
       <title>Client Localization Example</title>
   </head>
   <body>
       <form id="form1"  >
           <asp:DropDownList  AutoPostBack="true" ID="selectLanguage" OnSelectedIndexChanged="selectLanguage_SelectedIndexChanged">
               <asp:ListItem Text="English" Value="en"></asp:ListItem>
               <asp:ListItem Text="Italian" Value="it"></asp:ListItem>
           </asp:DropDownList>
           <br /><br />
           <asp:ScriptManager ID="ScriptManager1" EnableScriptLocalization="true" >
           <Scripts>
               <asp:ScriptReference Path="scripts/CheckAnswer.js" ResourceUICultures="it-IT" />
           </Scripts>
           </asp:ScriptManager>
           <div>
           <asp:Label ID="firstNumber" ></asp:Label>
           +
           <asp:Label ID="secondNumber" ></asp:Label>
           =
           <asp:TextBox ID="userAnswer" ></asp:TextBox>
           <asp:Button ID="Button1"  OnClientClick="return CheckAnswer()" />
           <br />
           <asp:Label ID="labeltest" ></asp:Label>
           </div>
       </form>
   </body>
   </html>
   

   <%@ Page Language="C#" AutoEventWireup="true" UICulture="auto" Culture="auto" %>
   <script >
   
   
       protected void Page_Load(object sender, EventArgs e)
       {   
           int _firstInt;
           int _secondInt;
   
           Random random = new Random();
           _firstInt = random.Next(0, 20);
           _secondInt = random.Next(0, 20);
   
           firstNumber.Text = _firstInt.ToString();
           secondNumber.Text = _secondInt.ToString();
   
           if (IsPostBack)
           {
               userAnswer.Text = "";
               System.Threading.Thread.CurrentThread.CurrentUICulture = System.Globalization.CultureInfo.CreateSpecificCulture(selectLanguage.SelectedValue);
           }
           else
           {
               selectLanguage.Items.FindByValue(System.Threading.Thread.CurrentThread.CurrentUICulture.TwoLetterISOLanguageName).Selected = true;
           }
       }
   
       protected void selectLanguage_SelectedIndexChanged(object sender, EventArgs e)
       {
           System.Threading.Thread.CurrentThread.CurrentUICulture = System.Globalization.CultureInfo.CreateSpecificCulture(selectLanguage.SelectedValue);
       }
   </script>
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head id="Head1" >
       <title>Client Localization Example</title>
   </head>
   <body>
       <form id="form1"  >
           <asp:DropDownList  AutoPostBack="true" ID="selectLanguage" OnSelectedIndexChanged="selectLanguage_SelectedIndexChanged">
               <asp:ListItem Text="English" Value="en"></asp:ListItem>
               <asp:ListItem Text="Italian" Value="it"></asp:ListItem>
           </asp:DropDownList>
           <br /><br />
           <asp:ScriptManager ID="ScriptManager1" EnableScriptLocalization="true" >
           <Scripts>
               <asp:ScriptReference Path="scripts/CheckAnswer.js" ResourceUICultures="it-IT" />
           </Scripts>
           </asp:ScriptManager>
           <div>
           <asp:Label ID="firstNumber" ></asp:Label>
           +
           <asp:Label ID="secondNumber" ></asp:Label>
           =
           <asp:TextBox ID="userAnswer" ></asp:TextBox>
           <asp:Button ID="Button1"  OnClientClick="return CheckAnswer()" />
           <br />
           <asp:Label ID="labeltest" ></asp:Label>
           </div>
       </form>
   </body>
   </html>
   

   Il markup crea un controllo DropDownList, due controlli Label, un controllo TextBox e un controllo Button. Nella pagina vengono visualizzati due numeri interi generati casualmente e viene chiesto all'utente di aggiungerli; viene inoltre fornita una casella di testo per una risposta. Quando si fa clic sul pulsante, viene chiamata la funzione CheckAnswer JavaScript.

   Il controllo DropDownList consente di modificare le impostazioni della lingua senza modificare le impostazioni nel browser. Quando la proprietà SelectedIndex del controllo DropDownList viene modificata, la proprietà CurrentUICulture dell'istanza CurrentThread viene impostata sul valore selezionato.

   Nota:
   Per informazioni sulla definizione delle informazioni sulle impostazioni cultura per un thread, vedere Procedura: impostare la lingua e la lingua dell'interfaccia utente per la globalizzazione di pagine Web ASP.NET.

   Il controllo ScriptManager include un riferimento al file script CheckAnswer.js. In questo modo la pagina recupera il suddetto file nel momento in cui viene eseguita.

   La proprietà ResourceUICultures del riferimento viene impostata su "it-IT" a indicare che il sito Web contiene una versione italiana dello script. Di conseguenza, l'oggetto ScriptManager recupera la versione italiana quando si seleziona "italiano" dal controllo DropDownList o quando si imposta "italiano" come lingua predefinita nel browser.

3. Eseguire la pagina.

   Verrà visualizzata un'addizione con due numeri generati casualmente e un controllo TextBox per l'immissione di una risposta. Quando si digita una risposta e si fa clic sul pulsante Verifica risposta, questa viene visualizzata in una finestra di messaggio che indica se la risposta fornita è corretta o meno.

   Per impostazione predefinita, la risposta viene visualizzata in inglese.

4. Per modificare la lingua in italiano, selezionare "italiano" dall'elenco a discesa.

5. Eseguire nuovamente la verifica.

   Questa volta la risposta sarà in italiano.

Verifica

In questa procedura dettagliata è stato illustrato come aggiungere valori delle risorse localizzate in un file JavaScript autonomo. I valori localizzati vengono creati come oggetti in formato JSON appartenenti a singoli file JavaScript localizzati. Vengono inoltre visualizzati facendo riferimento all'oggetto JSON anziché utilizzando stringhe specificate a livello di codice (hard-coded). Le stringhe localizzate vengono visualizzate in base all'impostazione della lingua presente nel browser o fornita dall'utente.

Vedere anche

Attività

Cenni preliminari sulla localizzazione delle risorse per le librerie di componenti

Procedura dettagliata: incorporamento di risorse localizzate per un file JavaScript