Localize ASP.NET Core Dashboard Control
- 4 minutes to read
You can localize your applications - update their UI to match certain culture and language settings:
- Translate UI element captions to a different language: dialog boxes, buttons, menu items, error messages, etc.
- Format numbers, dates, and currencies according to specific culture settings.
Localize UI
ASP.NET Core 3.1+
For ASP.NET Core 3.1+, localize an ASP.NET Core Dashboard application with satellite resource assemblies.
Add Predefined Satellite Assemblies
We published NuGet packages with predefined satellite resource assemblies for the following cultures:
| NuGet Package | Culture |
|---|---|
| DevExpress.AspNetCore.Dashboard.de | German |
| DevExpress.AspNetCore.Dashboard.es | Spanish |
| DevExpress.AspNetCore.Dashboard.ja | Japanese |
| DevExpress.AspNetCore.Dashboard.ru | Russian |
Follow the steps below to add the resources for a culture from the table above:
- In Visual Studio, open NuGet Package Manager for the solution.
- In the invoked manager, select the DevExpress package source. Find the DevExpress.AspNetCore.Dashboard.XX NuGet package with the required culture and install it (for example, DevExpress.AspNetCore.Dashboard.es).
Add Satellite Assemblies for Other Cultures
You can add the assemblies for other cultures to your ASP.NET Core application. Follow the steps below to add the resources for the French market (the fr culture):
Go to the DevExpress Localization Service to download satellite assemblies for DevExpress .NET controls that correspond to other cultures. Ensure that the version of the satellite assemblies (for instance, v20.2) matches the version of the DevExpress Dashboard package in the project.
Modules to translate:
- Dashboard.Core
- Dashboard.Web
- DataAccess
- Web.Resources
Create a subdirectory in the application’s EXE file directory (usually in the
bin\Debug\netcoreappX.X\subdirectory) with the name that corresponds to the newly generated resource culture (for example,bin\Debug\netcoreappX.X\fr- to translate your application into French).Unpack the archive with resources generated by the DevExpress Localization Service and copy all the *.v20.2.resources.dll files to the newly created subdirectory.
Configure Localization Middleware
After you add assemblies, configure the localization middleware:
public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
// ...
var supportedCultures = new[] { "en-US", "es", "fr" };
app.UseRequestLocalization(new RequestLocalizationOptions()
.SetDefaultCulture(supportedCultures[0])
.AddSupportedCultures(supportedCultures)
.AddSupportedUICultures(supportedCultures));
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseDevExpressControls();
app.UseRouting();
app.UseEndpoints(endpoints => {
EndpointRouteBuilderExtension.MapDashboardRoute(endpoints, "dashboardControl");
endpoints.MapRazorPages();
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
}
When you launch the application, you can pass the culture and ui-culture query string parameters to the application’s URL. The following example sets the Spanish culture:
http://localhost:5000/?culture=es&ui-culture=es
You can also specify both the language and region (for example, es-MX for Spanish/Mexico).
ASP.NET Core 2.1
For ASP.NET Core 2.1, use component-specific JSON files that correspond to other cultures. Note that since the Web Dashboard exports data on the server side, add satellite resource assemblies to your project to complete the localization process.
Follow the steps below to load the localized strings for the Spanish market (the es culture):
Unpack a self-extracting archive and extract json resources. Create the
wwwroot/localization/esdirectory, and add the dx-analytics-core.es.json and dx-dashboards.es.json files to it.Load localization strings for the required culture on the DashboardBuilder.OnInitializing event.
@inject Microsoft.AspNetCore.Hosting.IHostingEnvironment Hosting <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;"> @(Html.DevExpress().Dashboard("dashboardControl1") .Width("100%") .Height("100%") .OnInitializing("onInitializing") ) </div> <script> function onInitializing() { DevExpress.Analytics.Localization.loadMessages(@Html.Raw(System.IO.File.ReadAllText(System.IO.Path.Combine(Hosting.WebRootPath, "localization/es", "dx-analytics-core.es.json")))) DevExpress.Analytics.Localization.loadMessages(@Html.Raw(System.IO.File.ReadAllText(System.IO.Path.Combine(Hosting.WebRootPath, "localization/es", "dx-dashboard.es.json")))) } </script>Note
If the Text Editor functionality is enabled, you also need to localize the Rich Text Editor: Rich Text Editor - Localization.
Localize Dates, Numbers, and Currencies
Intl
The ASP.NET Core Dashboard control uses Intl as a default way to apply culture-specific formatting. Intl is the short name used to refer to a particular ECMAScript Internationalization API object. The Web Dashboard supports this API out of the box. All you need to do is configure the localization middleware.
Globalize
The ASP.NET Core Dashboard control can use Globalize instead of Intl to format dates, numbers, and currencies.
Follow the steps below to use Globalize for culture-specific formatting:
Install the following packages:
npm install globalize@^1.0.1 devextreme-cldr-data@^1.0.2When you bundle scripts, add the following lines to the bundleconfig.json file:
[ { "outputFileName": "wwwroot/css/site.min.css", "inputFiles": [ "node_modules/devextreme/dist/css/dx.light.css", "node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css", "node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css", "node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css", "node_modules/devexpress-dashboard/dist/css/dx-dashboard.light.min.css" ], "minify": { "enabled": false, "adjustRelativePaths": false } }, { "outputFileName": "wwwroot/js/site.min.js", "inputFiles": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/jquery-ui-dist/jquery-ui.min.js", "node_modules/knockout/build/output/knockout-latest.js", "node_modules/ace-builds/src-min-noconflict/ace.js", "node_modules/ace-builds/src-min-noconflict/ext-language_tools.js", "node_modules/ace-builds/src-min-noconflict/theme-dreamweaver.js", "node_modules/ace-builds/src-min-noconflict/theme-ambiance.js", "node_modules/cldrjs/dist/cldr.js", "node_modules/cldrjs/dist/cldr/event.js", "node_modules/cldrjs/dist/cldr/supplemental.js", "node_modules/globalize/dist/globalize.js", "node_modules/globalize/dist/globalize/message.js", "node_modules/globalize/dist/globalize/number.js", "node_modules/globalize/dist/globalize/date.js", "node_modules/globalize/dist/globalize/currency.js", "node_modules/devextreme-cldr-data/supplemental.js", "node_modules/devextreme-cldr-data/es.js", "node_modules/devextreme/dist/js/dx.all.js", "node_modules/@devexpress/analytics-core/dist/js/dx-analytics-core.min.js", "node_modules/@devexpress/analytics-core/dist/js/dx-querybuilder.min.js", "node_modules/devexpress-dashboard/dist/js/dx-dashboard.min.js" ], "minify": { "enabled": false }, "sourceMap": false } ]Handle the OnBeforeRender event and call the
Globalize.locale()method to apply culture settings.<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>Dashboard Web Application</title> <link href="css/site.min.css" rel="stylesheet" /> <script type="text/javascript"> function onBeforeRender(dashboardControl) { Globalize.locale('es'); } </script> </head> <body> <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;"> @(Html.DevExpress().Dashboard("dashboardControl1") .Width("100%") .Height("100%") .OnBeforeRender("onBeforeRender") ) </div> <script src="js/site.min.js"></script> </body> </html>