通过

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

  • 项目

更新：2007 年 11 月

本演练介绍如何将 ECMAScript (JavaScript) 文件作为嵌入式资源包括在程序集中，以及如何包括要在 JavaScript 文件中使用的本地化字符串。当您有一个必须随程序集分发的客户端脚本组件时，可在该程序集中嵌入一个 JavaScript 文件。该 JavaScript 文件可从注册程序集的 Web 应用程序中进行引用。当您必须修改该 JavaScript 文件所使用的值以适用于不同语言和区域性时，可嵌入本地化的资源。

先决条件

若要在本演练中实现这些过程，您需要：

  • Microsoft Visual Studio 2008.

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

    您不能使用 Visual Web Developer 速成版，因为您无法利用 Visual Web Developer 速成版创建本演练中所需的类库项目。

创建包含嵌入的 JavaScript 文件的程序集

首先创建一个程序集（.dll 文件），其中包含要作为资源处理的 JavaScript 文件。这可以通过在 Visual Studio 中创建一个类库项目来实现，此过程将创建一个程序集作为输出。

在程序集中嵌入客户端脚本文件和资源

  1. 在 Visual Studio 中，创建一个名为 LocalizingScriptResources 的新类库项目。

  2. 向项目中添加对 System.Web 和 System.Web.Extensions 程序集的引用。

  3. 向名为 CheckAnswer.js 的项目添加一个新的 JScript 文件。

  4. 将下列代码添加到 CheckAnswer.js 文件。

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

    上述脚本将检查用户给出的两个数字相加的结果。脚本使用 alert 函数来使用户知道答案是否正确。显示在 alert 对话框中的消息是从本地化资源中读取的，而不回发到服务器。

    在脚本中使用一个名为 Answer 的占位符来标识哪些资源文件包含本地化字符串。Answer 占位符将在此过程中稍后进行定义。

  5. 在 CheckAnswer.js 的**“属性”窗口中，将“生成操作”设置为“嵌入的资源”**。

    将脚本文件设置为嵌入式资源

  6. 向项目中添加一个名为 ClientVerification 的类。

  7. 用下面的代码替换 ClientVerification 类文件中的所有代码：

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

    该代码创建一个自定义 ASP.NET 控件。它包含两个 Label 控件、一个 TextBox 控件和一个 Button 控件。该代码显示两个随机生成的整数，并提供一个文本框以显示答案。单击该按钮时，将调用 CheckAnswer 函数。

  8. 将资源文件添加到该项目中，并将其命名为“VerificationResources.resx”。

  9. 添加一个名为 Correct 的字符串资源，其中包含值“Yes, your answer is correct.”。

  10. 添加一个名为 Incorrect 的字符串资源，其中包含值“No, your answer is incorrect.”。

  11. 添加一个名为 Verify 的字符串资源，其中包含值“Verify Answer”。

    此资源不是通过使用客户端脚本来检索的，而是用来在创建按钮时设置 Button 控件的 Text 属性。

  12. 保存并关闭 VerificationResources.resx 文件。

  13. 将名为“VerificationResources.it.resx”的资源文件添加到项目中。

    此文件将包含意大利语的资源字符串。

  14. 添加一个名为 Correct 的字符串资源，其中包含值“Si, la risposta e’ corretta.”。

  15. 添加一个名为 Incorrect 的字符串资源，其中包含值“No, la risposta e’ sbagliata.”。

  16. 添加一个名为 Verify 的字符串资源，其中包含值“Verificare la risposta”。

    与使用英语创建的“Verify”资源一样，此资源也不是通过使用客户端脚本来检索的，而是用来在创建按钮时设置 Button 控件的 Text 属性。

  17. 保存并关闭 VerificationResources.it.resx 文件。

  18. 将下行添加到 AssemblyInfo 文件中。可以为 ScriptResourceAttribute 属性中的类型名称指定任何名称，但它必须与客户端脚本中使用的类型名称匹配。在此示例中，该名称设置为 Answer。

    <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")]
    Bb398868.alert_note(zh-cn,VS.90).gif说明：

    AssemblyInfo.vb 文件位于“解决方案资源管理器”的“我的项目”节点中。如果在“我的项目”节点中未看到任何文件，请在“项目”菜单中单击“显示所有文件”。AssemblyInfo.cs 文件位于“解决方案资源管理器”的“属性”节点中。

    WebResource 定义必须包含程序集的默认命名空间和 .js 文件的名称。ScriptResource 定义不包括文件扩展名或本地化的 .resx 文件。

  19. 生成项目。

    完成编译后，将具有一个名为 LocalizingScriptResources.dll 的程序集。CheckAnswer.js 文件中的 JavaScript 代码和两个 .resx 文件中的资源将作为资源嵌入此程序集中。

    您还会有一个名为 LocalizingScriptResources.resources.dll 的程序集（一个附属程序集），其中包含用于服务器代码的意大利语资源。

引用嵌入的脚本和资源

现在可以在支持 AJAX 的 ASP.NET 网站中使用该程序集。您将能够在客户端脚本中读取 .js 文件和资源值。

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

虽然可以在同一 Visual Studio 解决方案中创建类库项目和网站，但本演练假定您没有进行这些操作。通过将项目放置在不同的解决方案中，可模拟控件开发人员和页面开发人员如何单独工作。但是，为方便期间，您可以在同一解决方案中创建这两个项目，并对本演练中的过程进行小小的调整。

引用嵌入的脚本和资源

  1. 在 Visual Studio 中，创建新的支持 AJAX 的网站。

  2. 在网站的根目录下添加一个 Bin 文件夹。

  3. 将 LocalizingScriptResources.dll 程序集从类库项目添加到 Bin 文件夹中。

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

    如果在同一 Visual Studio 解决方案中创建了类库项目和网站，则可从类库项目向网站添加一个引用。有关详细信息，请参见如何：在网站中添加对 Visual Studio 项目的引用。

  4. 在 Bin 文件夹中创建一个文件夹，然后将其名称指定为 it（表示意大利语）。

  5. 将 LocalizingScriptResources.resources.dll 附属程序集从 LocalizingScriptResources 项目中的 it 文件添加到网站中的 it 文件夹中。

  6. 在项目中添加一个新的 ASP.NET 网页。

  7. 将该页中的代码替换为以下代码：

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

    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" 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 Assembly="LocalizingScriptResources" Name="LocalizingScriptResources.CheckAnswer.js" />
        </Scripts>
        </asp:ScriptManager>
        <div>
        <Samples:ClientVerification ID="ClientVerification1" runat="server" ></Samples:ClientVerification>
        </div>
    </form>
</body>
</html>

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

    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 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 Assembly="LocalizingScriptResources" Name="LocalizingScriptResources.CheckAnswer.js" />
        </Scripts>
        </asp:ScriptManager>
        <div>
        <Samples:ClientVerification runat="server" ></Samples:ClientVerification>
        </div>
    </form>
</body>
</html>

    在 LocalizingScriptResources 项目中创建的控件将包含在该页中。此控件将显示两个供用户相加的数字，并显示一个 TextBox 控件以便用户输入答案。它还显示一个按钮，当单击该按钮时将调用 CheckAnswer 函数中的脚本。CheckAnswer 函数在浏览器中运行，并显示一个本地化的消息，说明答案是否正确。

    必须将 ScriptManager 对象的 EnableScriptLocalization 属性设置为 true，以使 ScriptManager 控件可以检索本地化的资源。还必须将区域性和 UI 区域性设置为“auto”以显示基于浏览器设置的字符串。

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

  8. 运行该项目。

    您将看到一个有关两个随机生成数的加法问题，还会显示一个 TextBox 控件以供输入答案。当您输入答案并单击**“Verify Answer”（验证答案）**按钮时，您将在消息窗口中看到一个响应，指示答案是否正确。默认情况下，此响应将用英语返回。

    但是，如果在浏览器中将意大利语设置为首选语言，则答案将使用意大利语。可以通过在 DropDownList 控件中选择语言或在浏览器中更改首选语言，更改响应使用的语言。

回顾

本演练介绍了将 JavaScript 文件作为资源嵌入程序集以及添加本地化字符串的概念。可在包含该程序集的 Web 应用程序中引用和访问嵌入的脚本文件。将根据浏览器中的语言设置或用户提供的语言显示本地化字符串。

请参见

任务

组件库资源本地化概述

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