通过

演练：在 JavaScript 文件中添加本地化资源

更新：2007 年 11 月

本演练演示如何在 ECMAScript (JavaScript) 文件中包含本地化资源。本演练中的资源为字符串。在创建独立的 JavaScript 文件后，如果应用程序必须为多种语言和区域性提供不同值，则可以在 JavaScript 文件中包含本地化资源。

独立 JavaScript 不作为资源嵌入在程序集中，因此不能访问资源文件中的值。但您可以直接在脚本文件中包含本地化字符串值。当脚本在浏览器中运行时，将检索本地化值。

可以为每种受支持的语言和区域性创建一个单独的脚本文件。在每个脚本文件中，可以包含一个 JSON 格式的对象，该对象包含针对特定语言和区域性的本地化资源值。

先决条件

若要实现本教程中的过程，您需要：

  • Microsoft Visual Studio 2005 或 Microsoft Visual Web Developer 速成版。

  • 一个支持 AJAX 的 ASP.NET 网站。

创建一个包含本地化资源值的 JavaScript 文件

向 JavaScript 文件添加资源值

  1. 在网站的根目录中，添加一个名为 Scripts 的文件夹。

  2. 在 Scripts 文件夹中，添加一个名为 CheckAnswer.js 的 Jscript 文件，然后向该文件添加以下代码。

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

    脚本代码将添加 Sys.Application 类的 load 事件的处理程序。该处理程序设置按钮文本。它将文本设置为名为 Answer.Verify 的类中定义的值，而不是设置为字符串。这使代码可以使用本地化值。

    该脚本还包含一个函数，可检查用户给出的两个数字相加的结果。该脚本使用 alert 函数来使用户知道答案是否正确。与按钮文本一样，alert 对话框中显示的消息设置为本地化字符串值，而无需回发到服务器。

    该脚本中使用一个名为 Answer 的类型来定义要在文件中使用的本地化值集合。Answer 类型在 CheckAnswer.js 文件末尾以 JSON 格式定义。

  3. 在 Scripts 文件夹中，添加一个名为 CheckAnswer.it-IT.js 的 Jscript 文件。向该文件中添加以下代码。

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

    此文件与 CheckAnswer.js 文件基本相同，区别在于它包含一个以意大利语表示值的 Answer 类型。

    若要以其他语言提供本地化文本，可以创建更多 JavaScript 文件。JavaScript 代码总是相同的，但 Answer 类型中定义的值以不同语言表示。每个 JavaScript 文件的名称都必须包含相应的语言和区域设置。

在 ASP.NET 页中使用 JavaScript 资源值

现在，可以创建一个使用您已创建的脚本代码的 ASP.NET 网页。使用该页面可以测试更改语言的效果。

在 ASP.NET 网页中使用 JavaScript 资源值

  1. 创建一个 ASP.NET 网页。

  2. 用下面的标记和代码替换该网页的内容：

    <%@ Page Language="VB" AutoEventWireup="true" UICulture="auto" Culture="auto" %>

<script runat="server">


    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" runat="server">
    <title>Client Localization Example</title>
</head>
<body>
    <form id="form1" runat="server" >
        <asp:DropDownList runat="server" 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" runat="server">
        <Scripts>
            <asp:ScriptReference Path="scripts/CheckAnswer.js" ResourceUICultures="it-IT" />
        </Scripts>
        </asp:ScriptManager>
        <div>
        <asp:Label ID="firstNumber" runat="server"></asp:Label>
        +
        <asp:Label ID="secondNumber" runat="server"></asp:Label>
        =
        <asp:TextBox ID="userAnswer" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" OnClientClick="return CheckAnswer()" />
        <br />
        <asp:Label ID="labeltest" runat="server"></asp:Label>
        </div>
    </form>
</body>
</html>

    <%@ Page Language="C#" AutoEventWireup="true" UICulture="auto" Culture="auto" %>
<script runat="server">


    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" runat="server">
    <title>Client Localization Example</title>
</head>
<body>
    <form id="form1" runat="server" >
        <asp:DropDownList runat="server" 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" runat="server">
        <Scripts>
            <asp:ScriptReference Path="scripts/CheckAnswer.js" ResourceUICultures="it-IT" />
        </Scripts>
        </asp:ScriptManager>
        <div>
        <asp:Label ID="firstNumber" runat="server"></asp:Label>
        +
        <asp:Label ID="secondNumber" runat="server"></asp:Label>
        =
        <asp:TextBox ID="userAnswer" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" OnClientClick="return CheckAnswer()" />
        <br />
        <asp:Label ID="labeltest" runat="server"></asp:Label>
        </div>
    </form>
</body>
</html>

    标记创建一个 DropDownList 控件、两个 Label 控件、一个 TextBox 控件和一个 Button 控件。该页面显示两个随机生成的整数，要求用户将两数相加，并提供一个用于输入答案的文本框。单击按钮时，将调用 JavaScript CheckAnswer 函数。

    使用 DropDownList 控件可以更改语言设置，而无需更改浏览器中的设置。当 DropDownList 控件的 SelectedIndex 属性发生更改时，CurrentThread 实例的 CurrentUICulture 属性将设置为您已选定的值。

    Bb398935.alert_note(zh-cn,VS.90).gif说明：

    有关如何为线程设置区域性信息的信息，请参见如何：为 ASP.NET 网页全球化设置区域性和 UI 区域性。

    ScriptManager 控件包含对 CheckAnswer.js 脚本文件的引用。这将使页面在运行时检索 CheckAnswer.js 文件。

    该引用的 ResourceUICultures 属性设置为“it-IT”，表示网站包含脚本的意大利语版本。因此，当您从 DropDownList 控件中选择“Italian”或将“Italian”设置为浏览器的默认语言时，ScriptManager 对象将检索意大利语版本。

  3. 运行该页。

    您将看到一个有关两个随机生成数的加法问题，以及一个用于输入答案的 TextBox 控件。当您键入答案并单击**“Verify Answer”（验证答案）**按钮时，将在消息窗口中看到一个响应，指示答案是否正确。

    默认情况下，此响应将用英语显示。

  4. 通过从下拉列表中选择“Italian”将语言更改为意大利语。

  5. 再次执行小测验。

    这次答案将以意大利语显示。

回顾

本演练演示如何向独立 JavaScript 文件添加本地化资源值。本地化值被创建为 JSON 格式的对象，这些对象成为各个本地化 JavaScript 文件的一部分。通过引用 JSON 对象而不是使用硬编码字符串来显示本地化值。本地化字符串的显示取决于浏览器中的语言设置或用户提供的语言设置。

请参见

任务

组件库资源本地化概述

演练：为 JavaScript 文件嵌入本地化资源