Create Multi-language ASP.NET Website

• Download source - 154.2 KB

Introduction

This is a useful and simple tutorial to create a multi-language ASP.NET website. Following these steps, you will be able to create a good user interface multi-language website.

Background

Four Main Steps

1. Create our user control that holds the multi-language icons or dropdownlist to change the language.
2. Create a class that extends Page to override some functions.
3. Create our .aspx page
4. Generate Local Resources to this page

1. Language User Control

We need to create a user control that consists of 2 Image Buttons, each one will hold its language flag. Whenever user clicks on one of them, the language will be transferred to this one. Also, we will register this user control inside every page we want to show this user control or inside master page.

Design Code

// 2 Image Buttons (En-US,fr-FR)
< asp:ImageButton runat="server" ID="ImgBut_En" ImageUrl="~/Images/USALogo.png"><br / >
< asp:ImageButton runat="server" ID="ImgBut_Fr" ImageUrl="~/Images/FRLogo.png">

Code

//If cookie exists, then disable the Image button of the current language
//so it won't refresh the page and return the same language which is useless

protected void Page_Load(object sender, EventArgs e)
{
    HttpCookie cookie = Request.Cookies["CurrentLanguage"];
    if (!IsPostBack && cookie != null && cookie.Value != null)
    {
        if (cookie.Value.IndexOf("en-") >= 0)
        {
            ImgBut_En.Enabled = false;
            ImgBut_Fr.Enabled = true;
        }
        else
        {
            ImgBut_En.Enabled = true;
            ImgBut_Fr.Enabled = false;
        }
    }
}

//On En Button click, change the value of the CurrentLanguage cookie
//reload page with English edition

protected void ImgBut_En_Click(object sender, ImageClickEventArgs e)
{
    HttpCookie cookie = new HttpCookie("CurrentLanguage");
    cookie.Value = "en-US";
    Response.SetCookie(cookie);
    Response.Redirect(Request.RawUrl);

}

//On En Button click, change the value of the CurrentLanguage cookie
//reload page with French edition

protected void ImgBut_Fr_Click(object sender, ImageClickEventArgs e)
{
    HttpCookie cookie = new HttpCookie("CurrentLanguage");
    cookie.Value = "fr-FR";
    Response.SetCookie(cookie);
    Response.Redirect(Request.RawUrl);

}

2. BasePage Class

We need to create a class that extends every function of System.Web.Page, and override some functions like OnPreInit(EventArgs e) and InitializeCulture().

Why do we override these functions?

Answer: Whenever page gets loaded to the user, it first call System.Web.Page and initializes the culture, as well as the Currency Symbol, Number Format, and Date Format ...
So, we override some functions to change the culture (Language) of our website, and make our .aspx page extends from this class which extends from Page class.

Code

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

Public class BasePage : Page
{
    //Check if cookie exists, then change our website culture to the desired language
    //else set our website culture to the default language (EN) here and 
    //create the cookie with this value

    protected override void InitializeCulture()
    {
        string lang = string.Empty;
        HttpCookie cookie = Request.Cookies["CurrentLanguage"];

        if (cookie != null && cookie.Value != null)
        {
            lang = cookie.Value;
            CultureInfo Cul = CultureInfo.CreateSpecificCulture(lang);

            System.Threading.Thread.CurrentThread.CurrentUICulture = Cul;
            System.Threading.Thread.CurrentThread.CurrentCulture = Cul;
        }
        else
        {
            if (string.IsNullOrEmpty(lang)) lang = "en-US";
            CultureInfo Cul = CultureInfo.CreateSpecificCulture(lang);

            System.Threading.Thread.CurrentThread.CurrentUICulture = Cul;
            System.Threading.Thread.CurrentThread.CurrentCulture = Cul;

            HttpCookie cookie_new = new HttpCookie("CurrentLanguage");
            cookie_new.Value = lang;
            Response.SetCookie(cookie_new);
        }

        base.InitializeCulture();
    }
 }

3. Create .aspx Page

Let's create a .aspx page that will be translated. I created a very simple one with 2 Labels, Textboxes, Validators and a Submit Button.

Design Code

<%@ Page Language="C#" Theme="Default" AutoEventWireup="true" 
CodeFile="LanguagePage.aspx.cs" Inherits="LanguagePage" %>

<%@ Register Src="~/UserControl/LanguageUserControl.ascx" TagName="LanguageUserControl"
    TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="Header">
        < uc1:LanguageUserControl runat="server" ID="Language">
        <h2>
            < asp:Label runat="server" ID="lbl_Language">
        </h2>
    </div>
    <div id="Content">
        <div class="Row">
            <div class="label">
                < asp:Label runat="server" ID="lbl_FirstName">< /asp:Label>
            </div>
            <div class="text">
                < asp:TextBox runat="server" ID="txt_FirstName">< /asp:TextBox>
            </div>
        </div>
        <div class="Row">
            <div class="label">
                < asp:Label runat="server" ID="lbl_LastName">< /asp:Label>
            </div>
            <div class="text">
                < asp:TextBox runat="server" ID="txt_LastName">< /asp:TextBox>
            </div>
        </div>
        < asp:Button runat="server" ID="Submit" OnClientClick="CheckLanguage();return false;">
    </div>
    </form>
    <script>
        function get_cookie(cookie_name) {
            var results = document.cookie.match('(^|;) ?' + cookie_name + '=([^;]*)(;|$)');

            if (results)
                return (unescape(results[2]));
            else
                return null;
        }
        function CheckLanguage() {
            if(get_cookie('CurrentLanguage') == "en-US")
                alert('Language : US-English');
            else
                alert('Language : French-Francais');
        }
    </script>
</body>
</html>

Code

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

//Extends BasePage

public partial class LanguagePage : BasePage
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

4. Generate Local Resource

This is the last step, right now we have to generate local resources which will hold the different translations.

1. Open .aspx Page on Design Tab Must be on Design Tab
2. Tools->Generate Local Resource, and save the .aspx page
3. You will find an ASP folder created "App_LocalResourses", which contain a file .resx
4. Copy and paste it, then change its name by adding .fr before .resx for French edition
5. Open the new and old .resx file and translate it, then save both

Congratulations, we are done. Now you have a multi-language website.

You can download the source code project which is very helpful.

I'm looking forward to hearing from you about any suggestions or edits or even questions. Feel free to contact me.