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

Artikel
10/22/2014

Aktualisiert: November 2007

In dieser exemplarischen Vorgehensweise wird beschreiben, wie eine ECMAScript (JavaScript)-Datei als eingebettete Quelle in einer Assembly eingeschlossen wird und lokalisierte Zeichenfolgen für die Verwendung in der JavaScript-Datei eingeschlossen werden. Sie betten eine JavaScript-Datei in eine Assembly ein, wenn Sie über eine Clientskriptkomponente verfügen, die mit der Assembly verteilt werden muss. Auf die JavaScript-Datei kann von einer Webanwendung verwiesen werden, die die Assembly registriert. Sie betten lokalisierte Ressourcen ein, wenn Sie Werte ändern müssen, die von der JavaScript-Datei für verschiedene Sprachen und Kulturen verwendet werden.

Vorbereitungsmaßnahmen

Zum Implementieren der Prozeduren in dieser exemplarischen Vorgehensweise ist Folgendes erforderlich:

Microsoft Visual Studio 2008.

Hinweis:
Visual Web Developer Express Edition kann nicht verwendet werden, da Sie mit Visual Web Developer Express Edition das in der exemplarischen Vorgehensweise benötigte Klassenbibliotheksprojekt nicht erstellen können.

Erstellen einer Assembly, die eine eingebettete JavaScript-Datei enthält

Sie erstellen zunächst eine Assembly (DLL-Datei), die die JavaScript-Datei enthält, die Sie als Ressource behandeln möchten. Dazu erstellen Sie in Visual Studio ein Klassenbibliotheksprojekt, das eine Assembly als Ausgabe erzeugt.

So betten Sie eine Clientskriptdatei und Ressourcen in eine Assembly ein

Erstellen Sie in Visual Studio ein neues Klassenbibliotheksprojekt mit dem Namen LocalizingScriptResources.
Fügen Sie dem Projekt Verweise auf die Assemblys System.Web und System.Web.Extensions hinzu.
Fügen Sie dem Projekt eine neue JScript-Datei mit dem Namen CheckAnswer.js hinzu.

Fügen Sie der Datei CheckAnswer.js den folgenden Code hinzu.

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

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

Das Skript überprüft das Ergebnis des Benutzers daraufhin, ob zwei Zahlen hinzugefügt wurden. Es teilt dem Benutzer mithilfe der alert-Funktion mit, ob die Antwort richtig ist. Die im Dialogfeld alert angezeigte Meldung wird aus einer lokalisierten Ressource ohne Postback an den Server gelesen.

Im Skript wird ein Platzhalter mit dem Namen Answer verwendet, um zu ermitteln, welche Ressourcendateien die lokalisierten Zeichenfolgen enthalten. Der Answer-Platzhalter wird weiter unten in diesem Verfahren definiert.

Legen Sie im Fenster Eigenschaften für CheckAnswer.js den Buildvorgang auf Eingebettete Ressource fest.
Fügen Sie dem Projekt eine Klasse mit dem Namen ClientVerification hinzu.

Ersetzen Sie den Code in der Klassendatei ClientVerification durch den folgenden Code:

Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Resources

Public Class ClientVerification
    Inherits Control

    Private _button As Button
    Private _firstLabel As Label
    Private _secondLabel As Label
    Private _answer As TextBox
    Private _firstInt As Int32
    Private _secondInt As Int32


    Protected Overrides Sub CreateChildControls()
        Dim random = New Random()
        _firstInt = random.Next(0, 20)
        _secondInt = random.Next(0, 20)

        Dim rm = New ResourceManager("LocalizingScriptResources.VerificationResources", Me.GetType().Assembly)
        Controls.Clear()

        _firstLabel = New Label()
        _firstLabel.ID = "firstNumber"
        _firstLabel.Text = _firstInt.ToString()

        _secondLabel = New Label()
        _secondLabel.ID = "secondNumber"
        _secondLabel.Text = _secondInt.ToString()

        _answer = New TextBox()
        _answer.ID = "userAnswer"

        _button = New Button()
        _button.ID = "Button"
        _button.Text = rm.GetString("Verify")
        _button.OnClientClick = "return CheckAnswer();"

        Controls.Add(_firstLabel)
        Controls.Add(New LiteralControl(" + "))
        Controls.Add(_secondLabel)
        Controls.Add(New LiteralControl(" = "))
        Controls.Add(_answer)
        Controls.Add(_button)
    End Sub

End Class

using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Resources;


namespace LocalizingScriptResources
{
    public class ClientVerification : Control
    {
        private Button _button;
        private Label _firstLabel;
        private Label _secondLabel;
        private TextBox _answer;
        private int _firstInt;
        private int _secondInt;

        protected override void CreateChildControls()
        {
            Random random = new Random();
            _firstInt = random.Next(0, 20);
            _secondInt = random.Next(0, 20);

            ResourceManager rm = new ResourceManager("LocalizingScriptResources.VerificationResources", this.GetType().Assembly);
            Controls.Clear();

            _firstLabel = new Label();
            _firstLabel.ID = "firstNumber";
            _firstLabel.Text = _firstInt.ToString();

            _secondLabel = new Label();
            _secondLabel.ID = "secondNumber";
            _secondLabel.Text = _secondInt.ToString();

            _answer = new TextBox();
            _answer.ID = "userAnswer";

            _button = new Button();
            _button.ID = "Button";
            _button.Text = rm.GetString("Verify");
            _button.OnClientClick = "return CheckAnswer();";

            Controls.Add(_firstLabel);
            Controls.Add(new LiteralControl(" + "));
            Controls.Add(_secondLabel);
            Controls.Add(new LiteralControl(" = "));
            Controls.Add(_answer);
            Controls.Add(_button);
        }
    }
}

Der Code erstellt ein benutzerdefiniertes ASP.NET-Steuerelement. Es enthält zwei Label-Steuerelemente, ein TextBox-Steuerelement und ein Button-Steuerelement. Der Code zeigt zwei willkürlich generierte ganze Zahlen an und stellt ein Textfeld für eine Antwort bereit. Beim Klicken auf die Schaltfläche wird die CheckAnswer-Funktion aufgerufen.

Fügen Sie dem Projekt eine Ressourcendatei hinzu, und nennen Sie sie VerificationResources.resx.
Fügen Sie eine Zeichenfolgenressource mit dem Namen Richtig mit dem Wert "Ja, Ihre Antwort ist richtig" hinzu.
Fügen Sie eine Zeichenfolgenressource mit dem Namen Falsch mit dem Wert "Nein, Ihre Antwort ist falsch" hinzu.
Fügen Sie eine Zeichenfolgenressource mit dem Namen Überprüfen mit dem Wert "Antwort überprüfen" hinzu.

Diese Ressource wird bei Verwendung des Clientskripts nicht abgerufen. Sie dient stattdessen dazu, die Text-Eigenschaft des Button-Steuerelements festzulegen, wenn die Schaltfläche erstellt wird.
Speichern und schließen Sie die Datei VerificationResources.resx.
Fügen Sie dem Projekt eine Ressourcendatei mit dem Namen VerificationResources.it.resx hinzu.

Diese Datei enthält Ressourcenzeichenfolgen in italienischer Sprache.
Fügen Sie eine Zeichenfolgenressource mit dem Namen Richtig mit dem Wert "Si, la risposta è corretta" hinzu.
Fügen Sie eine Zeichenfolgenressource mit dem Namen Falsch mit dem Wert "No, la risposta è sbagliata" hinzu.
Fügen Sie eine Zeichenfolgenressource mit dem Namen Überprüfen mit dem Wert "Verificare la risposta" hinzu.

Diese Ressource wird ebenso wie die in Deutsch erstellte Ressource "Überprüfen" bei Verwendung des Clientskripts nicht abgerufen. Sie dient stattdessen dazu, die Text-Eigenschaft des Button-Steuerelements festzulegen, wenn die Schaltfläche erstellt wird.
Speichern und schließen Sie die Datei VerificationResources.it.resx.

Fügen Sie der AssemblyInfo-Datei die folgende Zeile hinzu. Sie können im ScriptResourceAttribute-Attribut einen beliebigen Namen für den Typ angeben, er muss jedoch mit dem im Clientskript verwendeten Typnamen übereinstimmen. In diesem Beispiel wird er auf Answer festgelegt.

<Assembly: System.Web.UI.WebResource("LocalizingScriptResources.CheckAnswer.js", "application/x-javascript")> 
<Assembly: System.Web.UI.ScriptResource("LocalizingScriptResources.CheckAnswer.js", "LocalizingScriptResources.VerificationResources", "Answer")>

[assembly: System.Web.UI.WebResource("LocalizingScriptResources.CheckAnswer.js", "application/x-javascript")]
[assembly: System.Web.UI.ScriptResource("LocalizingScriptResources.CheckAnswer.js", "LocalizingScriptResources.VerificationResources", "Answer")]

Hinweis:
Die Datei AssemblyInfo.vb befindet sich im Knoten Eigenes Projekt des Projektmappen-Explorers. Wenn im Knoten Eigenes Projekt keine Dateien angezeigt werden, klicken Sie im Menü Projekt auf Alle Dateien anzeigen. Die Datei AssemblyInfo.cs befindet sich im Knoten Eigenschaften des Projektmappen-Explorers.

Die WebResource-Definition muss den Standardnamespace der Assembly und den Namen der JS-Datei enthalten. Die ScriptResource-Definition umfasst nicht die Dateinamenerweiterung oder die lokalisierten RESX-Dateien.

Erstellen Sie das Projekt.

Nach Abschluss der Kompilierung verfügen Sie über eine Assembly mit dem Namen LocalizingScriptResources.dll. Der JavaScript-Code in der Datei CheckAnswer.js und die Ressourcen in den beiden RESX-Dateien sind in dieser Assembly als Ressourcen eingebettet.

Darüber hinaus verfügen Sie über eine Assembly mit dem Namen LocalizingScriptResources.resources.dll (eine Satellitenassembly), welche die italienischen Ressourcen für den Servercode enthält.

Verweisen auf das eingebettete Skript und die eingebetteten Ressourcen

Jetzt können Sie die Assembly in einer AJAX-fähigen ASP.NET-Website verwenden. Sie haben die Möglichkeit, die JS-Datei und die Ressourcenwerte im Clientskript zu lesen.

Hinweis:
Sie können zwar das Klassenbibliotheksprojekt und die Website in der gleichen Visual Studio-Projektmappe erstellen, in dieser exemplarischen Vorgehensweise wird jedoch nicht von einer solchen Vorgehensweise ausgegangen. Durch die Anlage der Projekte in verschiedenen Projektmappen wird die Situation eines Steuerelemententwicklers und eines Seitenentwicklers nachgestellt, die jeweils separat arbeiten. Zur Vereinfachung können Sie jedoch beide Projekte in derselben Projektmappe erstellen und die Prozeduren in der exemplarischen Vorgehensweise entsprechend anpassen.

Sie können zwar das Klassenbibliotheksprojekt und die Website in der gleichen Visual Studio-Projektmappe erstellen, in dieser exemplarischen Vorgehensweise wird jedoch nicht von einer solchen Vorgehensweise ausgegangen. Durch die Anlage der Projekte in verschiedenen Projektmappen wird die Situation eines Steuerelemententwicklers und eines Seitenentwicklers nachgestellt, die jeweils separat arbeiten. Zur Vereinfachung können Sie jedoch beide Projekte in derselben Projektmappe erstellen und die Prozeduren in der exemplarischen Vorgehensweise entsprechend anpassen.

So verweisen Sie auf das eingebettete Skript und die eingebetteten Ressourcen

Erstellen Sie in Visual Studio eine neue AJAX-fähige Website.
Fügen Sie einen Ordner mit dem Namen Bin unter dem Stammordner der Website hinzu.

Fügen Sie die Assembly LocalizingScriptResources.dll aus dem Klassenbibliotheksprojekt dem Ordner Bin hinzu.

Hinweis:
Wenn Sie das Klassenbibliotheksprojekt und die Website in der gleichen Visual Studio-Projektmappe erstellt haben, können Sie im Klassenbibliotheksprojekt einen Verweis auf die Website hinzufügen. Ausführliche Informationen finden Sie unter Gewusst wie: Hinzufügen eines Verweises auf ein Visual Studio-Projekt in einer Website.

Erstellen Sie einen Ordner im Ordner Bin, und geben Sie ihm den Namen it (für Italienisch).
Fügen Sie die Satellitenassembly LocalizingScriptResources.resources.dll aus dem Ordner it im Projekt LocalizingScriptResources dem Ordner it in der Website hinzu.
Fügen Sie dem Projekt eine neue ASP.NET-Webseite hinzu.

Ersetzen Sie den Code auf der Seite durch folgenden Code:

<%@ Page Language="VB" AutoEventWireup="true" UICulture="auto" Culture="auto" %>
<%@ Register TagPrefix="Samples" Namespace="LocalizingScriptResources" Assembly="LocalizingScriptResources" %>
<script >

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        If (IsPostBack) Then
            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 Assembly="LocalizingScriptResources" Name="LocalizingScriptResources.CheckAnswer.js" />
        </Scripts>
        </asp:ScriptManager>
        <div>
        <Samples:ClientVerification ID="ClientVerification1"  ></Samples:ClientVerification>
        </div>
    </form>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="true" UICulture="auto" Culture="auto" %>
<%@ Register TagPrefix="Samples" Namespace="LocalizingScriptResources" Assembly="LocalizingScriptResources" %>
<script >

    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            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 >
    <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 Assembly="LocalizingScriptResources" Name="LocalizingScriptResources.CheckAnswer.js" />
        </Scripts>
        </asp:ScriptManager>
        <div>
        <Samples:ClientVerification  ></Samples:ClientVerification>
        </div>
    </form>
</body>
</html>

Das Steuerelement, das Sie im Projekt LocalizingScriptResources erstellt haben, wird auf der Seite eingefügt. Dieses Steuerelement zeigt zwei Zahlen an, die der Benutzer hinzufügen muss, und ein TextBox-Steuerelement, in das der Benutzer eine Antwort eingeben muss. Außerdem wird eine Schaltfläche angezeigt, über die das Skript in der CheckAnswer-Funktion aufgerufen wird. Die CheckAnswer-Funktion wird im Browser ausgeführt und zeigt eine lokalisierte Meldung an, die angibt, ob die Antwort richtig ist.

Sie müssen die EnableScriptLocalization-Eigenschaft des ScriptManager-Objekts auf true festlegen, damit das ScriptManager-Steuerelement lokalisierte Ressourcen abrufen kann. Darüber hinaus müssen Sie die Kultur und die benutzeroberflächenspezifische Kultur auf "auto" festlegen, um die Zeichenfolgen anzuzeigen, die auf den Browsereinstellungen beruhen.

Die Seite enthält ein DropDownList-Steuerelement, mit dem Sie die Spracheinstellungen ändern können, 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.

Führen Sie das Projekt 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, sehen Sie die Antwort in einem Meldungsfenster, in dem Ihnen mitgeteilt wird, ob die Antwort richtig ist. Standardmäßig wird die Antwort auf Deutsch zurückgegeben.

Wenn Sie im Browser jedoch Italienisch als bevorzugte Sprache festgelegt haben, wird die Antwort auf Italienisch gegeben. Sie können die Sprache der Antwort ändern, indem Sie im DropDownList-Steuerelement eine Sprache auswählen oder indem Sie im Browser die bevorzugte Sprache ändern.

Zusammenfassung

In dieser exemplarischen Vorgehensweise wurde das Einbetten einer JavaScript-Datei als Ressource in einer Assembly und das Einfügen lokalisierter Zeichenfolgen vorgestellt. In einer Webanwendung, die die Assembly enthält, kann auf die eingebettete Skriptdatei verwiesen und zugegriffen werden. Die lokalisierten Zeichenfolgen werden entsprechend den Spracheinstellungen im Browser oder der vom Benutzer angegebenen Sprache angezeigt.

Siehe auch

Aufgaben

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

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

Share via