Creating ASP.NET MVC Multilingual Web Application

• Download application - 279.32 KB

Introduction

In this article, we are going to see how we can show localized content to your ASP.NET MVC web application.

Background

We will see mainly two approaches to resolve this issue:

• Approach 1: Using Static Pages
• Approach 2: Using Dynamic page with localized data at runtime

Using the Code

Before we start with Approach 1, I would like to request you to download the attached source code.

Approach 1: Using Static Pages

We can go for this approach only when we have few/limited static localized pages.

In order to demonstrate Approach 1, I have placed tree Html Anchor tags in Site.Master and in logindisplay div placed “<h2>CultureName: [<%:ViewData["CultureName"]%>]</h2>” which will show the Culture Name (e.g. US-English :en-US):

<div id="logindisplay">

       <% Html.RenderPartial("LogOnUserControl"); %> 
       <h2> CultureName: [<%: ViewData["CultureName"]%>]</h2>

     </div>      

     <div id="menucontainer">      

       <ul id="menu">       

         <li><%: Html.ActionLink("About Page Dynamic Redirection based on locale", 
             "AboutLocaleRedirect", "Home")%></li>

         <li><%: Html.ActionLink("Static About en-US", "About_en_US/About", "Home")%></li>

         <li><%: Html.ActionLink("Static About zh-CN", "About_zh_CN/About", "Home")%></li>

       </ul>      

     </div>

For demo purposes, we will use only two static pages as shown in Image 3: View Folder Structure.

As shown in Image:Inside Site.Master, we will be using three HTML anchor tags to illustrate Approach 1. Let us see each of these HTML Anchor tags.

<li><%: Html.ActionLink("About Page Dynamic Redirection based on locale", 
    "AboutLocaleRedirect", "Home")%></li>

In order to do this, we will check for CultureName as shown in Image 4: Inside Controller and on action, we are dynamically changing views.

This will check the culture code and accordingly switch to either ‘About_en-US.aspx’ or ‘About_zh-CN.aspx’.

  <li><%: Html.ActionLink("Static About en-US", "About_en_US/About", "Home")%></li>

This link will be used to fetch directly data in US English language.

  <li><%: Html.ActionLink("Static About zh-CN", "About_zh_CN/About", "Home")%></li>

This link will be used to fetch data in Chinese language.

public ActionResult AboutLocaleRedirect()
   {
     // It is advisible not to wite any logic in controller. Only for demo purpose
     // I am using here. You can put this code in model

     ViewData["CultureName"] = System.Globalization.CultureInfo.CurrentUICulture.Name;
     return View("About_" + System.Globalization.CultureInfo.CurrentUICulture.Name); 
   }    

   public ActionResult About_en_US()
   {
     ViewData["CultureName"] = "en-US";
     return View("About_en-US");
   }

   public ActionResult About_zh_CN()
   {
     ViewData["CultureName"] = "zh-CN";
     return View("About_zh-CN");
   }

Approach 2: Using Dynamic Page with Localized Data at Runtime

We should go for this approach if we have a large number of pages to show a data in localized format.

In this approach, we can either use resource file or directly data from database.

As shown in Image 2: Site.Master, we have HTML anchor tag:

<li><%:Html.ActionLink("About Page Dynamic Content Based on locale","AboutLocalization",
    "Home")%></li>

On click of this anchor tag, we are going to call action ‘AboutLocalization’ in HomeController as shown in Code 5: Inside Controller.

public ActionResult AboutLocalization()
   2{
     //It is advisable not to write any logic in controller. Only for demo purposes,
     //I am using here. You can put this code in model

     //Here either you can take localized data from resource file or from database

     ViewData["CultureName"] = System.Globalization.CultureInfo.CurrentUICulture.Name;

     ViewData["message"] = (
         System.Globalization.CultureInfo.CurrentUICulture.Name == "en-US") ?

       "Content: Welcome to MVC localization demo" : "內容：歡迎到MVC演示的位置";

     return View("About");
   }

Here we are going to check for Culture and accordingly, we going to either get data from Database or from Resource file. For demo purposes, I have used constant string.

According to locale, we are setting data to ViewData[‘Message’].

And as shown in Image 5: Inside About.aspx, we are displaying dynamic data.

<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server">
 <h22>About</h2>
 <p>
   <h2><%: ViewData["Message"] %></h2>
 </p>
</asp:Content>

Thank you so much...

For any queries, please get back to me.

History

• 10^th December, 2010: Initial post