Add a Language DropDown with LanguageNav TagHelper

By Ziya Mollamahmut

Adds a language navigation that lists all supported cultures.

• Redirect to URL
• Redirect to the same page
• Show country flags
• Set culture cookie

• 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>

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.

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.

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>

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>

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

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