Поделиться через

Пошаговое руководство. Добавление локализованных ресурсов в файл JavaScript

  • Статья

Обновлен: Ноябрь 2007

Это пошаговое руководство показывает способ включения локализованных ресурсов в файл ECMAScript (JavaScript). Ресурсами в этом руководстве являются строки. Локализованные ресурсы включаются в файл JavaScript, если создан отдельный файл JavaScript, а приложение должно предоставлять различные значения для различных языков и региональных параметров.

Отдельный JavaScript не включен в сборку в качестве ресурса и поэтому не может обращаться к значениям в файле ресурсов. Соответственно, значения локализованных строк включаются напрямую в файл сценария. Локализованные значения извлекаются при запуске сценария в веб-обозревателе.

Для каждого поддерживаемого языка и региональных параметров создается отдельный файл сценария. В каждый файл сценария включается объект в формате JSON, содержащий значения локализованных ресурсов для данного языка и региональных параметров.

Обязательные компоненты

Для реализации процедуры, описанной в данном руководстве, необходимо следующее:

  • Microsoft Visual Studio 2005 или Microsoft Visual Web Developer, экспресс-выпуск.

  • Веб-узел ASP.NET с поддержкой AJAX.

Создание файла JavaScript, содержащего значения локализованных ресурсов

Чтобы добавить значения ресурсов в файл JavaScript

  1. В корневом каталоге веб-узла создайте папку Scripts.

  2. В папку Scripts добавьте файл JScript с именем CheckAnswer.js, а затем добавьте следующий код в файл.

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

    Код сценария добавляет обработчик для события load из класса Sys.Application. Обработчик задает текст кнопки. Вместо задания текста в строковое значение, он задает тексту значение, определенное в классе Answer.Verify. Это позволяет коду использовать локализованное значение.

    Сценарий также содержит функцию, которая проверяет результат действия пользователя по сложению двух чисел. Для оповещения пользователя о правильности ответа используется функция alert сценария. Как и в случае с текстом кнопки, сообщение, отображаемое в диалоговом окне alert, установлено равным локализованному строковому значению без обратной передачи на сервер.

    Для определения коллекции локализованных значений, используемых в файле, применяется тип Answer. Тип Answer определяется в формате JSON в конце файла CheckAnswer.js.

  3. В папку Scripts добавьте файл JScript с именем CheckAnswer.it-IT.js. Добавьте в этот файл следующий код.

    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 должно включать название соответствующего языка и языкового стандарта.

Использование значений ресурсов JavaScript на странице ASP.NET

Теперь можно создать веб-страницу ASP.NET, использующую созданный код сценария. Страница позволяет проверить результат изменения языка.

Чтобы использовать значения ресурсов JavaScript на веб-странице ASP.NET

  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 позволяет изменить параметры языка без изменения параметров веб-обозревателя. При изменении свойства SelectedIndex элемента управления DropDownList свойству CurrentUICulture экземпляра CurrentThread присваивается выбранное значение.

    Bb398935.alert_note(ru-ru,VS.90).gifПримечание.

    Дополнительные сведения о настройке региональных параметров для потока см. в разделе Практическое руководство. Установка значений Culture и UICulture для глобализации веб-страниц ASP.NET.

    Элемент управления ScriptManager включает в себя ссылку на файл сценария CheckAnswer.js. Это позволяет странице извлечь файл CheckAnswer.js при выполнении страницы.

    Свойство ссылки ResourceUICultures имеет значение "it-IT", что указывает на то, что веб-узел содержит итальянскую версию сценария. Таким образом, объект ScriptManager извлекает итальянскую версию, когда пользователь выбирает пункт "Итальянский" из элемента управления DropDownList или при установке итальянского в качестве языка обозревателя по умолчанию.

  3. Запустите страницу.

    Отобразится задача на сложение двух случайно созданных чисел и элемент управления TextBox для ввода ответа. При вводе ответа и нажатии кнопки Verify Answer в окне сообщений отображается сообщение, указывающее на правильность ответа.

    По умолчанию сообщение отображается на английском.

  4. Измените язык на итальянский, выбрав пункт раскрывающегося списка "Итальянский".

  5. Снова произведите вычисление.

    На этот раз ответ будет отображен на итальянском

Итог

В этом пошаговом руководстве был описан способ добавления локализованных переменных ресурсов к отдельному файлу JavaScript. Локализованные значения создаются как объекты в формате JSON, являющиеся частью отдельных локализованных файлов JavaScript. Локализованные значения отображаются путем ссылки на объект JSON, а не с помощью строго закодированных строк. Локализованные строки отображаются в зависимости от настроек языка веб-обозревателя или параметры языка, предоставленной пользователем.

См. также

Задачи

Общие сведения о локализации ресурсов для библиотек компонентов

Пошаговое руководство. Внедрение локализованных ресурсов в файл JavaScript