Procedura dettagliata: globalizzazione di una data mediante uno script client

Articolo
10/22/2014

Aggiornamento: novembre 2007

In questa procedura dettagliata viene utilizzato il linguaggio ECMAScript (JavaScript) per visualizzare giorni, mesi e altri valori correlati alle date nei formati globalizzati. La funzionalità AJAX in ASP.NET fornisce il supporto della globalizzazione client in base a un'impostazione nel controllo ScriptManager. Dopo che tali impostazioni di globalizzazione sono state applicate all'applicazione Web, è possibile utilizzare lo script client per formattare un oggetto Date o un oggetto Number JavaScript in base a un valore relativo alle impostazioni cultura. Non è richiesto un postback al server.

Il valore relativo alle impostazioni cultura utilizzato dallo script client si basa sulle impostazioni cultura predefinite del browser dell'utente. In alternativa, può essere impostato su uno specifico valore relativo alle impostazioni cultura utilizzando impostazioni server o codice server nell'applicazione.

Un valore relativo alle impostazioni cultura fornisce informazioni su impostazioni cultura specifiche (impostazioni locali). Il valore relativo alle impostazioni cultura è una combinazione di due lettere per una lingua e due lettere per un paese o una regione. Tra gli esempi, es-MX per spagnolo (Messico), es-CO per spagnolo (Colombia) e fr-CA per francese (Canada).

Le estensioni Date ASP.NET AJAX aggiungono funzionalità all'oggetto Date JavaScript fornendo il metodo localeFormat. Questo metodo attiva un oggetto Date per la formattazione in base all'impostazione della lingua del browser, le impostazioni server o il codice server. Queste impostazioni influiscono sul valore relativo alle impostazioni cultura server che viene interpretato dal server per generare un oggetto client esposto dalla proprietà Sys.CultureInfo.CurrentCulture. Questo oggetto viene utilizzato per formattare le date.

Per ulteriori informazioni sulle impostazioni cultura e le impostazioni locali, vedere Globalizzazione e localizzazione ASP.NET e i cenni preliminari sulla classe CultureInfo.

Prerequisiti

Per implementare le procedure nell'ambiente di sviluppo in uso è necessario:

Microsoft Visual Studio 2005 o Microsoft Visual Web Developer Express Edition.
Sito Web ASP.NET compatibile AJAX.

Globalizzazione di una data in base alle impostazioni del browser

Per iniziare verranno utilizzate le impostazioni relative alla lingua preferita del browser per specificare come formattare una data.

Per globalizzare una data in base alla preferenza di lingua del browser

Chiudere eventuali istanze aperte di Microsoft Internet Explorer o del browser predefinito in modo tale che tutte le nuove istanze utilizzeranno un nuovo valore di impostazione locale.
Aprire una nuova istanza di Internet Explorer.
Nel menu Strumenti, fare clic su Opzioni Internet, scegliere la scheda Generale quindi fare clic su Lingue.
Impostare la preferenza per la lingua su Spagnolo (Messico) [es-MX] e rimuovere eventuali altre impostazioni locali dall'elenco.

Nota:

Se si utilizza un browser diverso, specificare le impostazioni di lingua equivalenti in tale browser.
Chiudere il browser.
In Visual Studio, creare o aprire una pagina Web con attivazione ASP.NET AJAX e passare alla visualizzazione Progettazione.
Selezionare il controllo ScriptManager e impostare la relativa proprietà EnableScriptGlobalization su true.

Nota:

Se la pagina non contiene un controllo ScriptManager, aggiungerne uno dalla scheda Estensioni AJAX della Casella degli strumenti.
Nella scheda Estensioni AJAX della Casella degli strumenti, fare doppio clic sul controllo UpdatePanel per aggiungere un pannello di aggiornamento alla pagina.
Impostare la proprietà ChildrenAsTriggers del controllo UpdatePanel su false.
Impostare la proprietà UpdateMode del controllo UpdatePanel su Conditional.
Fare clic all'interno del controllo UpdatePanel, quindi dalla scheda Standard della Casella degli strumenti aggiungere un controllo Button e un controllo Label al controllo UpdatePanel.

Nota:

Accertarsi di aggiungere i controlli Label e Button all'interno del controllo UpdatePanel.
Accertarsi che la proprietà ID del pulsante sia impostata su Button1 e impostarne la proprietà Text su Display Date.
Accertarsi che la proprietà ID dell'etichetta sia impostata su Label1.
Passare alla visualizzazione Origine.

Nota:
Se si utilizza un browser diverso, specificare le impostazioni di lingua equivalenti in tale browser.

Nota:
Se la pagina non contiene un controllo ScriptManager, aggiungerne uno dalla scheda Estensioni AJAX della Casella degli strumenti.

Nota:
Accertarsi di aggiungere i controlli Label e Button all'interno del controllo UpdatePanel.

In fondo alla pagina, creare un elemento script e aggiungervi il seguente script client:

Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
function formatDate() {
  var d = new Date();
  try {
    $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
  }
  catch(e) {
    alert("Error:" + e.message);
  }
}

Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
function formatDate() {
  var d = new Date();
  try {
    $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
  }
  catch(e) {
    alert("Error:" + e.message);
  }
}

Questo codice consente di aggiungere un gestore click al pulsante denominato Button1. Il codice chiama la funzione formatDate che crea un nuovo oggetto Date e visualizza la data formattata nell'elemento denominato Label1. La data viene formattata utilizzando la funzione localeFormat che fa parte delle estensioni Microsoft AJAX Library per l'oggetto Date.

Nel file Web.config del sito Web, includere il seguente elemento globalization nella sezione system.web:
```
<globalization culture="auto" />
```
L'impostazione "auto" specifica di utilizzare l'intestazione ACCEPT-LANGUAGE nella richiesta del browser (che fornisce l'elenco di preferenze di lingua dell'utente) per impostare il valore relativo alle impostazioni cultura.
Salvare le modifiche, quindi eseguire la pagina Web nel browser dove sono state modificate le impostazioni della lingua.

Fare clic sul pulsante Display Date per visualizzare il valore della data globalizzata in base alle impostazioni della lingua del browser.

Nell'esempio seguente viene mostrata una pagina Web ASP.NET completa con uno script client che globalizza una data in base alla preferenza di lingua del browser.

<%@ Page Language="VB" %>

<!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 >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
                         UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>
<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

<%@ Page Language="C#" %>

<!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 >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
                         UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>
<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

Al termine, reimpostare le impostazioni della lingua nel browser.

Globalizzazione di una data in base alle impostazioni di configurazione

Se si desidera visualizzare date formattate in più pagine, è possibile definire le impostazioni cultura nel file di configurazione del sito Web. Le impostazioni di formato si applicano quindi alle date in tutte le pagine.

Per globalizzare una data in base alle impostazioni del file di configurazione

Nel file Web.config dell'applicazione, modificare l'elemento globalization nella sezione system.web come segue:
```
<globalization culture="fr-CA" />
```
Questa impostazione specifica il valore relativo alle impostazioni cultura "fr-CA" per il francese (Canada), indipendentemente da quanto specificato dall'impostazione della lingua del browser.
Salvare le modifiche e quindi eseguire la pagina Web nel browser.

Fare clic sul pulsante Display Date per visualizzare il valore della data globalizzata.

La formattazione della data ora si basa sull'attributo Culture nel file di configurazione anziché sulla preferenza di lingua del browser.

Nell'esempio seguente viene mostrata una pagina Web ASP.NET completa con uno script client che globalizza una data in base alle impostazioni del file di configurazione.

<%@ Page Language="VB" %>

<!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 >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
             UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

<%@ Page Language="C#" %>

<!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 >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
                         UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

Globalizzazione di una data in base alle impostazioni della pagina

Per definire le impostazioni cultura per una pagina singola è possibile utilizzare l'attributo Culture della direttiva @ Page. L'attributo Culture della direttiva @ Page ha la precedenza sull'impostazione nel file di configurazione e sulle impostazioni della lingua del browser.

Per globalizzare una data in base alle impostazioni della pagina

Nella pagina utilizzata, modificare la direttiva @ Page in modo da impostare il valore Culture su "de-DE" per il tedesco (Germania), come indicato nell'esempio seguente:
```
<%@ Page Language="C#" AutoEventWireup="true" Culture="de-DE" %>
```
Salvare le modifiche e quindi eseguire la pagina Web nel browser.

Fare clic sul pulsante Display Date per visualizzare il valore relativo alla data globalizzata.

La formattazione della data ora si basa sull'attributo Culture della direttiva @ Page.

Nell'esempio seguente viene mostrata una pagina Web ASP.NET completa con uno script client che globalizza una data in base alle impostazioni della pagina.

<%@ Page Language="VB" Culture="de-DE" %>

<!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 >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
             UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

<%@ Page Language="C#" Culture="de-DE" %>

<!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 >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
             UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

Globalizzazione di una data a livello di codice

Se si desidera impostare a livello di codice il valore relativo alle impostazioni cultura per una pagina, è possibile eseguire l'override del metodo InitializeCulture della pagina nel codice server. Il metodo InitializeCulture ha la precedenza sulle impostazioni cultura nella direttiva @ Page, nel file di configurazione e nel browser.

Per globalizzare una data a livello di codice

Aggiungere il seguente metodo alla pagina:
```
 Protected Overrides Sub InitializeCulture()
        Me.Culture = "it-IT"
    End Sub
```
```
protected override void InitializeCulture()
{
    this.Culture = "it-IT";
}
```
Questo codice esegue l'override del metodo InitializeCulture della classe base Page e imposta il valore relativo alle impostazioni cultura su "it-IT" per l'italiano (Italia). Questo è il momento appropriato nel ciclo di vita della pagina per modificare le impostazioni cultura a livello di codice.
Salvare le modifiche e quindi eseguire la pagina Web nel browser.

Fare clic sul pulsante Display Date per visualizzare la data globalizzata.

Il valore della data ora viene formattato in base al codice server.

Nell'esempio seguente viene mostrata una pagina Web ASP.NET completa con uno script client che globalizza una data a livello di codice.

<%@ Page Language="VB" Culture="de-DE" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script >
    Protected Overrides Sub InitializeCulture()
        Me.Culture = "it-IT"
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
             UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

<%@ Page Language="C#" Culture="de-DE" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script >
        protected override void InitializeCulture()
        {
            this.Culture = "it-IT";
        }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
             UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

Modelli di formattazione

Il metodo localeFormat può accettare diversi modelli di formattazione. Per ulteriori informazioni sui formati delle stringhe di data e ora, vedere Classe Sys.CultureInfo.

Vedere anche

Attività

Procedura: impostare la lingua e la lingua dell'interfaccia utente per la globalizzazione di pagine Web ASP.NET

Altre risorse

Globalizzazione e localizzazione ASP.NET

Condividi tramite