Build customizable Language Switcher Tag Helper with Bootstrap

Build customizable Language Switcher Tag Helper with Bootstrap

Mar 21, 2016     Viewed 28790 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"

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 languageson Insights SDK from your application. Many events such as user page views are automatically sent by the SDK.

    Set up Application Insights for ASP.NET Core Application

    To enable Application Insights to your ASP.NET Core application, simply right click your project and choose Add Application Insights Telemetry as the following:

    after that you can install the Application Insights SDK to use it locally. For more information about the set up process I encourge you to checkout this link.

    Explore your logs

    If you are using NLog, log4Net or System.Diagnostics.Trace for diagnostic tracing in your ASP.NET Core application, you can have send your logs to Azure Application Insights, where you can explore and search them. Your logs will be merged with the other telemetry coming from your application, so that you can identify the traces associated with servicing each user request, and correlate them with other events and exception reports.

    After running your application in debug mode you can see the Application Insights integration with Diagnostic Tools window

    also you can check the Application Insights dashboard which looking pretty good with the statistics information that let you drill in for further details about what is going on.

    Creating Application Insights Logger

    Microsoft already has a repository for Application Insights for ASP.NET Core, it would be nice if we have such tool integrated with ASP.NET Logging APIs, that is what I wanna explore in this section.

    First of all let create a simple class that represents the various settings for the Application Insights

    public class ApplicationInsightsSettings
        public bool? DeveloperMode { get; set; }
        public string InstrumentationKey { get; set; }

    Second we need to write the ApplicationInsightsLogger that implements ILogger interface.

    public class ApplicationInsightsLogger : ILogger
        private readonly string _name;
        private readonly Func _filter;
        private readonly ApplicationInsightsSettings _settings;
        private readonly TelemetryClient _telemetryClient;
        public ApplicationInsightsLogger(string name)
            : this(name, null, new ApplicationInsightsSettings())
        public ApplicationInsightsLogger(string name, Func filter, ApplicationInsightsSettings settings)
            _name = string.IsNullOrEmpty(name) ? nameof(ApplicationInsightsLogger) : name;
            _filter = filter;
            _settings = settings;
            _telemetryClient = new TelemetryClient();
            if (_settings.DeveloperMode.HasValue)
                TelemetryConfiguration.Active.TelemetryChannel.DeveloperMode = _settings.DeveloperMode;
                if (string.IsNullOrWhiteSpace(_settings.InstrumentationKey))
                    throw new ArgumentNullException(nameof(_settings.InstrumentationKey));
                TelemetryConfiguration.Active.InstrumentationKey = _settings.InstrumentationKey;

    Leave a Comment