How to Localize ASP.NET Controls Based on Browser’s Language and Culture Settings

Introduction

The objective of this article is to localize ASP.NET controls to display data according to the browser's language setting. The browser's language setting is determined by its current Culture. Localization of ASP.NET controls will enable us to display controls in multiple languages. Here, we will localize two Label controls and one Image control in two languages, English and Hindi. If the current culture is "en-US", then the USA flag is displayed with country and capital name. And if the current culture is "hi-IN", then the Indian flag is displayed with country and capital name.

Culture

The culture of a system or browser is used to determine its language and region. A culture consists of two parts. The first part represents the language code and the second part represents the region code. For example, the culture "hi-IN" represents the Hindi language of the India region. This is a standard format of culture given by IETF (Internet Engineering Task Force).

Step 1 : Create an ASP.NET web application. In the Default.aspx HTML source, add UICulture="auto" in the Page directive as below:

<%@ Page Language="C#" UICulture="auto" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="LocalizedWebsite._Default" %>

This is done to automatically detect UICulture of the page.

For localization, ASP.NET has provided two properties, Culture and UICulture. Culture is used to localize date, numbers, currency etc. And UICulture is used to specify resource file of current culture. Both these properties accept standardized Culture value specified by the IETF.

Step 2 : In the Default.aspx HTML source, add the following code inside the form tag to design the user interface. In the UI we have three Label controls. lblCultureValue displays current culture name, lblCountry displays country and lblCapital displays its capital. An Image control imgFlag displays a flag.

<table border="1px" cellspacing="0">

    <tr>

        <td class="style2">

            Culture

        </td>

        <td>

            <asp:Label ID="lblCulture" runat="server"></asp:Label>

        </td>

    </tr>

    <tr>

        <td class="style2">

           Country

        </td>

        <td>

            <asp:Label ID="lblCountry" runat="server" meta:resourceKey="lblCountryName">

    </asp:Label>

        </td>

    </tr>

    <tr>

        <td class="style2">

            Capital

        </td>

        <td>

            <asp:Label ID="lblCapital" runat="server"  meta:resourceKey="lblCapitalName">

            </asp:Label>

        </td>

    </tr>

    <tr>               

        <td colspan="2">

            <asp:Image ID="imgFlag" runat="server" Width="250" Height="165"     meta:resourceKey="imgFlag" />

        </td>

    </tr>

</table>

Note

The "meta:resourceKey" tag in the controls are used to access values from the resource file.

Step 3 : Import the System.Globalization namespace with a "using" keyword at the top and write the following code in Default.aspx code behind page to display current culture name in the lblCulture Label.

protected void Page_Load(object sender, EventArgs e)
{
lblCulture.Text = CultureInfo.CurrentUICulture.ToString();
}

Step 4 : For each language we have to create a resource file. Each resource file contains text translated in that language. We are localizing controls in two languages. So, we need to add two resource files, one each for Hindi and English.

Resource files are created inside a special ASP.NET folder, "App_LocalResources". Create this folder by right-clicking on the project in the solution explorer and selecting:

Add -> Add ASP.NET Folder -> App_LocalResources

Now, add a resource file named Default.aspx.en-US.resx for the English language in the App_LocalResources folder by right-clicking on the folder and selecting:

Add -> New Item -> Resource File

We have created a resource file for the English language. Now we need to add data to the resource file so that we can display data in English if the current Culture is "en-US". Add data for each control like this:

Here, we have added three values in the resource file for our controls which are self-explanatory. Add another resource file for the Hindi language and name it, Default.aspx.hi-IN.resx and add following values:

Now, we have added a resource file for each language. But if the browser has a language other than English or Hindi, it will give an error. For this we need to add a default resource file named Default.aspx.resx. In this default resource file add the same data as in Default.aspx.en-US.resx. If any other language is found then the data from this resource file will be displayed.

Note

The naming convention of the resource file is PageName.CultureName.resx.

Step 5 : Run the application. You will get the following output, assuming that the default language of your browser is "en-US":

Step 6 : Now change language of your browser to Hindi (hi-IN). In Internet Explorer, go to:

Tools -> Internet Options -> General tab -> Languages -> Add

Now select Hindi (India) [hi-IN] from the drop down and click OK. Move Hindi to the top using Move up button. Now run the application again. As we have set the default language culture of the browser to Hindi, we will get data in the Hindi language like the following:

I have added an extra resource file named Default.aspx.hi.resx because if you select the language as Hindi, Mozilla returns "hi" instead of "hi-IN".

If the culture contains only a language code but not the region code, then it is called a neutral culture. If both the language and region code are present, then it is called a specific culture. For example, if the culture is "en", it is neutral but if the culture is "en-US" or "en-GB", it is specific for US or UK.

Summary

In this article we learned to display controls of a website in different languages based on user's browser language setting.