Hosting Tutorial :: Multilingualism in ASP.NET MVC 4

Posted on by Mary Bacine

ASP.NET MVC 4 Multilingualism

Hosting Tutorial :: Multilingualism in ASP.NET MVC 4 | Multilingualism is the use of two or more languages, either by an individual speaker or by a community of speakers. Multilingual speakers outnumber monolingual speakers in the world’s population. Multilingualism is becoming a social phenomenon governed by the needs of globalization and cultural openness.Hosting Tutorial :: Multilingualism in ASP.NET MVC 4

Multilingualism in computing can be considered part of a continuum between internationalization and localization. Due to the status of English in computing, software development nearly always uses it (but see also Non-English-based programming languages), so almost all commercial software is initially available in an English version, and multilingual versions, if any, may be produced as alternative options based on the English original.

ASP.NET MVC 4 Multilingual Website

Hosting Tutorial :: Multilingualism in ASP.NET MVC 4 | In this post, I explain how to create a multilingual website in asp.net mvc4. In today’s competitive web world, not having a multilingual website implies you are ignoring the needs of a major part of the world population. So, This is most important to have multilingual website to  reach  more customer and thus increase revenue. Here I am going to explain how we can do our website multilingual in asp.net  mvc application easily.

Create New Project.

Go to File > New > Project > Select asp.net MVC4 web application > Entry Application Name > Click OK > Select Basic > Select view engine Razor > OK

Add Resource File for different languages

Here I have added 3 resource file for 3 languages

  1. Resource.resx – This is the default resource file associated with the English language.
  2. Resource.es.resx – This resource file is associated with the Spanish language.
  3. Resource.bn.resx – This resource file is associated with the Bengali language.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > Add New > Select Resource File under General > Enter File name > Add.

[N.B: Don’t forget to change all the resource files Access Modifier to Public ]

Hosting Tutorial :: Multilingualism in ASP.NET MVC 4

Create a Class (Module)

Go to Solution Explorer > Right Click on Modules folder > Add > Class > Enter Class name > Add.

using System.ComponentModel.DataAnnotations;
namespace MvcMultilingual.Models
{
public class RegistrationModel
{
// Here typeof(Resource) is The File Name Start With for resources
[Display(Name="FirstName", ResourceType=typeof(Resource))]
[Required(ErrorMessageResourceType = typeof(Resource), ErrorMessageResourceName = "FirstNameRequired")]
public string FirstName { get; set; }

[Display(Name = "LastName", ResourceType = typeof(Resource))]
[Required(ErrorMessageResourceType = typeof(Resource), ErrorMessageResourceName = "LastNameRequired")]
public string LastName { get; set; }

[Display(Name = "Email", ResourceType = typeof(Resource))]
[Required(ErrorMessageResourceType = typeof(Resource), ErrorMessageResourceName = "EmailRequired")]
[RegularExpression(@"^([0-9a-zA-Z]([\+\-_\.][0-9a-zA-Z]+)*)+@(([0-9a-zA-Z][-\w]*[0-9a-zA-Z]*\.)+[a-zA-Z0-9]{2,3})$",
ErrorMessageResourceType = typeof(Resource), ErrorMessageResourceName = "EmailInvalid")]
public string Email { get; set; }

[Display(Name = "Age", ResourceType = typeof(Resource))]
[Required(ErrorMessageResourceType = typeof(Resource), ErrorMessageResourceName = "AgeRequired")]
[Range(18, 60, ErrorMessageResourceType = typeof(Resource), ErrorMessageResourceName = "AgeRange")]
public int Age { get; set; }

}
}

Add an another class for Manage Languages property & function.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > Class > Enter Class Name > Add.

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

namespace MvcMultilingual
{
public class SiteLanguages
{
public static List<Languages> AvailableLanguages = new List<Languages>
{
new Languages{ LangFullName = "English", LangCultureName = "en"},
new Languages{ LangFullName = "Español", LangCultureName = "es"},
new Languages{ LangFullName = "বাংলা", LangCultureName = "bn"}
};

public static bool IsLanguageAvailable(string lang)
{
return AvailableLanguages.Where(a => a.LangCultureName.Equals(lang)).FirstOrDefault() != null ? true : false;
}

public static string GetDefaultLanguage()
{
return AvailableLanguages[0].LangCultureName;
}

public void SetLanguage(string lang)
{
try
{
if (!IsLanguageAvailable(lang))
lang = GetDefaultLanguage();
var cultureInfo = new CultureInfo(lang);
Thread.CurrentThread.CurrentUICulture = cultureInfo;
Thread.CurrentThread.CurrentCulture = CultureInfo.CreateSpecificCulture(cultureInfo.Name);
HttpCookie langCookie = new HttpCookie("culture", lang);
langCookie.Expires = DateTime.Now.AddYears(1);
HttpContext.Current.Response.Cookies.Add(langCookie);

}
catch (Exception ex)
{

}
}
}

public class Languages
{
public string LangFullName { get; set; }
public string LangCultureName { get; set; }
}
}

Add an another class (inherit Controller) Where we will override BeginExecuteCore.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > Class > Enter Class Name > Add.
Here I have added this for check & set language each time any request execute.

using System;
using System.Web;
using System.Web.Mvc;

namespace MvcMultilingual
{
public class MyBaseController : Controller
{
// Here I have created this for execute each time any controller (inherit this) load
protected override IAsyncResult BeginExecuteCore(AsyncCallback callback, object state)
{
string lang = null;
HttpCookie langCookie = Request.Cookies["culture"];
if (langCookie != null)
{
lang = langCookie.Value;
}
else
{
var userLanguage = Request.UserLanguages;
var userLang = userLanguage != null ? userLanguage[0] : "";
if (userLang != "")
{
lang = userLang;
}
else
{
lang = SiteLanguages.GetDefaultLanguage();
}
}

new SiteLanguages().SetLanguage(lang);

return base.BeginExecuteCore(callback, state);
}
}
}

Add a new Controller.

Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > Select Templete “empty MVC Controller”> Add.

Add new action into your controller for Get Action method.

Here I have added “Index” Action into “Home” Controller. Please write this following code.

using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcMultilingual.Controllers
{
public class HomeController : MyBaseController
{
public ActionResult Index()
{
return View();
}
}
}

Add view for the Action & design.

Right Click on Action Method (here right click on form action) > Add View… > Enter View Name > Select View Engine (Razor) > Check “Create a strong-typed view” > Select your model class > Add.
[N:B:Please Rebuild solution before add view.]

@model MvcMultilingual.Models.RegistrationModel
@{
ViewBag.Title = MvcMultilingual.Resource.Register;
}

<h2>@MvcMultilingual.Resource.Register</h2>

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)

<fieldset>
<legend>@MvcMultilingual.Resource.Register</legend>

<div class="editor-label">
@Html.LabelFor(model => model.FirstName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.FirstName)
@Html.ValidationMessageFor(model => model.FirstName)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.LastName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.LastName)
@Html.ValidationMessageFor(model => model.LastName)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.Email)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Email)
@Html.ValidationMessageFor(model => model.Email)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.Age)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Age)
@Html.ValidationMessageFor(model => model.Age)
</div>

<p>
<input type="submit" value="@MvcMultilingual.Resource.Register" />
</p>
</fieldset>
}

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}

Add another action into your controller for POST Method

Here I have added “Index” Action into “HomeController” Controller for POST Action. Please write this following code.

[HttpPost]
public ActionResult Index(RegistrationModel r)
{
return View(r);
}

Add another action into your controller for Change Language

Here I have added “ChangeLanguage” Action into “HomeController” Controller for Change Language. Please write this following code

public ActionResult ChangeLanguage(string lang)
{
new SiteLanguages().SetLanguage(lang);
return RedirectToAction("Index", "Home");
}

Modify Layout Page for Show Available Languages (Language Switcher).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>

<div style="padding:5px">
@* Here I will add Language Switcher *@
@{
foreach (var i in MvcMultilingual.SiteLanguages.AvailableLanguages)
{
@Html.ActionLink(i.LangFullName, "ChangeLanguage", "Home", new{lang = i.LangCultureName}, null) <text>&nbsp;</text>
}
}
</div>
@RenderBody()
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *