Build customizable Language Switcher Tag Helper with Bootstrap

Mar 21, 2016     Viewed 10639 times    0 Comments
Posted in #TagHelpers  #Localization  #Bootstrap 

Previously I talked about localization in much details, today I will look to it from different angle. While the multilingual websites is common nowadays, there should be a way to let the user to switch between the languages to see the content in the language that he/she prefers.

Let's build a customizable language switcher with the help of tag helper and bootstrap.

In this article I will not dig in much details about tag helpers and bootstrap, so for those who don't know what the tag helper is, please read this link.

1. Preparing the assets

Our tag helper needs a set of icons to show the flags of the supported languages, there are some open source projects that provide a rich SVG country flags such as flag-icon-css but for simplicity I used some icons from this link. Of course we need bootstrap too, so you can get it from this link.

2. Configuring the dependencies

The main two dependencies that we need in our tag helper are  "Microsoft.AspNetCore.Mvc.TagHelpers"
"Microsoft.AspNetCore.Mvc.Localization"

3. Authoring LanguageSwitcherTagHelper

Now let's see some code

public enum DisplayMode
{
Image = 0,
ImageAndText = 1,
Text = 2
}

our tag helper contains three display modes:

  1. Image: which is display the flag of the supported languages
  2. ImageAndText: which is display the name and the flag of the supported languages
  3. Text: which is display the name of the supported languages
[HtmlTargetElement("language-switcher")]
public class LanguageSwitcherTagHelper : TagHelper
{
private IOptions<RequestLocalizationOptions> _locOptions;

public LanguageSwitcherTagHelper(IOptions<RequestLocalizationOptions> options)
{
_locOptions = options;
}

[ViewContext, HtmlAttributeNotBound]
public ViewContext ViewContext { get; set; }

public DisplayMode Mode { get; set; } = DisplayMode.ImageAndText;

public override void Process(TagHelperContext context, TagHelperOutput output)
{
var selectedCulture = ViewContext.HttpContext.Features.Get<IRequestCultureFeature>().RequestCulture.Culture;
var cultures = _locOptions.Value.SupportedUICultures;

output.TagName = null;

switch (Mode)
{
case DisplayMode.ImageAndText:
output.Content.AppendHtml(@"<ul class='nav navbar-nav navbar-right'>
<li class='dropdown'>
<a href='#' class='dropdown-toggle' data-toggle='dropdown' role='button' aria-haspopup='true' aria-expanded='false'><img src='/images/" + selectedCulture.TwoLetterISOLanguageName + ".png' /> " + selectedCulture.EnglishName + @"<span class='caret'></span></a>
<ul class='dropdown-menu'>");
foreach (var culture in cultures)
{
output.Content.AppendHtml($"<li><a href='#' onclick=\"useCookie('{culture.TwoLetterISOLanguageName}')\"><img src='/images/{culture.TwoLetterISOLanguageName}.png' /> {culture.EnglishName}</a></li>");
}
break;
case DisplayMode.Image:
output.Content.AppendHtml(@"<ul class='nav navbar-nav navbar-right'>
<li class='dropdown'>
<a href='#' class='dropdown-toggle' data-toggle='dropdown' role='button' aria-haspopup='true' aria-expanded='false'><img src='/images/" + selectedCulture.TwoLetterISOLanguageName + @".png' /> <span class='caret'></span></a>
<ul class='dropdown-menu'>");
foreach (var culture in cultures)
{
output.Content.AppendHtml($"<li><a href='#' onclick=\"useCookie('{culture.TwoLetterISOLanguageName}')\"><img src='/images/{culture.TwoLetterISOLanguageName}.png' /></a></li>");
}
break;
case DisplayMode.Text:
output.Content.AppendHtml(@"<ul class='nav navbar-nav navbar-right'>
<li class='dropdown'>
<a href='#' class='dropdown-toggle' data-toggle='dropdown' role='button' aria-haspopup='true' aria-expanded='false'> " + selectedCulture.EnglishName + @"<span class='caret'></span></a>
<ul class='dropdown-menu'>");
foreach (var culture in cultures)
{
output.Content.AppendHtml($"<li><a href='#' onclick=\"useCookie('{culture.TwoLetterISOLanguageName}')\">{culture.EnglishName}</a></li>");
}
break;
}
output.Content.AppendHtml(@"</ul>
</li>
</ul>");

output.Content.AppendHtml(@"<script type='text/javascript'>
function useCookie(code) {{
var culture = code;
var uiCulture = code;
var cookieValue = '" + CookieRequestCultureProvider.DefaultCookieName + @"=c='+code+'|uic='+code;
document.cookie = cookieValue;
window.location.reload();
}}
</script>");
}
}

the LanguageSwitcherTagHelper is simply render a bootstrap dropdown menu that contains the supported languages based on the DisplayMode property.

after that you can use our tag helper in the view as the following:

<language-switcher></language-switcher>

the final result will look like this

You can download the source code for this post from my LanguageSwitcherTagHelper repository on GitHub.

Twitter Facebook Google + LinkedIn


Leave a Comment