ASP.Net Multilingual Web Application

Mohammed Imtiyaz Dec 9, 2014
Note : The downloaded folder contains two examples
  • ASP.Net Web Application using Master Page
  • ASP.Net Web Application without using Master Page

Demo

ASP.Net Multilingual Web Application

By the name itself, one can understand the term Multilingual Web Application. These web applications have the capability of changing the user interface based on the language selection from the user interface.

In this tutorial, we are using two languages (English and Arabic). We can use as many languages as we want simply by adding a resource file for each language in the application. Sometimes we may need to change the direction of the interface as well, i.e., left to right (ltr) and right to left (rtl). Keeping in mind these facts, we need to code in such a way that the direction of the interface should be changed based on the language selection.

Follow the steps below:

Step 1

Add a new web form, Default.aspx

<html>
<head>
    <title>ASP.Net Multilingual Web Application</title>
</head>
<body>
    <form id="frmExample" runat="server">
        <div id="divContent" runat="server">
            <asp:Label ID="lblHeding" runat="server" Text="ASP.Net - Multilingual Web Application" Font-Size="XX-Large"></asp:Label>

            <asp:Label ID="lblSelectLanguage" runat="server" Text="Select Language"></asp:Label>
            <asp:DropDownList ID="drpLanguage" runat="server" Width="180px" AutoPostBack="True" OnSelectedIndexChanged="drpLanguage_SelectedIndexChanged">

                <asp:ListItem Value="0">-- Select Language --</asp:ListItem>
                <asp:ListItem Value="en-US">English</asp:ListItem>
                <asp:ListItem Value="ar-SA">العربية</asp:ListItem>
            </asp:DropDownList>
            <asp:Label ID="lblMessage" runat="server" Font-Size="X-Large" Text="You are viewing english interface." ForeColor="#009933"></asp:Label>
        </div>
    </form>
</body>
</html>

Step 2

Add a new class file “BasePage.cs” in App_code folder of your application.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

using System.Threading;
using System.Globalization;

/// <summary>
/// Summary description for BasePage
/// </summary>

public class BasePage: System.Web.UI.Page {
    protected override void InitializeCulture() {
        HttpCookie cultureCookie = Request.Cookies["Culture"];

        //Because of reload (Response.Redirect) Request.Form will not have any values,
        //Check if there is a cookie first

        string cultureCode = (cultureCookie != null) ? cultureCookie.Value : null;
        if (!string.IsNullOrEmpty(cultureCode)) {
            Thread.CurrentThread.CurrentCulture =
                CultureInfo.CreateSpecificCulture(cultureCode);

            Thread.CurrentThread.CurrentUICulture = new CultureInfo(cultureCode);
        }
        base.InitializeCulture();
    }
}

Step 3

Note: The respective cultural language won’t take any effect unless you change the script as follows.

When you create a new child web page, the default script will be as follows:

Change 
public partial class Default : System.Web.UI.Page

to 
public partial class Default : Base.Page
Note: If you are using Master Page, then make changes in the above code only for child page. Don't change it in Master Page
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default: BasePage {
    //Declare cookie variable
    HttpCookie cultureCookie;

    protected void Page_Load(object sender, EventArgs e) {
        try {
            if (Request.Cookies["Culture"] != null) {
                cultureCookie = Request.Cookies["Culture"];
                Session["Culture"] = Request.Cookies["Culture"].Value;
            } else {
                //Set the default value to english.
                Response.Cookies.Add(new HttpCookie("Culture", "en-US"));
                Response.Redirect(Request.Url.AbsolutePath, false);
            }
            string cultureCode = (cultureCookie != null) ? cultureCookie.Value : null;
            if (!string.IsNullOrEmpty(cultureCode)) {
                if (cultureCookie.Value == "ar-SA")
                    divContent.Attributes.Add("dir", "rtl");
                else
                    divContent.Attributes.Add("dir", "ltr");
            }
        } catch {}
    }

    protected void drpLanguage_SelectedIndexChanged(object sender, EventArgs e) {
        try {
            //Save Current Culture in Cookie- will be used in InitializeCulture in BasePage
            Response.Cookies.Add(new HttpCookie("Culture", drpLanguage.SelectedItem.Value));

            //Reload and Clear PostBack Data

            Response.Redirect(Request.Url.AbsolutePath, false);
        } catch {}
    }
}

Step 4

We need to create resource files in the application

Go to Defaullt.aspx page under Tools menu, click Generate Local Resource

ASP.Net Multilingual Web Application

Once you click this, a new folder App_LocalResources will be created in the directory.

The App_localResources folder contains resource files. By default, one resource file is created in that folder Default.aspx.resx

Now if you want to add another resource file, simply copy this file and paste it in the same folder and rename it as Default.aspx.ar.resx

If you notice we have added “ ar ”  in the name, this is nothing but the cultural language code.

We can add as many files as we want, just add the cultural language code in the file name.

You can find the List of languages / culture codes supported by ASP.Net here
Default.aspx.resx
ASP.Net Multilingual Web Application
Default.aspx.ar.resx
ASP.Net Multilingual Web Application

That's all..