.NET

21 set, 2021

Colocando seu site em várias línguas com .NETCore Web Razor e Globalization

Publicidade

Você quer deixar o seu site funcionando em várias línguas de forma automática? Então continue lendo.
Aconselho a também fazer o exemplo informado aqui.

Olá pessoal, hoje eu gostaria de falar e mostar sobre como colocar o site em várias línguas usando o
recurso Globalization da plataforma Web. É muito importante ter um site que comporta em várias
línguas porque o mundo está aberto para acessar qualquer tipo de site.

Veja o que usei:
1. Ferramenta Visual Studio
2. Linguagem C#
3. Plataforma Web Razor
4. Framework .NETCore

O exemplo aqui será bem simples e ao mesmo tempo vai te ajudar a executar essa funcionalidade em
qualquer tipo de site, que use essa tecnologia.

Esse exemplo já busca a língua que o usuário está usando no navegador de forma automática e para
testar, basta mudar a primeira língua e o site já atualiza.

Vamos codificar

Na classe Startup.cs eu já comecei colocando algumas configurações no método ConfigureService. Veja
o código 1.1

Código 1.1 – ConfigureServices

public void ConfigureServices(IServiceCollection services)
	{
		services.AddRazorPages();

		services.AddLocalization();

		services.Configure<RequestLocalizationOptions>(
			options =>
			{
				var supportedCultures = new List<CultureInfo>
{
					new CultureInfo("en-US"),
					new CultureInfo("pt-BR")
				};

			options.DefaultRequestCulture = new RequestCulture(culture: "en-US", uiCulture: "en-US");
				options.SupportedCultures = supportedCultures;
				options.SupportedUICultures = supportedCultures;
			});
		
	}

O primeiro passo do código 1.1 foi adicionar o AddLocalization() na configuração. Depois disso, adicionei as duas culturas que terei no site, nesse caso, Inglês (“en-US”) e Português (“pt-BR”).

Note que o DefaultRequestCulture está com a cultura “en-US” e isso quer dizer que, se a pessoa estiver acessando o site em Paris a primeira língua que vai aparecer no site é Inglês.

Bom, agora eu preciso colocar uma configuração dentro do método Configure. Veja o código 1.2.

Código 1.2 – Adicionando configuração

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
	{
		...
		
		var localizeOptions = app.ApplicationServices.GetService<IOptions<RequestLocalizationOptions>>();

		app.UseRequestLocalization(localizeOptions.Value);

		...
	}

Note que o código 1.2 eu adiciono o RequestLocalizationOptions para o serviço e depois eu falo para a aplicação usar o UseRequestLocalization com o valor desejado.

Bom, essas foram as configurações dentro do arquivo Startup.cs. Agora vamos passar para a criação do arquivo de Resources.

O primeiro passo é criar a pasta Resources dentro da aplicação.

O segundo passo é criar uma classe comum chamada Resources.cs.

Depois disso, tenho que criar os arquivos Resources.en-US.resx e o Resources.pt-BR.resx dentro da pasta Resources.

Ponto importante: utilize o mesmo nome para a pasta, classe a arquivos. O Visual Studio vai entender e vai colocar os arquivos dentro da classe de forma automática. Veja a imagem 1.1.

Imagem 1.1 – Pasta de resources

Note que a imagem 1.1 mostra os resources como se estivessem dentro da classe Resources.cs. Esse é o grande pulo do gato para fazer funcionar.

Dessa maneira, todas as páginas poderão acessar os resources para pegar qualquer valor. Existem muitas maneiras de fazer, mas essa é a mais fácil e fica mais centralizada no meu ponto de vista.

Index.cshtml.cs

Agora vamos para a página Index.cshtml.cs onde vai ter a injeção de dependência e depois pegamos o valor baseado na língua do navegador do usuário. Veja o código 1.3.

Código 1.3 – Injeção de dependência

public class IndexModel : PageModel
    {
        private readonly IStringLocalizer<Resources.Resources> _localizer;

        public IndexModel(IStringLocalizer<Resources.Resources> localizer)
        {
            _localizer = localizer;
        }
		...
    }

O primeiro passo é declarar uma variável do tipo IStringLocalizer indicando o nosso resource. IStringLocalizer<Resources.Resources> _localizer e o nome dado foi _localizer.

O segundo passo é declarar ele no construtor da classe IndexModel passando os valores.

Código 1.4 – Construtor da classe

Com isso eu já posso pegar o valor que está declarado dentro do arquivo .resx, mas espera Mauricio Junior, eu não coloquei nenhum valor ainda dentro dos arquivos. Como faço para colocar? Basta clicar duas vezes em cima do arquivo e digitar uma chave e um valor.

Veja como ficou o meu na imagem 1.2 e imagem 1.3.

Imagem 1.2

Imagem 1.3

Note que as duas imagens possuem a mesma chave chamada “Teste” mas os valores são diferentes baseado na língua. Uma em Português e outra em Inglês.

Para exibir o valor que o sistema vai pegar de forma automática nós precisamos usar a variável declarada na injeção de dependência com a chave. Veja o código 1.5 dentro da model.

Código 1.5 – Pegando o valor

public void OnGet()
	{
		ViewData["Title"] = _localizer["Teste"];
	}

Como a chave se chama “Teste” basta usar o _localizer[“Teste”] que o valor em Inglês ou Português será exibido sem qualquer problema e agora você tem seu site funcionando em várias línguas.

O código 1.6 mostra toda classe Index.cshtml.cs.

Código 1.6 – IndexModel

using Microsoft.AspNetCore.Mvc.RazorPages;
	using Microsoft.Extensions.Localization;
	using Microsoft.Extensions.Logging;

	namespace ResourceGlobalization.Pages
	{
		public class IndexModel : PageModel
		{
			private readonly ILogger<IndexModel> _logger;
			private readonly IStringLocalizer<Resources.Resources> _localizer;
	
			public IndexModel(ILogger<IndexModel> logger, IStringLocalizer<Resources.Resources> localizer)
			{
				_logger = logger;
				_localizer = localizer;
			}
	
			public void OnGet()
			{
				ViewData["Title"] = _localizer["Teste"];
			}
		}
	}

Espero que tenha ajudado e qualquer dúvida pode entrar em contato comigo pelo meu Instagram @mauriciojunior_net ou pelo meu site mauriciojunior.net.