CODEWITHSUNDEEP
blazor
Gunasekaran
Gunasekaran

Reputation: 53

Blazor Component - On change localization

I created the resource file for localization. while page loading, it set the current culture info but changing the language from drop down list, it's not changing.

Here is my code,

Localization.razor:

@page "/"
@using System.Globalization
@using Microsoft.AspNetCore.Localization
@inject IStringLocalizer<Localization> localizer

<h3>@localizer["Title"]</h3>

@localizer["Content"]

<select @onchange="OnSelected">
 <option>Select...</option>
 <option value="en">English</option>
 <option value="de">German</option>
</select>

@code {
   private void OnSelected(ChangeEventArgs e)
   {
      // Code
    
   }
}

What needs to write in OnSelected event for changing selected language?

Thanks in advance.

MainLayout.razor:

@inherits LayoutComponentBase
@inject NavigationManager NavigationManager

<div class="sidebar">
   <NavMenu />
</div>

<div class="main">
   <div class="top-row px-4">
      <select @onchange="OnSelected">
        <option value="en">English</option>
        <option value="de">German</option>
      </select>
   </div>
 <div class="content px-4">
    @Body
 </div>
</div>

@code {
  private void OnSelected(ChangeEventArgs e)
  {
      var selectedCulture = e.Value.ToString();
      CultureInfo.CurrentUICulture = 
          CultureInfo.GetCultures(CultureTypes.AllCultures)
            .First(c => c.Name == selectedCulture);
   }
}

Localization.razor:

@page "/"
@inject IStringLocalizer<Localization> localizer

<h3>@localizer["Title"]</h3>
@localizer["Content"]

Program.cs:

public class Program
{
    public static void Main(string[] args)
    {
        CreateHostBuilder(args).Build().Run();
        
    }

    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .ConfigureWebHostDefaults(webBuilder =>
            {
                webBuilder.UseStartup<Startup>();
            });
}

Startup.cs:

public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddRazorPages();
        services.AddServerSideBlazor();
        
        services.AddLocalization(options => { options.ResourcesPath = "Resources"; });
        var supportedCultures = new List<CultureInfo> { new CultureInfo("en"), new CultureInfo("de") };
        services.Configure<RequestLocalizationOptions>(options =>
        {
            options.DefaultRequestCulture = new Microsoft.AspNetCore.Localization.RequestCulture("de");
            options.SupportedUICultures = supportedCultures;
        });
    }

    
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();
        app.UseRequestLocalization(app.ApplicationServices.GetRequiredService<IOptions<RequestLocalizationOptions>>().Value);
        app.UseRouting();

        app.ApplicationServices
            .UseBootstrapProviders()
            .UseFontAwesomeIcons();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapRazorPages();
            endpoints.MapBlazorHub();
            endpoints.MapFallbackToPage("/_Host");
        });
    }
}

Upvotes: 1

Views: 3004

Answers (1)

agua from mars
agua from mars

Reputation: 17444

You need to set the current culture :

@page "/"
@using System.Globalization
@using Microsoft.AspNetCore.Localization
@inject IStringLocalizer<Localization> localizer

<h3>@localizer["Title"]</h3>

@localizer["Content"]

<select @onchange="OnSelected">
 <option>Select...</option>
 <option value="en">English</option>
 <option value="de">German</option>
</select>

@code {
   private void OnSelected(ChangeEventArgs e)
   {
      // Code
      var selectedCulture = e.Value.ToString();
      CultureInfo.CurrentCulture = CultureInfo.GetCultures(CultureTypes.AllCultures)
                .First(c => c.Name == selectedCulture);
   }
}

Upvotes: 2

Related Questions