Documentation for: ASP.NET Ajax Version 1.0

This documentation is for a previous version. For the current released version, see the ASP.NET Ajax documentation on MSDN.

 

 

 

 

 

 

 

Skip Navigation Links.
Tutorials
Sample ASP.NET AJAX Application
ASP.NET AJAX and JavaScript
Extending JavaScript with ASP.NET AJAX
Creating Custom Client Script in ASP.NET AJAX
Dynamically Assigning ASP.NET AJAX Script References
Globalizing a Date by Using Client Script
Embedding a JavaScript File as a Resource in an Assembly
Embedding Localized Resources for a JavaScript File
Adding Localized Resources to a JavaScript File
Creating Custom Client Events
The UpdatePanel Control
Introduction to the UpdatePanel Control
Creating a Simple ASP.NET Page with Multiple UpdatePanel Controls
Using the UpdatePanel Control with Data-Bound Controls
Using the UpdatePanel Control with Master Pages
Using the UpdatePanel Control with User Controls
Using the UpdatePanel Control with a Web Service
Customizing Error Handling for UpdatePanel Controls
Animating UpdatePanel Controls
Canceling an Asynchronous Postback
Giving Precedence to a Specific Asynchronous Postback
Working with PageRequestManager Events
The UpdateProgress Control
Introduction to the UpdateProgress Control
Programming UpdateProgress Controls in Client Script
The Timer Control
Introduction to the Timer Control
Using the Timer Control with Multiple UpdatePanel Controls
ASP.NET Application Services
Using Forms Authentication
Using Profile Information
Web Services
Exposing Web Services to Client Script
Calling Web Services from Client Script
ASP.NET AJAX Extensibility
Creating Custom ASP.NET AJAX Non-Visual Client Components
Creating Custom ASP.NET AJAX Client Controls
Creating an Extender Control
Adding Client Capabilities to a Web Server Control
Creating a Client Component Class Using the Prototype Model
Defining Custom Component Properties and Raising PropertyChanged Events
Releasing Component Resources

Adding Localized Resources to a JavaScript File

Introduction

This tutorial shows you how to include localized resources (in this tutorial, strings) in an ECMAScript (JavaScript) file. You include localized resources in a JavaScript file when you have created a standalone JavaScript file and when your application must modify values in the JavaScript file 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, and 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 the language and culture.

To implement the procedures in this tutorial you need:

  • Microsoft Visual Studio 2005 or Microsoft Visual Web Developer Express Edition.

  • The latest release of Microsoft ASP.NET AJAX installed and configured. For more information, see Installing ASP.NET AJAX.

  • An ASP.NET AJAX Web site.

Creating a JavaScript File That Contains Localized Resource Values

To add resource values to a JavaScript file

  1. Add a folder named Scripts to the root directory of the Web site.

  2. In the Scripts folder, add a JScript file that is named CheckAnswer.js and add the following code to the file.

    scripts

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

    scripts

    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. However, instead of setting the text to a string, it sets the text to a value defined in a class (Answer.Verify). This will enable the code to easily 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 read from a localized resource 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 at the end of the CheckAnswer.js file in JSON format.

  3. In the Scripts folder, add a JScript file that is named CheckAnswer.it-IT.js. Add the following code to the file.

    scripts

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

    scripts

    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.

    If you wanted to provide localized text in additional languages, you would create more JavaScript files. The JavaScript code is always the same, but the values defined in the Answer type would be in different languages. The name of each JavaScript file would include the appropriate language and locale.

  4. Create an ASP.NET AJAX Web page.

  5. Replace any content in the Web page with the following code and markup:

    cs

    <%@ 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>
    
    

    vb

    <%@ 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>
    
    

    The markup creates a DropDownList control, two Label controls, a TextBox control, and a Button control. The page displays two randomly generated integers and 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.

    note

    For information about how to set culture information for a thread, see How to: Set the Culture and UI Culture for ASP.NET Web Page Globalization.

    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.

  6. Run the page.

    You will see an addition problem with two randomly generated numbers and a TextBox control for entering an answer. When you enter 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 will be returned in English.

  7. Change the language to Italian by selecting "Italian" from the drop-down list.

  8. Perform the quiz again.

    This time, the answer is in Italian

Using JavaScript Resource Values in an ASP.NET Page

You can now create an ASP.NET Web page that uses the scripts 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 page

  1. Create an ASP.NET AJAX Web page.

  2. Replace any content in the Web page with the following markup and code:

    cs

    <%@ 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>
    
    

    vb

    <%@ 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>
    
    

    The markup creates a DropDownList control, two Label controls, a TextBox control, and a Button control. The page displays two randomly generated integers and 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.

    note

    For information about how to set culture information for a thread, see How to: Set the Culture and UI Culture for ASP.NET Web Page Globalization.

    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.

  3. Run the page.

    You will see an addition problem with two randomly generated numbers and a TextBox control for entering an answer. When you enter 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.

  4. Change the language to Italian by selecting "Italian" from the drop-down list.

  5. Perform the quiz again.

    This time, the answer is in Italian

Review

This tutorial introduced the concept of adding localized resource values to a standalone JavaScript file. The localized values are created as objects in JSON format that are part of each localized JavaScript file. Localized values are displayed by referencing the JSON object instead of by using hard-coded strings. The localized strings will be displayed based on the language setting in the browser or on the language setting provided by the user.