Building Simple Multilingual ASP.NET Core Website
En este tutorial, crearemos un nuevo sitio web multilingüe en ASP.NET Core y lo publicaremos en IIS. La versión 1.0 de ASP.NET Core se lanzó en junio de 2016, por lo que es una herramienta bastante nueva. La característica principal es que podemos desarrollar y ejecutar nuestras aplicaciones multiplataforma en Windows, Linux y Mac.
Katie Mikova
10min read
Hoy nos vamos a centrar en Windows. ASP.NET Core contiene algunas diferencias con respecto a ASP.NET MVC 5, por lo que es una buena idea comenzar con algo simple y nuestro sitio web, que consta de dos páginas web, ambas en tres idiomas, es una buena oferta para comenzar.
Creación de un entorno de .NET Core en Windows
Para empezar con ASP.NET Core, necesitamos tener instalado Visual Studio 2015 con Visual Studio Update 3. Omita este paso, si ya instaló ambos. De lo contrario, puede obtener Visual Studio Community de forma gratuita aquí: Descarga de Visual Studio Community 2015 y Visual Studio Update 3 aquí: Descarga de Visual Studio Update 3. Durante la instalación de Visual Studio Community 2015, solo tiene que seleccionar la instalación predeterminada.
Instalación de .NET Core 1.0 para Visual Studio y .NET Core Windows Server Hosting
Ahora necesitamos instalar .NET Core 1.0 para Visual Studio y .NET Core Windows Server Hosting, así podremos construir y publicar nuestro sitio web. Puede obtener .NET Core 1.0 para Visual Studio aquí:.NET Core 1.0 para Visual Studio Descargar y .NET Core Windows Server Hosting aquí:.NET Core Windows Server Hosting Descargar.
Creación de un sitio web
Si ya tenemos instalado todo lo necesario, podemos proceder a crear una nueva página web. Para ello, abra Visual Studio 2015, vaya a Archivo/Nuevo/Proyecto y elija Visual C#/Web/ ASP.NET Core Aplicación web (.NET Core). Nómbralo NETCoreWebsite (fig. 1).
Figura 1: creación de una plantilla para la aplicación ASP .NET Core
En la siguiente ventana debemos elegir el tipo de plantilla junto con el tipo de autenticación. En nuestro caso, será respectivamente Aplicación Web y Sin autenticación. La opción Host en la nube debe estar desactivada (fig. 2).
Figura 2: Elección de la plantilla y el tipo de autenticación correctos
Se acaba de crear un nuevo proyecto ASP.NET Core. Además, podemos mostrarlo en nuestro navegador web. Para hacerlo, haga clic en el botón IIS Express en la barra de navegación. Después de unos segundos, el sitio web predeterminado debería aparecer en nuestro navegador web. Podemos cambiar entre todos los elementos de la barra de navegación.
Figura 3: sitio web predeterminado creado al crear un nuevo proyecto ASP.NET Core
Adición de páginas web y archivos estáticos
Ahora pasamos a crear nuestro propio sitio web. Todos los directorios y archivos que se mencionarán en este tutorial se colocan en src/NETCoreWebsite en el Explorador de soluciones.
En primer lugar, debemos eliminar los archivos innecesarios. Para hacerlo, vaya a Vistas/Inicio y elimine las tres páginas web ubicadas allí. Después de eso, vaya a wwwroot/images y elimine todas las imágenes que contiene el directorio.
Ahora es el momento de agregar nuestras páginas web al proyecto. Vaya a Vistas/Inicio, haga clic derecho sobre él y elija Agregar/Nuevo elemento (fig. 4).
Figura 4: adición de una nueva página web al proyecto
En una nueva ventana, elija.NET Core/ASP.NET/MVC View Page. Nómbralo FirstWebpage.cshtml (fig. 5).
Figura 5: adición de una nueva página web al proyecto, continuación
Nuestra página web acaba de ser creada. Repita el paso para SecondWebpage.cshtml.
Ahora vamos a rellenar los archivos .cshtml que hemos creado en el último paso con código HTML. IMPORTANTE: esos archivos .cshtml deben contener solo el contenido de la etiqueta <body> sin declaración de elementos compartidos (como la barra de navegación o el pie de página), referencias a archivos CSS, fuentes y etiquetas <script>. <body> etiquetas tampoco deben incluirse.
Es hora de agregar archivos estáticos como imágenes, CSS o JavaScript a nuestro proyecto. Hace unos pasos eliminamos imágenes innecesarias de wwwroot/images. Ahora vamos a agregar nuestras imágenes directamente a este directorio. Haga clic derecho sobre él y elija Abrir carpeta en el Explorador de archivos (fig. 6). Eso abrirá el directorio de imágenes en el Explorador de archivos y ahora todo lo que tenemos que hacer es simplemente copiar nuestras imágenes aquí. NOTA: Recuerde agregar "~/" al comienzo de cada ruta de imagen.
Figura 6: Abrir el directorio en el Explorador de archivos para agregarle fácilmente nuevos elementos
De forma muy similar podemos añadir archivos CSS y JavaScript. Solo tenemos que añadirlos a wwwroot/css o wwwroot/js.
ASP.NET Core utilizando el patrón MVC, lo que significa que los controladores son responsables de mostrar nuestras vistas a los usuarios finales. Para mostrar nuestras páginas web, necesitamos editar HomeController.cs colocadas en el directorio de Controladores.
En HomeController.cs eliminar los métodos About() y Contact(). A continuación, copie el método Index() y péguelo justo debajo del método Index() original. Después de eso, cambie "Index" a "FirstWebpage" en el primer método y a "SecondWebpage" en el segundo método. Esos métodos solo devuelven View que permiten mostrar nuestras páginas web en el navegador. Después de completar este paso, nuestra clase HomeController.cs debería verse así:
public class HomeController : Controller {
public IActionResult FirstWebpage() {
return View();
}
public IActionResult SecondWebpage() {
return View();
}
public IActionResult Error() {
return View();
}
}
Vaya a Startup.cs clase y busque el método llamado Configure. En el cuerpo del método encontraremos un código similar a este:
app.UseMvc(routes=> {
routes.MapRoute(name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
Cambie {action=Index} a {action=FirstWebpage} para que la página web elegida se muestre de forma predeterminada.
En el siguiente paso, agregaremos referencias a nuestros archivos CSS y JavaScript y extraeremos los archivos compartidos.
Extracción de archivos compartidos
Para extraer los archivos compartidos, tenemos que editar el archivo edit_Layout.cshtml. Una página de diseño contiene la estructura y el contenido compartido del sitio web. Cuando una página web (página de contenido) está vinculada a una página de diseño, se mostrará de acuerdo con la página de diseño (plantilla).
La página de diseño es igual que una página web normal, excepto por una llamada al método @RenderBody() donde se incluirá la página de contenido.
Abrir_Layout.cshtml. Como podemos ver, nuestra etiqueta <head> y las referencias a archivos CSS y JavaScript se definen aquí mismo.
Comencemos con CSS. Busque el entorno llamado Desarrollo. Tenga en cuenta que hay dos entornos llamados así, uno en <cabeza> y otro en <cuerpo>. Queremos agregar una referencia al archivo CSS, así que, por supuesto, vamos a cambiar el código del entorno de <head> development.
En Desarrollo encontraremos <link rel="stylesheet" href="~/css/site.css" />. Queremos agregar una referencia a nuestro propio archivo CSS, por lo que simplemente debemos cambiar site.css nombre de nuestro archivo CSS.
También necesitamos agregar una referencia a la fuente que se utilizaría en nuestro sitio web. Añade <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" /> justo debajo de la referencia de archivos CSS.
Es muy importante copiar el contenido del entorno de desarrollo al entorno de producción (se puede encontrar justo debajo), así podremos usar las referencias añadidas después de publicar nuestro proyecto.
Ahora agregaremos referencia a los archivos JavaScript.
En la declaración de <cuerpo> encontrar el entorno llamado Desarrollo. Allí encontraremos el aspecto de la línea así:
< script src ="~/js/site.js" asp-append-version ="true"></ script >
Al igual que antes, todo lo que tenemos que hacer es cambiar site.js nombre de nuestro archivo JavaScript. En ese caso, sería popups.js.
De nuevo, copie el contenido del entorno de desarrollo en el entorno de ensayo, producción.
El último punto de editing_Layout.cshtml es definir los elementos compartidos de nuestro sitio web. En nuestro caso, será la barra de navegación y el pie de página, que son los mismos para ambas páginas web. Solo necesitamos reemplazar el código de barras de navegación predeterminado con nuestro propio código de barras de navegación y repetir el mismo paso para el pie de página.
Si se ha hecho, podemos hacer clic en el botón IIS Express y mostrar nuestro sitio web en el navegador.
Uso de recursos para localizar un sitio web
El uso de recursos es una forma rápida y sencilla de localizar nuestro sitio web. Puedes leer más sobre esto aquí: Globalización y localización.
Antes de agregar cualquier recurso, debemos implementar una estrategia para seleccionar el idioma de cada solicitud. Para ello, vaya a Startup.cs método de búsqueda llamado ConfigureServices. Reemplace el cuerpo del método con código como se muestra a continuación:
services.AddLocalization(options=> options.ResourcesPath="Resources"); services.AddMvc() .AddViewLocalization(LanguageViewLocationExpanderFormat.Suffix) .AddDataAnnotationsLocalization();
Agregamos los servicios de localización al contenedor de servicios y establecemos la ruta de los recursos en Recursos (lo crearemos en un momento). También nos permitirá basar la localización en el sufijo del archivo de vista.
Queremos localizar nuestro sitio web en tres idiomas: inglés, polaco y alemán. El idioma predeterminado es el inglés. En Startup.cs método de búsqueda llamado Configure y agréguele código como se muestra a continuación:
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
});
Al principio de Startup.cs agregue el siguiente código:
using System.Globalization; using Microsoft.AspNetCore.Mvc.Razor; using Microsoft.AspNetCore.Localization;
Ahora agregaremos recursos para localizar nuestro sitio web. Haga clic con el botón derecho en src/NETCoreWebsite en el Explorador de soluciones y elija Agregar/Nueva carpeta (fig. 7). Nómbralo Recursos.
Figura 7: adición de un nuevo directorio que contendrá nuestros archivos de recursos
Después de eso, haga clic con el botón derecho en el directorio de recursos y elija Agregar/Nuevo elemento (fig. 8).
In new window choose .NET Core/Code/Resources File. Name it Views.Home.FirstWebpage.en.resx (fig. 9).
Figura 9: adición de un nuevo archivo de recursos
Se acaba de crear el archivo Resources para FirstWebpage.cshtml en inglés. Repita este paso para el idioma polaco y alemán (recuerde cambiar en por pl y de, respectivamente). Después de eso, deberíamos tener 3 archivos de recursos en nuestro directorio de recursos.
Ahora tenemos que crear archivos de recursos para SecondWebpage.cshtml. Repita el paso anterior tres veces (para cada idioma). Recuerde cambiar FirstWebpage a SecondWebpage en el nombre del archivo de recursos y cambiar los sufijos.
También necesitamos crear archivos de recursos para_Layout.cshtml. Como puede observar, el nombre del archivo de recursos es la ruta de acceso al archivo .cshtml adecuado más el sufijo de idioma. Dado que_Layout.cshtml no se coloca en el directorio principal, sino en el directorio compartido, el nombre de nuestro archivo de recursos para el idioma inglés será Views.Shared._Layout.en.resx. Repita este paso para el idioma polaco y alemán.
Podemos pasar a localizar nuestro sitio web. Agregue el siguiente código al principio de FirstWebpage.cshtml, SecondWebpage.cshtml y_Layout.cshtml:
@using Microsoft.AspNetCore.Mvc.Localization @inject IViewLocalizer Localizer
Para localizar cualquier cadena en nuestro código, debemos reemplazar la cadena elegida en el archivo .cshtml con @Localizer["String or it's ID"]. Es una buena práctica reemplazar las oraciones cortas y las cadenas de una palabra por @Localizer["String"] y las oraciones largas por @Localizer["ID"]. Por ejemplo, si queremos localizar Contáctenos, debemos escribir @Localizer["Contáctenos"], pero si queremos localizar Este tutorial le enseñará a construir y publicar su sitio web multilingüe en Windows usando ASP .NET Core, mejor escriba @Localizer["Acerca del tutorial"].
Supongamos que usamos @Localizer["Acerca del tutorial"] en nuestro código. Para traducirlo a otro idioma, abra el archivo de recursos adecuado, en Llave escribir Acerca del tutorial y en Valor Frase traducida. Es todo.
Podemos elegir el idioma adecuado en la barra de navegación de nuestro sitio web. Para que funcione, necesitamos codificar botones como este en_Layout.cshtml:
Cree aplicaciones web modernas para cualquier escenario con sus marcos favoritos. Descargue Ignite UI hoy mismo y experimente el poder de Infragistics controles JavaScript/HTML5.
