神刀安全网

Build customizable Language Switcher Tag Helper with 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 Build customizable Language Switcher Tag Helper with Bootstrap

Hint: The entire source code is hosted in Github .

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Build customizable Language Switcher Tag Helper with Bootstrap

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址