Exemplarische Vorgehensweise: Globalisieren eines Datums mit Clientskript

Artikel
10/22/2014

Aktualisiert: November 2007

In dieser exemplarischen Vorgehensweise werden Tage, Monate und andere Datumswerte mit ECMAScript (JavaScript) in globalisierten Formaten angezeigt. Die AJAX-Funktionalität in ASP.NET unterstützt die Clientglobalisierung auf Grundlage einer Einstellung des ScriptManager-Steuerelements. Nach dem Übernehmen dieser Globalisierungseinstellungen für die Webanwendung können Sie ein Date- oder Number-JavaScript-Objekt abhängig von einem Wert für die Kultur mit Clientskript formatieren. Dafür ist kein Postback zum Server erforderlich.

Der vom Clientskript verwendete Wert für die Kultur ist von der Standardkultureinstellung abhängig, die in den Browsereinstellungen des Benutzers angegeben ist. Wahlweise kann er in Ihrer Anwendung mithilfe von Servereinstellungen oder Servercode auch auf eine bestimmte Kultur gesetzt werden.

Der Wert für die Kultur stellt Informationen über eine bestimmte Kultur (ein Gebietsschema) bereit. Er ist eine Kombination aus zwei Buchstaben für die Sprache und zwei Buchstaben für das Land bzw. die Region. Hier einige Beispiele: es-MX (Spanisch - Mexiko), es-CO (Spanisch - Kolumbien) und fr-CA (Französisch - Kanada).

Mit den Date-Erweiterungen von ASP.NET-AJAX erhält das Date-Objekt in JavaScript über die localeFormat-Methode eine zusätzliche Funktionalität. Mit dieser Methode kann ein Date-Objekt abhängig von der Spracheinstellung des Browsers, von Servereinstellungen oder von Servercode formatiert werden. Diese Werte beeinflussen den Serverwert für die Kultur, der dann vom Server interpretiert wird, um ein Clientobjekt zu generieren, das über die Sys.CultureInfo.CurrentCulture-Eigenschaft verfügbar gemacht wird. Dieses Objekt wird zum Formatieren von Datumsangaben verwendet.

Weitere Informationen über Kulturen und Gebietsschemas finden Sie unter ASP.NET-Globalisierung und -Lokalisierung und in der CultureInfo-Klassenübersicht.

Vorbereitungsmaßnahmen

Zur Implementierung dieser Prozeduren in Ihrer eigenen Entwicklungsumgebung ist Folgendes erforderlich:

Microsoft Visual Studio 2005 oder Microsoft Visual Web Developer Express Edition.
Eine AJAX-fähige ASP.NET-Website

Globalisieren eines Datums auf Grundlage von Browsereinstellungen

Zum Einstieg verwenden Sie die Spracheinstellungen des Browsers, um anzugeben, wie ein Datum formatiert werden soll.

So globalisieren Sie ein Datum auf Grundlage der Spracheinstellungen des Browsers

Schließen Sie alle geöffneten Instanzen von Microsoft Internet Explorer bzw. Ihres Standardbrowsers, sodass alle neuen Instanzen eine neue Gebietsschemaeinstellung verwenden.
Öffnen Sie eine neue Instanz von Internet Explorer.
Klicken Sie im Menü Extras auf Internetoptionen, klicken Sie auf die Registerkarte Allgemein und dann auf Sprache.
Legen Sie die Spracheinstellungen auf es-MX (Spanisch - Mexiko) fest, und entfernen Sie alle anderen Gebietsschemas aus der Liste.

Hinweis:

Wenn Sie einen anderen Browser verwenden, nehmen Sie die entsprechenden Spracheinstellungen in diesem Browser vor.
Schließen Sie den Browser.
Erstellen oder öffnen Sie in Visual Studio eine ASP.NET-AJAX-fähige Webseite, und wechseln Sie in die Entwurfsansicht.
Wählen Sie das ScriptManager-Steuerelement aus, und legen Sie die EnableScriptGlobalization-Eigenschaft auf true fest.

Hinweis:

Wenn die Seite noch kein ScriptManager-Steuerelement enthält, fügen Sie eines von der Registerkarte AJAX-Erweiterungen der Toolbox hinzu.
Doppelklicken Sie auf der Registerkarte AJAX-Erweiterungen der Toolbox auf das UpdatePanel-Steuerelement, um der Seite einen Aktualisierungsbereich hinzuzufügen.
Legen Sie die ChildrenAsTriggers-Eigenschaft des UpdatePanel-Steuerelements auf false fest.
Legen Sie die UpdateMode-Eigenschaft des UpdatePanel-Steuerelements auf Conditional fest.
Klicken Sie in das UpdatePanel-Steuerelement, und fügen Sie dann dem UpdatePanel-Steuerelement von der Registerkarte Standard der Toolbox ein Button-Steuerelement und ein Label-Steuerelement hinzu.

Hinweis:

Stellen Sie sicher, dass Sie das Label-Steuerelement und das Button-Steuerelement innerhalb des UpdatePanel-Steuerelements hinzufügen.
Stellen Sie sicher, dass die ID-Eigenschaft der Schaltfläche auf Button1 festgelegt ist, und legen Sie die Text-Eigenschaft auf Display Date fest.
Stellen Sie sicher, dass die ID-Eigenschaft der Bezeichnung auf Label1 festgelegt ist.
Wechseln Sie zur Quellansicht.

Hinweis:
Wenn Sie einen anderen Browser verwenden, nehmen Sie die entsprechenden Spracheinstellungen in diesem Browser vor.

Hinweis:
Wenn die Seite noch kein ScriptManager-Steuerelement enthält, fügen Sie eines von der Registerkarte AJAX-Erweiterungen der Toolbox hinzu.

Hinweis:
Stellen Sie sicher, dass Sie das Label-Steuerelement und das Button-Steuerelement innerhalb des UpdatePanel-Steuerelements hinzufügen.

Erstellen Sie am Seitenende ein script-Element, und fügen Sie ihm das folgende Clientskript hinzu:

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);
  }
}

Mit diesem Code wird ein click-Handler zur Schaltfläche Button1 hinzugefügt. Der Code ruft die formatDate-Funktion auf, von der ein neues Date-Objekt erstellt und das formatierte Datum im Element Label1 angezeigt wird. Das Datum wird mithilfe der localeFormat-Funktion formatiert, die Teil der Microsoft AJAX Library-Erweiterungen für das Date-Objekt ist.

Geben Sie in der Datei Web.config der Website das folgende globalization-Element im Abschnitt system.web ein:
```
<globalization culture="auto" />
```
Bei der Einstellung "auto" wird der Wert für die Kultur anhand des ACCEPT-LANGUAGE-Headers in der Browseranforderung (die die Liste der bevorzugten Sprachen des Benutzers bereitstellt) festgelegt.
Speichern Sie die Änderungen, und rufen Sie dann die Webseite im Browser mit den geänderten Spracheinstellungen auf.

Klicken Sie auf die Schaltfläche Display Date, um die globalisierte Datumsangabe anzuzeigen, die von den Spracheinstellungen des Browser abhängig ist.

Das folgende Beispiel enthält eine vollständige ASP.NET-Webseite mit Clientskript, die ein Datum je nach Spracheinstellung des Browsers globalisiert.

<%@ 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>

Setzen Sie abschließend die Spracheinstellungen im Browser zurück.

Globalisieren eines Datums auf Grundlage von Konfigurationseinstellungen

Wenn Sie formatierte Datumsangaben auf mehreren Seiten anzeigen möchten, können Sie die Kultur in der Konfigurationsdatei der Website festlegen. Die Formateinstellungen gelten dann für Datumsangaben auf allen Seiten.

So globalisieren Sie ein Datum auf Grundlage von Einstellungen in der Konfigurationsdatei

Nehmen Sie in der Datei Web.config der Anwendung im globalization-Element im system.web-Abschnitt folgende Änderungen vor:
```
<globalization culture="fr-CA" />
```
Durch diese Einstellung wird der Wert für die Kultur auf "fr-CA" (Französisch - Kanada) festgelegt, unabhängig von der Sprache, die in der Spracheinstellung des Browsers angegeben ist.
Speichern Sie die Änderungen, und rufen Sie die Webseite anschließend im Browser auf.

Klicken Sie auf die Schaltfläche Display Date, um das globalisierte Datum anzuzeigen.

Die Formatierung des Datums basiert nun auf dem Attribut für die Kultur in der Konfigurationsdatei, nicht auf der Spracheinstellung des Browsers.

Das folgende Beispiel enthält eine vollständige ASP.NET-Webseite mit Clientskript, die ein Datum abhängig von den Einstellungen in der Konfigurationsdatei globalisiert.

<%@ 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>

Globalisieren eines Datums auf Grundlage von Seiteneinstellungen

Um die Kultur für eine einzelne Seite festzulegen, können Sie das Culture-Attribut der @ Page-Direktive verwenden. Das Culture-Attribut der @ Page-Direktive hat Vorrang vor der Einstellung in der Konfigurationsdatei und den Spracheinstellungen des Browsers.

So globalisieren Sie ein Datum auf Grundlage einer Seiteneinstellung

Ändern Sie die @ Page-Direktive auf der Seite, mit der Sie arbeiten, um den Wert für die Kultur auf "de-DE" (Deutsch - Deutschland) festzulegen, wie im folgenden Beispiel gezeigt:
```
<%@ Page Language="C#" AutoEventWireup="true" Culture="de-DE" %>
```
Speichern Sie die Änderungen, und rufen Sie die Webseite anschließend im Browser auf.

Klicken Sie auf die Schaltfläche Display Date, um das globalisierte Datum anzuzeigen.

Die Formatierung des Datums basiert nun auf dem Culture-Attribut der @ Page-Direktive.

Das folgende Beispiel enthält eine vollständige ASP.NET-Webseite mit Clientskript, die ein Datum abhängig von einer Seiteneinstellung globalisiert.

<%@ 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>

Programmgesteuertes Globalisieren eines Datums

Wenn Sie den Wert für die Kultur für eine Seite programmgesteuert festlegen möchten, können Sie die InitializeCulture-Methode der Seite im Servercode überschreiben. Die InitializeCulture-Methode hat Vorrang vor den Kultureinstellungen in der @ Page-Direktive, in der Konfigurationsdatei und im Browser.

So globalisieren Sie ein Datum programmgesteuert

Fügen Sie der Seite die folgende Methode hinzu:
```
    Protected Overrides Sub InitializeCulture()
        Me.Culture = "it-IT"
    End Sub
```
```
protected override void InitializeCulture()
{
    this.Culture = "it-IT";
}
```
Dieser Code überschreibt die InitializeCulture-Methode der Page-Basisklasse und legt den Wert für die Kultur auf "it-IT" (Italienisch - Italien) fest. Dies ist der geeignete Zeitpunkt im Lebenszyklus der Seite, um die Kultur programmgesteuert zu ändern.
Speichern Sie die Änderungen, und rufen Sie die Webseite anschließend im Browser auf.

Klicken Sie auf die Schaltfläche Display Date, um das globalisierte Datum anzuzeigen.

Die Formatierung des Datumswerts basiert nun auf Servercode.

Im folgenden Beispiel wird eine vollständige ASP.NET-Webseite mit Clientskript dargestellt, die ein Datum programmgesteuert globalisiert.

<%@ 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>

Formatierungsmuster

Die localeFormat-Methode akzeptiert verschiedene Formatierungsmuster. Weitere Informationen über Formate für Datums- und Uhrzeitzeichenfolgen finden Sie unter Sys.CultureInfo-Klasse.

Siehe auch

Aufgaben

Gewusst wie: Festlegen der Kultur und der Kultur der Benutzeroberfläche für die Globalisierung von ASP.NET-Webseiten

Weitere Ressourcen

ASP.NET-Globalisierung und -Lokalisierung

Freigeben über

Exemplarische Vorgehensweise: Globalisieren eines Datums mit Clientskript

Vorbereitungsmaßnahmen

Globalisieren eines Datums auf Grundlage von Browsereinstellungen

So globalisieren Sie ein Datum auf Grundlage der Spracheinstellungen des Browsers

Globalisieren eines Datums auf Grundlage von Konfigurationseinstellungen

So globalisieren Sie ein Datum auf Grundlage von Einstellungen in der Konfigurationsdatei

Globalisieren eines Datums auf Grundlage von Seiteneinstellungen

So globalisieren Sie ein Datum auf Grundlage einer Seiteneinstellung

Programmgesteuertes Globalisieren eines Datums

So globalisieren Sie ein Datum programmgesteuert

Formatierungsmuster

Siehe auch

Aufgaben

Weitere Ressourcen

Zusätzliche Ressourcen