Click here to Skip to main content
14,836,551 members
Articles / Web Development / ASP.NET
Tip/Trick
Posted 27 Aug 2013

Stats

94K views
5.5K downloads
31 bookmarked

Create Multi-language ASP.NET Website

Rate me:
Please Sign up or sign in to vote.
4.57/5 (19 votes)
5 Nov 2013CPOL2 min read
Useful and simple tutorial to create multi-language ASP.NET website. Following these steps, you will be able to create a good user interface multi-language website with 4 main steps.

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

En Sample Image

Fr Sample Image

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

aspnet
// 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

C#
//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

C#
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

aspnet
<%@ 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

C#
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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Ahmed Alaa El-Din
Software Developer eSpace Software Company
Egypt Egypt
No Biography provided

Comments and Discussions

 
QuestionLanguage not supporting Pin
Saqlain Hashmi7-May-16 17:57
MemberSaqlain Hashmi7-May-16 17:57 
AnswerRe: Language not supporting Pin
Ahmed Alaa El-Din7-May-16 21:43
MemberAhmed Alaa El-Din7-May-16 21:43 
GeneralMy Vote of 5 Pin
aarif moh shaikh20-May-15 2:03
professionalaarif moh shaikh20-May-15 2:03 
Question[My vote of 1] What about RTL languages such as Arabic? Pin
oeatek2-May-15 9:22
Memberoeatek2-May-15 9:22 
AnswerRe: [My vote of 1] What about RTL languages such as Arabic? Pin
Ahmed Alaa El-Din2-May-15 22:51
MemberAhmed Alaa El-Din2-May-15 22:51 
GeneralMy vote for 5 Pin
Saily26-Jul-14 10:14
MemberSaily26-Jul-14 10:14 
Questionusing Global.asax Pin
mohammed2010_as25-Nov-13 13:44
Membermohammed2010_as25-Nov-13 13:44 
AnswerRe: using Global.asax Pin
Ahmed Alaa El-Din27-Nov-13 3:41
MemberAhmed Alaa El-Din27-Nov-13 3:41 
Questionneed to create 2 more image buttons where must i do that Pin
Member 81531447-Nov-13 18:19
MemberMember 81531447-Nov-13 18:19 
AnswerRe: need to create 2 more image buttons where must i do that Pin
Ahmed Alaa El-Din7-Nov-13 22:00
MemberAhmed Alaa El-Din7-Nov-13 22:00 
QuestionError BasePage Pin
Member 87310684-Nov-13 9:39
MemberMember 87310684-Nov-13 9:39 
AnswerRe: Error BasePage Pin
Ahmed Alaa El-Din4-Nov-13 23:01
MemberAhmed Alaa El-Din4-Nov-13 23:01 
Questiondate and currency controls Pin
Eduardo Antonio Cecilio Fernandes28-Aug-13 1:23
MemberEduardo Antonio Cecilio Fernandes28-Aug-13 1:23 
AnswerRe: date and currency controls Pin
Ahmed Alaa El-Din28-Aug-13 1:27
MemberAhmed Alaa El-Din28-Aug-13 1:27 
GeneralRe: date and currency controls Pin
Eduardo Antonio Cecilio Fernandes28-Aug-13 1:32
MemberEduardo Antonio Cecilio Fernandes28-Aug-13 1:32 
GeneralRe: date and currency controls Pin
Ahmed Alaa El-Din28-Aug-13 4:14
MemberAhmed Alaa El-Din28-Aug-13 4:14 
GeneralRe: date and currency controls Pin
Eduardo Antonio Cecilio Fernandes28-Aug-13 4:15
MemberEduardo Antonio Cecilio Fernandes28-Aug-13 4:15 
GeneralMy vote of 5 Pin
Eduardo Antonio Cecilio Fernandes28-Aug-13 1:16
MemberEduardo Antonio Cecilio Fernandes28-Aug-13 1:16 
GeneralMy vote of 5 Pin
Hasan Habib Surzo27-Aug-13 19:40
MemberHasan Habib Surzo27-Aug-13 19:40 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.