Exemplarische Vorgehensweise: Hinzufügen von lokalisierten Ressourcen zu einer JavaScript-Datei

Artikel
10/22/2014

Aktualisiert: November 2007

In dieser exemplarischen Vorgehensweise wird erläutert, wie lokalisierte Ressourcen in eine ECMAScript (JavaScript)-Datei eingebunden werden. In dieser exemplarischen Vorgehensweise bestehen die Ressourcen aus Zeichenfolgen. Wenn Sie eine eigenständige JavaScript-Datei erstellt haben und die Anwendung verschiedene Werte für verschiedene Sprachen und Kulturen bereitstellt, können lokalisierte Ressourcen in eine JavaScript-Datei eingebunden werden.

Eigenständiger JavaScript-Code wird nicht als Ressource in eine Assembly eingebettet und kann daher nicht auf die Werte in einer Ressourcendatei zugreifen. Stattdessen binden Sie die lokalisierten Zeichenfolgenwerte direkt in die Skriptdatei ein. Die lokalisierten Werte werden abgerufen, wenn das Skript im Browser ausgeführt wird.

Sie erstellen für jede unterstützte Sprache und Kultur eine separate Skriptdatei. In jeder Skriptdatei wird ein Objekt im JSON-Format eingebunden, das die lokalisierten Ressourcenwerte für die jeweilige Sprache und Kultur enthält.

Vorbereitungsmaßnahmen

Zum Implementieren der Verfahren in diesem Lernprogramm ist Folgendes erforderlich:

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

Erstellen einer JavaScript-Datei, die lokalisierte Ressourcenwerte enthält

So fügen Sie Ressourcenwerte zu einer JavaScript-Datei hinzu

Fügen Sie der Website im Stammverzeichnis einen Ordner mit dem Namen Scripts hinzu.

Fügen Sie im Ordner Scripts eine JScript-Datei mit dem Namen CheckAnswer.js hinzu, und fügen Sie anschließend der Datei den folgenden Code hinzu:

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."
};

Im Skriptcode wird ein Handler für das Load-Ereignis der Sys.Application-Klasse hinzugefügt. Der Handler legt den Schaltflächentext fest. Anstatt auf eine Zeichenfolge wird der Text auf einen Wert festgelegt, der in einer Klasse mit dem Namen Answer.Verify definiert ist. Auf diese Weise kann der Code einen lokalisierten Wert verwenden.

Das Skript enthält außerdem eine Funktion, die das Ergebnis des Benutzers daraufhin überprüft, ob zwei Zahlen hinzugefügt wurden. Es teilt dem Benutzer mithilfe der alert-Funktion mit, ob die Antwort richtig ist. Wie im Schaltflächentext, wird die im Dialogfeld alert angezeigte Meldung auf einen lokalisierten Zeichenfolgenwert ohne Postback zum Server festgelegt.

Im Skript wird ein Typ mit dem Namen Answer verwendet, um die Auflistung der in der Datei zu verwendenden lokalisierten Werte zu definieren. Der Answer-Typ wird im JSON-Format am Ende der Datei CheckAnswer.js definiert.

Fügen Sie im Ordner Scripts eine JScript-Datei mit dem Namen CheckAnswer.it-IT.js hinzu. Fügen Sie der Datei den folgenden Code hinzu.

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."
};

Diese Datei ist identisch mit der Datei CheckAnswer.js mit der Ausnahme, dass sie einen Answer-Typ mit italienischen Werten enthält.

Um lokalisierten Text in zusätzlichen Sprachen bereitzustellen, können weitere JavaScript-Dateien erstellt werden. Der JavaScript-Code ist immer gleich, jedoch liegen die im Answer-Typ definierten Werte in anderen Sprachen vor. Der Name jeder JavaScript-Datei muss die entsprechende Sprache und das Gebietsschema enthalten.

Verwenden von JavaScript-Ressourcenwerten in einer ASP.NET-Seite

Sie können jetzt eine ASP.NET-Webseite erstellen, die den von Ihnen erstellten Skriptcode verwendet. Mithilfe der Seite können Sie die Auswirkungen einer Sprachänderung testen.

So verwenden Sie JavaScript-Ressourcenwerte in einer ASP.NET-Webseite

Erstellen Sie eine ASP.NET-Webseite.

Ersetzen Sie den Inhalt der Webseite durch das folgende Markup und den folgenden Code:

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

Das Markup erstellt ein DropDownList-Steuerelement, zwei Label-Steuerelemente, ein TextBox-Steuerelement und ein Button-Steuerelement. Die Seite zeigt zwei zufällig generierte ganze Zahlen an und fordert den Benutzer zum Addieren auf. Außerdem enthält sie ein Textfeld für eine Antwort. Beim Klicken auf die Schaltfläche wird die JavaScript-CheckAnswer-Funktion aufgerufen.

Mit dem DropDownList-Steuerelement können Sie die Spracheinstellungen ändern, ohne die Einstellungen im Browser zu ändern. Wenn sich die SelectedIndex-Eigenschaft des DropDownList-Steuerelements ändert, wird die CurrentUICulture-Eigenschaft der CurrentThread-Instanz auf den ausgewählten Wert festgelegt.

Hinweis:
Informationen zum Festlegen von Kulturinformationen für einen Thread finden Sie unter Gewusst wie: Festlegen der Kultur und der Kultur der Benutzeroberfläche für die Globalisierung von ASP.NET-Webseiten.

Das ScriptManager-Steuerelement enthält einen Verweis auf die Skriptdatei CheckAnswer.js. Dies bewirkt, dass beim Ausführen der Seite die Datei CheckAnswer.js abgerufen wird.

Die ResourceUICultures-Eigenschaft des Verweises ist auf "it-IT" festgelegt, um anzugeben, dass die Website eine italienische Version des Skripts enthält. Dadurch ruft das ScriptManager-Objekt die italienische Version ab, wenn Sie "Italienisch" im DropDownList-Steuerelement auswählen oder wenn Sie im Browser "Italienisch" als Standardsprache festgelegt haben.

Führen Sie die Seite aus.

Sie sehen eine Additionsaufgabe mit zwei zufällig generierten Zahlen und ein TextBox-Steuerelement zum Eingeben einer Antwort. Wenn Sie eine Antwort eingeben und auf die Schaltfläche Antwort überprüfen klicken, wird Ihnen in einem Meldungsfenster mitgeteilt, ob die Antwort richtig ist.

Standardmäßig wird die Antwort auf Englisch angezeigt.
Ändern Sie die Sprache in Italienisch, indem Sie "Italienisch" in der Dropdownliste auswählen.
Führen Sie das Quiz erneut aus.

Dieses Mal wird die Antwort auf Italienisch angezeigt.

Zusammenfassung

In dieser exemplarischen Vorgehensweise wurde erläutert, wie einer eigenständigen JavaScript-Datei lokalisierte Ressourcenwerte hinzugefügt werden. Die lokalisierten Werte werden als Objekte im JSON-Format erstellt, die Teil von einzelnen lokalisierten JavaScript-Dateien sind. Lokalisierte Werte werden angezeigt, indem Sie auf das JSON-Objekt verweisen, anstatt hartcodierte Zeichenfolgen zu verwenden. Die lokalisierten Zeichenfolgen werden entsprechend den Spracheinstellungen im Browser oder der vom Benutzer angegebenen Spracheinstellung angezeigt.

Siehe auch

Aufgaben

Lokalisieren von Ressourcen für die Übersicht über Komponentenbibliotheken

Exemplarische Vorgehensweise: Einbetten von lokalisierten Ressourcen für eine JavaScript-Datei

Freigeben über