Tutorial: Agregar recursos localizados a un archivo JavaScript

Artículo
10/22/2014

Actualización: noviembre 2007

En este tutorial se muestra cómo incluir recursos localizados en un archivo ECMAScript (JavaScript). En este tutorial los recursos son cadenas. Si ha creado un archivo JavaScript independiente y la aplicación debe proporcionar diferentes valores para idiomas y referencias culturales distintos, incluye los recursos localizados en un archivo JavaScript.

Un archivo JavaScript independiente no se incrusta como recurso en un ensamblado y por tanto no puede tener acceso a los valores de un archivo de recursos. En su lugar, debe incluir los valores de cadena traducidos directamente en el archivo de script. Los valores traducidos se recuperan cuando el script se ejecuta en el explorador.

Debe crear un archivo de script independiente para cada idioma y referencia cultural compatibles. En cada archivo de script, debe incluir un objeto con formato JSON que contenga los valores de recursos traducidos para dicho idioma y referencia cultural.

Requisitos previos

Para implementar los procedimientos de este tutorial necesitará:

Microsoft Visual Studio 2005 o Microsoft Visual Web Developer Express.
Un sitio web ASP.NET habilitado para AJAX.

Crear un archivo JavaScript con valores de recurso traducidos

Para agregar valores de recurso a un archivo JavaScript

En el directorio raíz del sitio web, agregue una carpeta denominada Scripts.

En la carpeta Scripts, agregue un archivo JScript denominado CheckAnswer.js y, a continuación, agregue el código siguiente al archivo.

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

El código de script agrega un controlador para el evento load de la clase Sys.Application. El controlador establece el texto del botón. En lugar de establecer el texto en una cadena, establece el texto en un valor que se define en una clase denominada Answer.Verify. Esto permite al código utilizar un valor localizado.

El script también contiene una función que comprueba el resultado del usuario tras sumar dos números. Usa la función alert para permitir al usuario conocer si la respuesta es correcta. Como en el texto del botón, el mensaje mostrado en el cuadro de diálogo alert se establece en un valor de cadena localizado sin una devolución de datos al servidor.

En el script se usa un tipo denominado Answer para definir la colección de valores localizados que se usará en el archivo. El tipo Answer se define con formato JSON al final del archivo CheckAnswer.js.

En la carpeta Scripts, agregue un archivo JScript denominado CheckAnswer.it-IT.js. Agregue el código siguiente al archivo.

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

Este archivo es idéntico al archivo CheckAnswer.js sólo que contiene un tipo Answer con valores en italiano.

Para proporcionar el texto traducido en otros idiomas, puede crear más archivos JavaScript. El código JavaScript siempre es el mismo, pero los valores que se definen en el tipo Answer se proporcionan en diferentes idiomas. El nombre de cada archivo JavaScript debe incluir el idioma y la configuración regional adecuados.

Usar valores de recurso de JavaScript en una página ASP.NET

Ahora puede crear una página web ASP.NET que utilice el código de script que ha creado. La página permite probar el efecto de cambiar un idioma.

Para utilizar valores de recurso de JavaScript en una página web ASP.NET

Cree una nueva página web ASP.NET.

Reemplace el contenido de la página web con el marcado y código siguientes:

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

<script >


    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" >
    <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 Path="scripts/CheckAnswer.js" ResourceUICultures="it-IT" />
        </Scripts>
        </asp:ScriptManager>
        <div>
        <asp:Label ID="firstNumber" ></asp:Label>
        +
        <asp:Label ID="secondNumber" ></asp:Label>
        =
        <asp:TextBox ID="userAnswer" ></asp:TextBox>
        <asp:Button ID="Button1"  OnClientClick="return CheckAnswer()" />
        <br />
        <asp:Label ID="labeltest" ></asp:Label>
        </div>
    </form>
</body>
</html>

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


    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" >
    <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 Path="scripts/CheckAnswer.js" ResourceUICultures="it-IT" />
        </Scripts>
        </asp:ScriptManager>
        <div>
        <asp:Label ID="firstNumber" ></asp:Label>
        +
        <asp:Label ID="secondNumber" ></asp:Label>
        =
        <asp:TextBox ID="userAnswer" ></asp:TextBox>
        <asp:Button ID="Button1"  OnClientClick="return CheckAnswer()" />
        <br />
        <asp:Label ID="labeltest" ></asp:Label>
        </div>
    </form>
</body>
</html>

El marcado crea un control DropDownList, dos controles Label, un control TextBox y un control Button. La página muestra dos enteros generados de forma aleatoria, pide al usuario que los sume y proporciona un cuadro de texto para indicar la respuesta. Cuando se hace clic en el botón, se llama a la función CheckAnswer de JavaScript.

El control DropDownList permite cambiar la configuración de idioma sin cambiar los valores en el explorador. Cuando la propiedad SelectedIndex del control DropDownList cambia, la propiedad CurrentUICulture de la instancia CurrentThread se establece en el valor que ha seleccionado.

Nota:
Para obtener información sobre la forma de establecer la información de referencia cultural en un subproceso, vea Cómo: Establecer la referencia cultural y la referencia cultural de la interfaz de usuario para la globalización de páginas Web ASP.NET.

El control ScriptManager incluye una referencia al archivo de script CheckAnswer.js. Esto hace que la página recupere el archivo CheckAnswer.js cuando se ejecuta la página.

La propiedad ResourceUICultures de la referencia está establecida en "it-IT" para indicar que el sitio web contiene una versión italiana del script. Como resultado, el objeto ScriptManager recupera la versión italiana al seleccionar "Italian" en el control DropDownList o al establecer el italiano como idioma predeterminado en el explorador.

Ejecute la página.

Aparece un problema de suma con dos números generados de forma aleatoria y un control TextBox para escribir una respuesta. Al escribir una respuesta y hacer clic el botón Verify Answer, ve la respuesta en una ventana de mensajes que indica si la respuesta es correcta.

De forma predeterminada, la respuesta se muestra en inglés.
Cambie el idioma a italiano seleccionando "Italian" en la lista desplegable.
Realice de nuevo la suma.

Esta vez, la respuesta está en italiano.

Repaso

Este tutorial ha mostrado cómo agregar valores de recurso traducidos a un archivo JavaScript independiente. Los valores traducidos se crean como objetos en formato JSON que forman parte de los archivos JavaScript individuales traducidos. Los valores traducidos se muestran mediante una referencia al objeto JSON en lugar de usar cadenas codificadas de forma rígida. Las cadenas traducidas se muestran en función de la configuración de idioma en el explorador o del idioma proporcionado por el usuario.

Vea también

Tareas

Información general sobre la localización de recursos para bibliotecas de componentes

Tutorial: Incrustar recursos localizados en un archivo JavaScript