We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to Perform Localization using Database instead of Resource Files in Blazor?

Platform: Blazor |
Control: General

This article explains how to perform the localization by using the database without using the resource files in Blazor.

Create Blazor App

Create Blazor Server App with Scheduler component. Here, Scheduler component added in ~/Index.razor.

@using Syncfusion.Blazor.Schedule
 
<h2>Syncfusion Blazor Schedule Component</h2>
<br />
<SfSchedule TValue="AppointmentData" Height="650px" SelectedDate="@(new DateTime(2020, 2, 14))">
    <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
</SfSchedule>
<br />
<br />
 
 
@code{
    List<AppointmentData> DataSource = new List<AppointmentData>
{
        new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 12, 0, 0) },
        new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0) }
    };
    public class AppointmentData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
    }
}

blazor-schedule-default-output

Fig 1: This is the image for Schedule Default Output

Click the any cells for make interaction and schedule the new event. blazor-schedule-default-popup

Fig 2: This is the image for Schedule default popup interaction

Create database to store key and strings for localization

Create the Table in SQL Server or any data base for storing the localization key and culture-based strings. Here, the table is created in SQL server in a name Table. localization-table-for-blazor-scheduler

Fig 3: This is the image for Localization database table

Scaffolding database in Blazor App

Follow below steps to scaffold Table.cs table to create DbContext and model classes.

  1. Install following NuGet packages to scaffolding table in SQL server database. Run the following commands in the Package Manager Console.

    //This package creates database context and model classes from the database.

    Install-Package Microsoft.EntityFrameworkCore.Tools -Version 5.0.0

     

    //The database provider that allows EntityFramework to work with SQL Server.

    Install-Package Microsoft.EntityFrameworkCore.SqlServer -Version 5.0.0

  1. Once these packages are installed, scaffold DbContext and model classes by running the following command in the Package Manager Console under Server project.

    Scaffold-DbContext “<<Connection-String>>” Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models

  1. After running the above command, ‘SyncLocalizationContext.cs’ and ‘Table.cs’ files will be created in the Models folder as follows. localization-table-for-blazor-scheduler

Fig 4: Representation for Table.cs

 localization-context-for-blazor-scheduler

Fig 5: Representation for SyncLocalizationContext.cs

  1. Configure connection string to ‘appsettings.json’ file, since it is not recommended to have a connection string with sensitive information in the ‘SyncLocalizationContext.cs’ file. connection-string-setup-for-blazor-scheduler

Fig 6: This is the image for Connection String Setup

Localize using database

Create ~/Shared/SyncfusionLocalizer.cs file and implement ISyncfusionStringLocalizer interface. This acts as a middleware to connect the Syncfusion Blazor UI components and Database to get the localization strings based on the key values.

In SyncfusionLocalizer.cs, the GetText method returns the localized strings from database table for the corresponding key.

namespace {{NameSpace}} 
{ 
  public class SyncfusionLocalizer : ISyncfusionStringLocalizer 
  { 
    public SyncLocalizationContext Localizer { get; set; }
 
    public SyncfusionLocalizer(SyncLocalizationContext StringLocalizer) 
    { 
       this.Localizer = StringLocalizer; 
    } 
 
    public string GetText(string key) 
    { 
       string cultureValue = ""; 
       //Code for retriving the localized strings based on the key.  
       IList<Table> table = Localizer.Tables.ToList(); 
       Table data = table.Where(obj => obj.Key == key).FirstOrDefault(); 
        if (data != null) 
        { 
          string culture = CultureInfo.CurrentCulture.Name; 
          cultureValue = data.GetType().GetProperty(culture).GetValue(data, null).ToString(); 
          return cultureValue; 
        } 
        return cultureValue; 
     } 
     … 
     … 
     … 
  } 
}

 

Now, configure DbContext and ISyncfusionStringLocalizer in startup.cs as below,

. . . . 
. . . .
using Microsoft.EntityFrameworkCore;
 
public class Startup
{
   .....
   .....
   .....
 
   public void ConfigureServices(IServiceCollection services)
   {
      .....
      .....
      services.AddSyncfusionBlazor();
      services.AddControllers();
      services.AddDbContext<SyncLocalizationContext>(options =>
      {
         options.UseSqlServer(Configuration.GetConnectionString("LocalizationDBConString"));
      });
      var context = services.BuildServiceProvider().GetService<SyncLocalizationContext>();
      services.AddSingleton<ISyncfusionStringLocalizer>(serviceProvider => new SyncfusionLocalizer(context));
      .....
      .....  
     }
  }

 

Configure the localization

Create ~/Controllers/CultureController.cs file and configure the controller to switch the culture using UI.

namespace BlazorServer.Controllers
{
  [Route("[controller]/[action]")]
  public class CultureController : Controller
  {
    public IActionResult SetCulture(string culture, string redirectUri)
    {
      if (culture != null)
      {
        HttpContext.Response.Cookies.Append(
        CookieRequestCultureProvider.DefaultCookieName,
        CookieRequestCultureProvider.MakeCookieValue(new RequestCulture(culture)));
       }
      return LocalRedirect(redirectUri);
    }
  }
}

 

Then add the below configurations for localization in ~/Startup.cs

public class Startup
{
  ....
  ....
  ....
 
  public void ConfigureServices(IServiceCollection services)
  {
   ....
   ....
   services.AddSyncfusionBlazor();
   services.AddControllers();
   ....
   ....
   services.Configure<RequestLocalizationOptions>(options =>
   {
     // Define the list of cultures your app will support
     var supportedCultures = new List<CultureInfo>()
     {
      new CultureInfo("en-US"),
      new CultureInfo("de")
     };
     // Set the default culture
     options.DefaultRequestCulture = new RequestCulture("en-US");
     options.SupportedCultures = supportedCultures;
     options.SupportedUICultures = supportedCultures;
    });
 }
 
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
 public void Configure(IApplicationBuilder app, IWebHostEnvironment env){
   app.UseRequestLocalization(app.ApplicationServices.GetService<IOptions<RequestLocalizationOptions>>().Value);
   .....
   .....
   .....
   app.UseEndpoints(endpoints =>
   {
      endpoints.MapControllers();
      endpoints.MapBlazorHub();
      endpoints.MapFallbackToPage("/_Host");
   });
  }
}

 

For more details about Syncfusion Blazor Application Localization, Check here.

Configure the UI for culture switcher

Create a Blazor component named as CultureSwitcher.razor in the ~/Shared/ folder.

@inject NavigationManager NavigationManager
 
<h3>Select your language</h3>
 
<select @onchange="OnSelected">
    <option>Select Culture</option>
    <option value="en-US">English</option>
    <option value="de">German</option>
</select>
 
@code {
    private void OnSelected(ChangeEventArgs e)
    {
        var culture = (string)e.Value;
        var uri = new Uri(NavigationManager.Uri)
            .GetComponents(UriComponents.PathAndQuery, UriFormat.Unescaped);
        var query = $"?culture={Uri.EscapeDataString(culture)}&" +
            $"redirectUri={Uri.EscapeDataString(uri)}";
 
        NavigationManager.NavigateTo("/Culture/SetCulture" + query, forceLoad: true);
    }
}

 

Then, add CultureSwitcher component to ~/Shared/MainLayout.razor file.

@inherits LayoutComponentBase
 
<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>
 
    <div class="main">
        <div class="top-row px-4">
            <CultureSwitcher />
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>
 
        <div class="content px-4">
            @Body
        </div>
    </div>
</div>

 

Now, run the project and use the switcher to change the culture. default-en-us-output-for-blazor-scheduler

Fig 7: Output for 'en-US'

german-output-for-blazor-scheduler

Fig 8: Output for 'de' (German)

View Sample in GitHub

See also

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile