为JavaScript 文件嵌入本地化资源

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

创建包含嵌入的 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;
    }

}

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

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

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

    将脚本文件设置为嵌入式资源
  • 向项目中添加一个名为 ClientVerification 的类。

  • 用下面的代码替换 ClientVerification 类文件中的所有代码:

  • 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(020);
                _secondInt 
    = random.Next(020);

                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 函数。

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 将下行添加到 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")]

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

  • 生成项目。

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

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

  • 引用嵌入的脚本和资源

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

    说明:

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

    引用嵌入的脚本和资源

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

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

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

      说明:

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

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

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

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

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

     

    <%@ 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 >
    <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 属性将设置为您已选定的值。

  • 运行该项目。

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

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

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


    posted on 2008-05-21 16:27  执法长老  阅读(635)  评论(0编辑  收藏  举报

    导航