Walkthrough: Adding Localized Resources to a JavaScript File This walkthrough shows you how to include localized resources in an ECMAScript (JavaScript) file. In this walkthrough the resources are strings. You include localized resources in a JavaScript file when you have created a standalone JavaScript file and when your application must provide different values for different languages and cultures. A standalone JavaScript is not embedded as a resource in an assembly and therefore cannot access values in a resources file. Instead, you include the localized string values directly in the script file. The localized values are retrieved when the script runs in the browser. You create a separate script file for each supported language and culture. In each script file, you include an object in JSON format that contains the localized resources values for that language and culture.
Prerequisites
To implement the procedures in this tutorial you need:
Creating a JavaScript File That Contains Localized Resource Values
To add resource values to a JavaScript fileIn the root directory of the Web site, add a folder named Scripts. In the Scripts folder, add a JScript file named CheckAnswer.js, and then add the following code to the file.
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."
};
The script code adds a handler for the load event of the Sys.Application class. The handler sets the button text. Instead of setting the text to a string, it sets the text to a value that is defined in a class named Answer.Verify. This enables the code to use a localized value. The script also contains a function that checks the user's result for adding two numbers. It uses the alert function to let the user know whether the answer is correct. As with the button text, the message displayed in the alert dialog box is set to a localized string value without a postback to the server. A type named Answer is used in the script to define the collection of localized values to use in the file. The Answer type is defined in JSON format at the end of the CheckAnswer.js file. In the Scripts folder, add a JScript file named CheckAnswer.it-IT.js. Add the following code to the file.
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."
};
This file is identical to the CheckAnswer.js file except that it contains an Answer type with values in Italian. To provide localized text in additional languages, you can create more JavaScript files. The JavaScript code is always the same, but the values that are defined in the Answer type are in different languages. The name of each JavaScript file must include the appropriate language and locale.
Using JavaScript Resource Values in an ASP.NET Page
You can now create an ASP.NET Web page that uses the script code that you have created. The page enables you to test the effect of changing a language. To use JavaScript resource values in an ASP.NET Web pageCreate an ASP.NET Web page. Replace the content of the Web page with the following markup and code:
<%@ 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 >
<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 >
<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>
The markup creates a DropDownList control, two Label controls, a TextBox control, and a Button control. The page displays two randomly generated integers and asks the user to add them, and it provides a text box for an answer. When the button is clicked, the JavaScript CheckAnswer function is called. The DropDownList control enables you to change the language settings without changing the settings in the browser. When the SelectedIndex property of the DropDownList control changes, the CurrentUICulture property of the CurrentThread instance is set to the value that you have selected. The ScriptManager control includes a reference to the CheckAnswer.js script file. This causes the page to retrieve the CheckAnswer.js file when the page runs. The ResourceUICultures property of the reference is set to "it-IT" to indicate that the Web site contains an Italian version of the script. As a result, the ScriptManager object retrieves the Italian version when you select "Italian" from the DropDownList control or when you set "Italian" as the default language in the browser. Run the page. You see an addition problem with two randomly generated numbers and a TextBox control for entering an answer. When you type an answer and click the Verify Answer button, you see the response in a message window that tells you whether the answer is correct. By default, the response is displayed in English. Change the language to Italian by selecting "Italian" from the drop-down list. Perform the quiz again. This time, the answer is in Italian
Review
This walkthrough showed how to add localized resource values to a standalone JavaScript file. The localized values are created as objects in JSON format that are part of individual localized JavaScript files. Localized values are displayed by referencing the JSON object instead of by using hard-coded strings. The localized strings are displayed based on the language setting in the browser or on the language setting that is provided by the user.
See Also
|
Tutorial: Agregar recursos localizados a un archivo JavaScript 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á:
Crear un archivo JavaScript con valores de recurso traducidos
Para agregar valores de recurso a un archivo JavaScriptEn 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.NETCree 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 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 >
<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 >
<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>
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. 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.
Revisión
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
|