13.7. Script Localization with Static Files

When working with the localization of your ASP.NET AJAX applications, another important aspect of localization is in how the scripts themselves are localized. For instance, if alerts and other items in your scripts require localization, you can perform localization to make a script for each language or culture that you are working with to get your ASP.NET page to work with the correct script based upon the end user's culture setting.

To show an example of this in action, Listing 13-15 provides a simple ASP.NET application that makes use of server-side JavaScript files.

Example 13-15. Localizing client-side JavaScript files
<%@ Page Language="C#" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Script Localization</title>

    <script type="text/javascript">

        function pageLoad() {
            populateItems();
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server"
         EnableScriptLocalization="true">
            <Scripts>
                <asp:ScriptReference Path="~/Scripts/ScriptLocalization.js"
                 ResourceUICultures="fi-FI" />
            </Scripts>
        </asp:ScriptManager>
        <span id="Label1"></span><br />
        <span id="Label2"></span>
    </div>
    </form>
</body>
</html>

This page is quite simple in that only two <span> elements are populated by a script (shown shortly) that contains the function populateItems(). Since you are going to want your application to be localized based on the end user's culture setting in their browser, you are going to need to extend upon the ScriptManager control.

The first step is to set the EnableScriptLocalization attribute to true within the ScriptManager control. The ScriptManager section can take a <Scripts> section and within this, you are able to reference script files directly using the <ScriptReference> control.

The reference is to the default script that you are going to use. In this case, it is the ScriptLocalization.js file. Through the ResourceUICultures attribute, you can specify the cultures you are going to work with directly.

This example has only two resource files. Create a new folder called Scripts within your project and add two script files — ScriptLocalization.js and ScriptLocalization.fi-FI.js. Your solution will look as presented here in Figure 13-15.

Figure 13-15. Figure 13-15

First, take a look at what is contained in the ScriptLocalization.js file. This is presented here in Listing 13-16.

Example 13-16. ScriptLocalization.js
function populateItems() {
    $get('Label1').innerText = PageItems.Greeting;
    $get('Label2').innerText = PageItems.Question;
}

PageItems = {
    'Greeting': 'Hello World',
    'Question': 'How are you today?'
}

This script simply populates the Label1 and Label2 controls found on the ASP.NET page. Now to create the Finnish version of the script, you have to include everything that is included in this English version of the script, and change the string items to the correct Finnish equivalents (obviously). The Finnish version of the script file is presented here in Listing 13-17.

Example 13-17. ScriptLocalization.fi-FI.js
function populateItems() {
    $get('Label1').innerText = PageItems.Greeting;
    $get('Label2').innerText = PageItems.Question;
}

PageItems = {
    'Greeting': 'Hei Maailma',
    'Question': 'Mitä sinulle kuuluu?'
}

Not only is much the same here, but it is important to notice the name of the file. The name of the file uses a specific culture value of fi-FI. It would have also been possible to use a neutral culture value in the name instead if you wished. If you chose this route, the name of the file would have been ScriptLocalization.fi.js.

Now let's go back to the ScriptManager control:

<asp:ScriptManager ID="ScriptManager1" runat="server"
 EnableScriptLocalization="true">
   <Scripts>
      <asp:ScriptReference Path="~/Scripts/ScriptLocalization.js"
       ResourceUICultures="fi-FI" />
   </Scripts>
</asp:ScriptManager>

One of the important settings here is the ResourceUICultures setting. This points the cultures of the files that you are going to work with. It expects to find the files for the other cultures in the exact same spot that you have the default file located in. In this case, the value of the ResourceUICultures setting is fi-FI. If you are working with multiple cultures, separate them with a comma.

<asp:ScriptManager ID="ScriptManager1" runat="server"
 EnableScriptLocalization="true">
   <Scripts>
      <asp:ScriptReference Path="~/Scripts/ScriptLocalization.js"
       ResourceUICultures="fi-FI, ru-RU" />
   </Scripts>
</asp:ScriptManager>

Running this page with your browser culture set at en-US and then again at fi-FI will produce the following results presented in Figure 13-16. Remember that for this all to work, you have to have the Culture and UICulture set to auto in either the @Page directive or within the <globalization> element of the web.config file.

Looking at the page source, you will notice that the correct <script> tag is added to the file based upon the culture setting used. If the user used something other than en-US or fi-FI, then the default ScriptLocalization.js file would be used.

Figure 13-16. Figure 13-16

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset