Download  Source Code-ASP_NET_MVC_Multilingual_App.zip


ASP.NET MVC Multilingual Website

Building multilingual website using ASP.NET MVC -

This article is intended for beginners and for ASP.NET MVC 2, lets start with introduction.  

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
    How It Works / Using 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.

    Image 1:UI Looks like this

    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>

    Code 1: Inside Site.Master

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

    Image 2: 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.

    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");

    }

    Code 2: Inside Controller

    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()

    {

    //It is advisable not to write any logic in controller. 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");

    }

    Code 3: Inside Controller

    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’].

    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>

    Code 4: Inside About.aspx


    Download  Source Code-ASP_NET_MVC_Multilingual_App.zip

    Thank you …Please like this article on social site if this worked for you… Coding is fun !!! Isn't it...