Building Simple Multilingual ASP.NET Core Website

Building Simple Multilingual ASP.NET Core Website

Neste tutorial, criaremos um novo site multilíngue no ASP.NET Core e o publicaremos no IIS. A versão 1.0 do ASP.NET Core foi lançada em junho de 2016, por isso é uma ferramenta bastante nova. A principal característica é que podemos desenvolver e executar nossos aplicativos multiplataforma no Windows, Linux e Mac.

10min read

Hoje vamos nos concentrar no Windows. ASP.NET Core contém algumas diferenças em relação ao ASP.NET MVC 5, por isso é uma boa ideia começar com algo simples e nosso site, que consiste em duas páginas da web, ambas em três idiomas, é uma boa oferta para começar.

Criando um ambiente .NET Core no Windows

Para começar com ASP.NET Core, precisamos ter o Visual Studio 2015 com o Visual Studio Update 3 instalado. Pule esta etapa, se você já instalou os dois. Caso contrário, você pode obter o Visual Studio Community gratuitamente aqui: Download do Visual Studio Community 2015 e Atualização 3 do Visual Studio aqui: Download da Atualização 3 do Visual Studio. Durante a instalação do Visual Studio Community 2015, basta selecionar a instalação padrão.

Instalando o .NET Core 1.0 para Visual Studio e .NET Core Windows Server Hosting

Agora precisamos instalar o .NET Core 1.0 para Visual Studio e .NET Core Windows Server Hosting, para que possamos construir e publicar nosso site. Você pode obter o .NET Core 1.0 para Visual Studio aqui:.NET Core 1.0 para Visual Studio Download e .NET Core Windows Server Hosting aqui:.NET Core Windows Server Hosting Download.

Criando um site

Se já instalamos todos esses necessários, podemos prosseguir com a criação de um novo site. Para fazer isso, abra o Visual Studio 2015, vá para Arquivo/Novo/Projeto e escolha Visual C#/Web/ ASP.NET Core Aplicativo Web (.NET Core). Nomeie-o NETCoreWebsite (fig. 1).

Figura 1 – criação de modelo para aplicativo ASP .NET Core

Na próxima janela, precisamos escolher o tipo de modelo junto com o tipo de autenticação. No nosso caso, será respectivamente Aplicativo Web e Sem autenticação. A opção de host na nuvem deve ser desmarcada (fig. 2).

Figura 2 – escolhendo o modelo correto e o tipo de autenticação

Novo projeto ASP.NET Core acaba de ser criado. Além disso, podemos exibi-lo em nosso navegador da web. Para fazer isso, clique no botão IIS Express na barra de navegação. Após alguns segundos, o site padrão deve aparecer em nosso navegador da web. Podemos alternar entre todos os itens na barra de navegação.

Figura 3 – site padrão feito durante a criação de um novo projeto ASP.NET Core

Adicionando páginas da Web e arquivos estáticos

Agora passamos a criar nosso próprio site. Todos os diretórios e arquivos que serão mencionados neste tutorial são colocados em src/NETCoreWebsite no Gerenciador de Soluções.

Em primeiro lugar, devemos remover arquivos desnecessários. Para fazer isso, vá para Exibições/Página inicial e exclua todas as três páginas da Web colocadas lá. Depois disso, vá para wwwroot/images e exclua todas as imagens que o diretório contém.

Agora é hora de adicionar nossas páginas da web ao projeto. Vá para Visualizações/Página inicial, clique com o botão direito do mouse e escolha Adicionar/Novo item (fig. 4).

Figura 4 – adicionando nova página da Web ao projeto

Em uma nova janela, escolha.NET Core/ASP.NET/MVC View Page. Nomeie-o FirstWebpage.cshtml (fig. 5).

Figura 5 – adicionando nova página da web ao projeto, continuação

Nossa página acaba de ser criada. Repita essa etapa para SecondWebpage.cshtml.

Agora vamos preencher os arquivos .cshtml que criamos na última etapa com código HTML. IMPORTANTE: os arquivos cshtml devem conter apenas o conteúdo da marca <body> sem declaração de elementos compartilhados (como barra de navegação ou rodapé), referências a arquivos CSS, fontes e marcas <script>. <body> tags também não devem ser incluídas.

É hora de adicionar arquivos estáticos como imagens, CSS ou JavaScript ao nosso projeto. Alguns passos atrás, excluímos imagens desnecessárias de wwwroot / images. Agora vamos adicionar nossas imagens diretamente a esse diretório. Clique com o botão direito sobre ele e escolha Abrir pasta no Explorador de Arquivos (fig. 6). Isso abrirá o diretório de imagens no Explorador de Arquivos e agora tudo o que precisamos fazer é simplesmente copiar nossas imagens aqui. NOTA: Lembre-se de adicionar "~/" no início de cada caminho da imagem.

Figura 6 – abrindo o diretório no Explorador de Arquivos para adicionar facilmente novos itens a ele

De maneira muito semelhante, podemos adicionar arquivos CSS e JavaScript. Só temos que adicioná-los a wwwroot/css ou wwwroot/js.

ASP.NET Core usando o padrão MVC, o que significa que os controladores são responsáveis por exibir nossas exibições para os usuários finais. Para exibir nossas páginas da web, precisamos editar HomeController.cs colocadas no diretório Controllers.

Em HomeController.cs exclua os métodos About() e Contact(). Em seguida, copie o método Index() e cole-o logo abaixo do método Index() original. Depois disso, altere "Index" para "FirstWebpage" no primeiro método e para "SecondWebpage" no segundo método. Esses métodos retornam apenas View, o que permite exibir nossas páginas da web no navegador. Depois de concluir esta etapa, nossa classe HomeController.cs deve ficar assim:

public class HomeController : Controller {
    public IActionResult FirstWebpage() {
        return View();
    }

    public IActionResult SecondWebpage() {
        return View();
    }

    public IActionResult Error() {
        return View();
    }
}

Vá para Startup.cs classe e encontre o método chamado Configure. No corpo do método, encontraremos um código semelhante a este:

app.UseMvc(routes=> {
        routes.MapRoute(name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });

Altere {action=Index} para {action=FirstWebpage} para que a página da Web escolhida seja exibida por padrão.

Na próxima etapa, adicionaremos referências aos nossos arquivos CSS e JavaScript e extrairemos arquivos compartilhados.

Extraindo arquivos compartilhados

Para extrair arquivos compartilhados, temos que editar_Layout.cshtml file. Uma página de layout contém a estrutura e o conteúdo compartilhado do site. Quando uma página da web (página de conteúdo) estiver vinculada a uma página de layout, ela será exibida de acordo com a página de layout (modelo).

A página de layout é como uma página da Web normal, exceto por uma chamada para o método @RenderBody() em que a página de conteúdo será incluída.

Abra_Layout.cshtml. Como podemos ver, nossa tag <head> e referências a arquivos CSS e JavaScript são definidas aqui.

Vamos começar com CSS. Encontre um ambiente chamado Desenvolvimento. Observe que existem dois ambientes chamados assim, um em <cabeça> e outro em <corpo>. Queremos adicionar referência ao arquivo CSS, então é claro que vamos alterar o código do ambiente de desenvolvimento <head>.​

Em Desenvolvimento, encontraremos <link rel="stylesheet" href="~/css/site.css" />. Queremos adicionar referência ao nosso próprio arquivo CSS, então precisamos simplesmente alterar site.css para o nome do nosso arquivo CSS.

Precisamos também adicionar referência à fonte que seria usada em nosso site. Adicione <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" /> logo abaixo da referência de arquivos CSS.

É muito importante copiar o conteúdo do ambiente de desenvolvimento para o ambiente de preparo, produção (ele pode ser encontrado logo abaixo), para que possamos usar referências adicionadas após a publicação de nosso projeto.

Agora vamos adicionar referência a arquivos JavaScript.

Na declaração de <corpo> encontrar ambiente chamado Desenvolvimento. Lá encontraremos a linha parecida com esta:

< script src ="~/js/site.js" asp-append-version ="true"></ script >

Assim como antes, tudo o que precisamos fazer é mudar site.js para o nome do nosso arquivo JavaScript. Nesse caso, seria popups.js.

Novamente, copie o conteúdo do ambiente de desenvolvimento para o ambiente de preparo, produção.

O último ponto de editing_Layout.cshtml é definir elementos compartilhados do nosso site. No nosso caso, será barra de navegação e rodapé, que são os mesmos para ambas as páginas da web. Só precisamos substituir o código de barras de navegação padrão pelo nosso próprio código de barras de navegação e repetir a mesma etapa para o rodapé.

Se isso foi feito, podemos clicar no botão IIS Express e exibir nosso site no navegador.

Usando recursos para localizar o site

O uso de recursos é uma maneira rápida e fácil de localizar nosso site. Você pode ler mais sobre isso aqui: Globalização e localização.

Antes de adicionarmos qualquer recurso, precisamos implementar uma estratégia para selecionar o idioma de cada solicitação. Para fazer isso, vá para Startup.cs e encontre o método chamado ConfigureServices. Substitua o corpo do método pelo código abaixo:

services.AddLocalization(options=> options.ResourcesPath="Resources");
services.AddMvc() .AddViewLocalization(LanguageViewLocationExpanderFormat.Suffix) .AddDataAnnotationsLocalization();

Adicionamos os serviços de localização ao contêiner de serviços e definimos o caminho dos recursos como Recursos (criaremos isso em um momento). Também nos permitirá basear a localização no sufixo do arquivo de visualização.

Queremos localizar nosso site em três idiomas: inglês, polonês e alemão. O idioma padrão é o inglês. Em Startup.cs método find chamado Configure e adicione a ele o código abaixo:

var supportedCultures=new[] {
    new CultureInfo("en-US"),
    new CultureInfo("pl-PL"),
    new CultureInfo("de-DE")
};

app.UseRequestLocalization(new RequestLocalizationOptions {
        DefaultRequestCulture=new RequestCulture("en-US"),
        SupportedCultures=supportedCultures,
        SupportedUICultures=supportedCultures
    });

No início de Startup.cs adicione o seguinte código:

using System.Globalization;
using Microsoft.AspNetCore.Mvc.Razor;
using Microsoft.AspNetCore.Localization;

Agora vamos adicionar recursos para localizar nosso site. Clique com o botão direito do mouse em src/NETCoreWebsite no Gerenciador de Soluções e escolha Adicionar/Nova Pasta (fig. 7). Nomeie-o como Recursos.

Figura 7 - adicionando um novo diretório que conterá nossos arquivos de recursos

Depois disso, clique com o botão direito do mouse no diretório Recursos e escolha Adicionar/Novo Item (fig. 8).

In new window choose .NET Core/Code/Resources File. Name it Views.Home.FirstWebpage.en.resx (fig. 9).

Figura 9 – adicionando novo arquivo de recursos

O arquivo de recursos para FirstWebpage.cshtml no idioma inglês acaba de ser criado. Repita esta etapa para os idiomas polonês e alemão (lembre-se de alterar en para, respectivamente, pl e de). Depois disso, devemos ter 3 arquivos de recursos em nosso diretório Resources.

Agora precisamos criar arquivos de recursos para SecondWebpage.cshtml. Repita a etapa acima três vezes (para cada idioma). Lembre-se de alterar FirstWebpage para SecondWebpage no nome do arquivo de recursos e alterar os sufixos.

Também precisamos criar arquivos de recursos para_Layout.cshtml. Como você pode notar, o nome do arquivo de recursos é o caminho para o arquivo .cshtml adequado mais o sufixo de idioma. Porque_Layout.cshtml não é colocado no diretório inicial, mas no diretório compartilhado, nosso nome de arquivo de recursos para o idioma inglês será Views.Shared._Layout.en.resx. Repita esta etapa para os idiomas polonês e alemão.

Podemos prosseguir para localizar nosso site. Adicione o seguinte código no início de FirstWebpage.cshtml, SecondWebpage.cshtml e_Layout.cshtml:

@using Microsoft.AspNetCore.Mvc.Localization
@inject IViewLocalizer Localizer

Para localizar qualquer cadeia de caracteres em nosso código, precisamos substituir a cadeia de caracteres escolhida no arquivo .cshtml por @Localizer["String or it's ID"]. É uma boa prática substituir frases curtas e strings de uma palavra por @Localizer["String"] e frases longas por @Localizer["ID"]. Por exemplo, se quisermos localizar Fale conosco, devemos escrever @Localizer["Fale conosco"], mas se quisermos localizar Este tutorial irá ensiná-lo a construir e publicar seu site multilíngue no Windows usando ASP .NET Core, melhor escrever @Localizer["Sobre o tutorial"].

Vamos supor que usamos @Localizer["Sobre tutorial"] em nosso código. Para traduzi-lo para outro idioma, abra o arquivo de recursos adequado, na chave escreva sobre o tutorial e no valor da frase traduzida. Isso é tudo.

Podemos escolher o idioma adequado na barra de navegação do nosso site. Para fazê-lo funcionar, precisamos codificar botões como este em_Layout.cshtml:

Crie aplicativos Web modernos para qualquer cenário com suas estruturas favoritas. Baixe Ignite UI hoje e experimente o poder de Infragistics controles JavaScript/HTML5.

Como
Solicite uma demonstração