In this article we will learn how to display localized data in ASP.NET controls based on language and culture settings of the browser.
Objective of this article is to localize ASP.NET controls to display data according to browser’s language setting. Browser’s language setting is determined by its current Culture. Localization of ASP.NET controls will enable us to display controls in multiple language.
Here, we will localize two Label controls and one Image control in two languages, English and Hindi. If current culture is “en-US”, then USA flag is displayed with country and capital name. And if current culture is “hi-IN”, then Indian flag is displayed with country and capital name.
Culture of a system or browser is used to determine its language and region. A culture consists of two parts. First part represents the language code and the second part represents the region code. For example, the culture “hi-IN” represents Hindi language of India region. This is a standard format of culture given by IETF (Internet Engineering Task Force).
Create an ASP.NET web application. In 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.
In the Default.aspx HTML source, add following code inside the form tag to design 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">
<asp:Label ID="lblCulture" runat="server"></asp:Label>
<asp:Label ID="lblCountry" runat="server" meta:resourceKey="lblCountryName">
<asp:Label ID="lblCapital" runat="server" meta:resourceKey="lblCapitalName">
<asp:Image ID="imgFlag" runat="server" Width="250" Height="165" meta:resourceKey="imgFlag" />
“meta:resourceKey” tag in the controls are used to access values from the resource file
Import System.Globalization namespace with “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();
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 English language in the App_LocalResources folder by right clicking on the folder and selecting:
Add -> New Item -> Resource File
We have created resource file for English language. Now we need to add data in the resource file so that we can display data in English if 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 Hindi language and name it, Default.aspx.hi-IN.resx and add following values:
Now, we have added resource file for both language. But if the browser has a language other than English or Hindi, it will give error. For this we need to add a default resource file named Default.aspx.resx. In this default resource file add same data as in Default.aspx.en-US.resx. If any other language is found, data from this resource file will be displayed.
Naming convention of resource file is PageName.CultureName.resx
Run the application. You will get following output assuming default language of your browser is “en-US”:
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 top using Move up button.
Now run the application again. As we have set default language culture of the browser to Hindi, we will get data in Hindi language like following:
I have added an extra resource file named Default.aspx.hi.resx because if you select language as Hindi, Mozilla returns “hi” instead of “hi-IN”.
If culture contains only language code not the region code, then it is called a neutral culture. If language and region code, both are present, then it is called 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.
In this article we learned to display controls of a website in different languages based on user’s browser language setting.