meta info

Add a Language DropDown with LanguageNav TagHelper

By Ziya Mollamahmut

Adds a language navigation that lists all supported cultures.

Quick Navigation

  • Install package
PM > Install-Package LazZiya.TagHelpers
  • Add to _V├ŁewImports.cshtml:
@addTagHelper *, LazZiya.TagHelpers

Add the language navigation to the _layout.cshtml or any other page:

<language-nav></language-nav>

LanguageNav Default

Basically, this is enough to create a language dropdown that is able to switch the culture and set new culture value in the url. But to save the current culture value in a cookie as well, we need two additional steps. See Culture cookie for further details.

Redirect to url

By default language tag helper will redirect to the home page on culture change. But we can specify different url to redirect to:

<language-nav redirect-to-url="@(Url.Page("/Index", new { culture="{0}" }))">
</language-nav>

The culture value must be specified as a placeholder "{0}" in the dictionary of route values, and the tag helper will take care of replacing it with the relevant culture name.

Redirect to the same page

To redirect to the same page one of below methods can help:

  • Get current page name (or controller/action) and pass them to the Url helper
<language-nav redirect-to-url="@(Url.Page(ViewContext.RouteData.Values["Page"].ToString(), new { culture = "{0}" }))">
</language-nav>
  • Another way is to get all route data and replace only the culture value with a place holder then recreate the url:
@{ 
    var routeData = ViewContext.RouteData.Values;
    routeData["culture"] = "{0}";
}
<language-nav redirect-to-url="@(Url.RouteUrl(routeData))"></language-nav>

Show country flags

If you have country specific content and not culture specific, it is recommended to use cultures that are specific to that country.

E.g. if we have our cultures like: "tr-tr", "ar-sy", and "en-us" we can use flags beside each culture name in the dropdown. But if our cultures are not country specific "en", "tr" and "ar" so flags will not shown.

<!-- add reference to flag-icon-css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.6/css/flag-icon.min.css" />

<!-- enable flags in language navigation -->
<language-nav flags="true"></language-nav>

LanguageNav with Flags

Flags are svg files that shown with css thanks to flag-icon-css.

Set culture cookie

1- Create the handler that will save the culture value to cookie. E.g. create it under Index.cshtml.cs:

// Add required namespaces
using Microsoft.AspNetCore.Localization;
using Microsoft.AspNetCore.Http;

/// <summary>
/// Set culture cookie value
/// </summary>
/// <param name="cltr">Culture name</param>
/// <param name="returnUrl">The url to return to after setting the cookie</param>
public IActionResult OnGetSetCultureCookie(string cltr, string returnUrl)
{
    Response.Cookies.Append(
        CookieRequestCultureProvider.DefaultCookieName,
        CookieRequestCultureProvider.MakeCookieValue(new RequestCulture(cltr)),
        new CookieOptions { Expires = DateTimeOffset.UtcNow.AddYears(1) }
    );

    return LocalRedirect(returnUrl);
}

2- Set the culture cookie handler url in the language-nav taghelper:

<language-nav cookie-handler-url="@Url.Page("/Index", "SetCultureCookie", new { area="", cltr="{0}", returnUrl="{1}" })">
</language-nav>

The place holders "{0}" and "{1}" will be filled by the tag helper with reference to each listed culture.

See samples in demo page