Episerver: How to Create a Language Selector for Multilingual Sites

Multilingual sites require a way for end-users to switch from one language to another.  This article takes a quick look at the key components for creating a language selector, or drop-down, in Episerver.
 

The Episerver Methods for the Language Selector

Displaying your list of languages and displaying the currently selected language depends on the ILanguageBranchRepository and ContentLanguage.
The ILanguageBranchRepository provides access to the various languages that are defined within the admin section of the site. More details on this class can be found in the Episerver documentation. Two methods exist on this interface to retrieve a list of languages.

• ListAll – This method lists all of the languages that have been installed on the current Episerver instance.
• ListEnabled – Returns only those languages that have been enabled for the site. This is the method that we will be using in our code sample.

ContentLanguage is part of Episerver.Globalization. The ContentLanguage is an object to store the CultureInfo object of the current user from the cache. The CultureInfo is part of the Microsoft.Globalization namespace and provides information about a specific culture. The information includes the names for the culture, the writing system, the calendar used, and formatting for dates and numbers.
 

The Code for the Language Selector

In the code shown, we embed a language drop-down as part of our header navigation.  The controller returns a view model which includes the list of available languages and the current language code. The view iterates through the enabled languages and displays links to the page in other languages accordingly.
 

Controller

Choosing a Global Software Development Partner to Accelerate Your Digital Strategy

To be successful and outpace the competition, you need a software development partner that excels in exactly the type of digital projects you are now faced with accelerating, and in the most cost effective and optimized way possible.

Get the Guide

The controller is very simple. In this example, it has a navigation repository that is used to create a view model. Then, that model is passed to the view.

private readonly INavigationRepository _navigationRepository;
public NavigationController(INavigationRepository navigationRepository)
{
     _navigationRepository = navigationRepository ??
          throw new ArgumentNullException((nameof(navigationRepository)));
}
public ActionResult Header() => PartialView("HeaderView", _navigationRepository.GetPageHeader());

Repository

Dependency injection initializes the languageBranchRepository. The GetPageHeader method initializes a new view model with data from our injected objects.  This includes all enabled languages for our site, as well, and the name of the preferred culture.

public class NavigationRepository : INavigationRepository
{
    private readonly IPageRouteHelper _pageRouteHelper;
    private readonly ILanguageBranchRepository _languageBranchRepository;
    private readonly ISettingsRepository _settingsRepository;
    public NavigationRepository(IPageRouteHelper pageRouteHelper, ILanguageBranchRepository languageBranchRepository, ISettingsRepository settingsRepository)
    {
        _pageRouteHelper = pageRouteHelper ??
             throw new ArgumentNullException((nameof(pageRouteHelper)));
        _languageBranchRepository = languageBranchRepository ??
             throw new ArgumentNullException((nameof(languageBranchRepository)));
        _settingsRepository = settingsRepository ??
             throw new ArgumentNullException((nameof(settingsRepository)));
    }
    public HeaderViewModel GetPageHeader()
    {
        return new HeaderViewModel()
        {
            Settings = _settingsRepository.GetSettings(),
            CurrentPageLink = _pageRouteHelper.PageLink,
            Languages = _languageBranchRepository.ListEnabled(),
            PreferredLanguage = ContentLanguage.PreferredCulture.Name
        };
    }
}

View

The view renders the various enabled languages and creates a link to render the page in a different language for all languages that are not the preferred culture.

<ul class="header-utility-language-selector">
     @foreach (var language in Model.Languages)
     {
          if (string.Equals(Model.PreferredLanguage,
               language.LanguageID, StringComparison.InvariantCultureIgnoreCase))
          {
               <li class="header-utility-language-selector-selected">
                   @language.Name
               </li>
          }
          else
          {
               <li>
                    @Html.PageLink(language.Name, Model.CurrentPageLink,
                        new { language = language.LanguageID })
               </li>
          }
     }
</ul>

In summary, ILanguageBranchRepository provides you with a list of available languages and ContentLanguage provides you with the currently selected language.