En el post anterior vimos las novedades que se encuentran disponibles en la preview 8 de .Net 5. Ahora le toca a Asp.Net 5, vemos.
Las novedades más importantes para esta preview son:
- Autenticación de Azure Active Directory con Microsoft.Identity.Web
- Aislamiento CSS para componentes Blazor
- Carga diferida en Blazor WebAssembly
- Se ha actualizado el soporte de globalización de Blazor WebAssembly
- Nuevo componente InputRadio en Blazor
- Establecer foco en la interfaz de usuario en las aplicaciones de Blazor
- Modificar los encabezados HTML en de Blazor
- IAsyncDisposable para componentes Blazor
- Controlar la creación de componentes de Blazor
- Almacenamiento protegido del navegador
- Enlace y validación de modelos con tipos de registro de C#
- Mejoras en DynamicRouteValueTransformer
- Actualización automática con reloj dotnet
- Formador de registrador de consola
- JSON Console Logger
Actualizar un proyecto existente
Si estábamos trabajando con la preview 7 y queremos actualizar a la preview 8 debemos hacer los siguiente:
- Actualizar las referencias de los paquetes Microsoft.AspNetCore.* a 5.0.0-preview.8.*.
- Actualizar todas las referencias del paquete Microsoft.Extensions.* a 5.0.0-preview.8.*.
- Actualizar las referencias del paquete System.Net.Http.Json a 5.0.0-preview.8.*.
Novedades
Autenticación de Azure Active Directory con Microsoft.Identity.Web
Desde las plantillas de proyecto ASP.Net ahora se integran Microsoft.Identity.Web para controlar la autenticación con Azure AD. Este paquete proporciona una experiencia mejorada para la autenticación a través de AzureAD.
Aislamiento CSS para componentes Blazor
Blazor admite la declaración de estilos a nivel componentes para no interferir con los estilos globales dando resultados inesperados. Estos deben hacerse en un archivo específico, {nombre},razor.css que coincide con el el nombre del archivo correspondiente del componente
MyComponent.razor
<h1>My Component</h1>
<ul class="cool-list">
<li>Item1</li>
<li>Item2</li>
</ul>
MyComponent.razor.css
h1 {
font-family: 'Comic Sans MS'
}
.cool-list li {
color: red;
}
Estos estilos de MyComponent.razor.css solo se aplicarán a la salida representada de MyComponent; los elementos h1 en otros componentes no se verán afectados.
Para escribir un selector en estilos específicos de componentes que afectan a los componentes secundarios, utilizaremos ::deep.
.parent ::deep .child {
color: red;
}
Blazor aislará el CSS reescribiendo los selectores CSS como parte de la compilación para que coincidan con el ámbito del componente. A continuación, Blazor agrupara los archivos CSS reescritos y dejará el paquete a disposición de la aplicación como un recurso web estático en la ruta de acceso _framework/scoped.styles.css.
Por ahora, Blazor no admite de forma nativa preprocesadores CSS como Sass o Less, pero usar preprocesadores CSS para generar estilos específicos de componentes antes de que se vuelvan a escribir como parte de la compilación del proyecto.
Carga diferida en Blazor WebAssembly
Permite mejorar el tiempo de carga de la aplicación Blazor WebAssembly dejando que la descarga de dependencias de aplicaciones específicas hasta que sean necesarias.
Para utilizarlos, debemos agregar al grupo de elementos BlazorWebAssemblyLazyLoad en el archivo de proyecto: La aplicación cargará explícitamente los ensamblados marcados para la carga diferida antes de que se usen. En tiempo de ejecución debemos utilizar el servicio LazyAssemblyLoader:
@inject LazyAssemblyLoader LazyAssemblyLoader
@code {
var assemblies = await LazyAssemblyLoader.LoadAssembliesAsync(new string[] { "Lib1.dll" });
}
Si deseamos hacerlo para una pagina especifica debemos usar los eventos OnNavigateAsync en el componente Router. En este evento se desencadena en todas las navegaciones de página y se puede usar para cargar de forma diferida los ensamblados de una ruta determinada. También podemos cargar con LazyLoad toda la página de una ruta pasando los ensamblados cargados difericos como ensamblados adicionales al enrutador.
@using System.Reflection
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.WebAssembly.Services
@inject LazyAssemblyLoader LazyAssemblyLoader
<Router AppAssembly="typeof(Program).Assembly" AdditionalAssemblies="lazyLoadedAssemblies" OnNavigateAsync="@OnNavigateAsync">
<Navigating>
<div>
<p>Loading the requested page...</p>
</div>
</Navigating>
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="typeof(MainLayout)" />
</Found>
<NotFound>
<LayoutView Layout="typeof(MainLayout)">
<p>Sorry, there is nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
@code {
private List<Assembly> lazyLoadedAssemblies =
new List<Assembly>();
private async Task OnNavigateAsync(NavigationContext args)
{
if (args.Path.EndsWith("/page1"))
{
var assemblies = await LazyAssemblyLoader.LoadAssembliesAsync(new string[] { "Lib1.dll" });
lazyLoadedAssemblies.AddRange(assemblies);
}
}
}
Aztualización en el soporte de globalización de Blazor WebAssembly
En esta preview se mejora la compatibilidad de globalización para Blazor WebAssembly basada en componentes internacionales para Unicode (ICU). El objetivo es optimizar estas cargas útiles para disminuir el tamaño de descarga. Todavía no se encuentra completo, pero, el equipo sigue trabajando en ello.
Nuevo componente InputRadio Blazor
Tenemos disponibles los componentes InputRadio y InputRadioGroup integrados simplifican el enlace de datos a grupos de botones de opción con validación integrada junto a los otros componentes de entrada de formulario para Blazor.
<InputRadioGroup @bind-Value="survey.OpinionAboutBlazor">
@foreach (var opinion in opinions)
{
<div class="form-check">
<InputRadio class="form-check-input" id="@opinion.id" Value="@opinion.id" />
<label class="form-check-label" for="@opinion.id">@opinion.label</label>
</div>
}
</InputRadioGroup>
Foco en las aplicaciones de Blazor
Blazor tiene un método disponible un nuevo método FocusAsync en ElementReference para establecer el foco de la interfaz de usuario en ese elemento
<botón de onclickonclická"() > textInput.FocusAsync()">Establecer enfoque</botón> <input árefá"textInput"/>
IAsyncDisposable para componentes Blazor
Los componentes admiten la interfaz IAsyncDisposable para la versión asincrónica de los recursos asignados.
Controlar la creación de componentes de Blazor
Mladen Macanovic contribuyó para que esta funcionalidad esté disponible. Ahora podemos controlar cómo se crean instancias de los componentes proporcionando su propia implementación del servicio IComponentActivator.
Modificar los encabezados HTML en de Blazor
Tenemos los nuevos componentes: Title, Link y Meta. Son útiles para establecer en tiempo de programación el título de una página, agregar dinámicamente vínculos y metaetiquetas al encabezado HTML en una aplicación blazor.
Pasos:
- Agregar una referencia de paquete al paquete Microsoft.AspNetCore.Components.Web.Extensions.
- Incluir una referencia de script a _content/Microsoft.AspNetCore.Components.Web.Extensions/headManager.js.
- Agregar una directiva @using para Microsoft.AspNetCore.Components.Web.Extensions.Head.
@if (unreadNotificationsCount > 0)
{
var title = $"Notifications ({unreadNotificationsCount})";
<Title Value="title"></Title>
<Link rel="icon" href="icon-unread.ico" />
}
Almacenamiento protegido del navegador
Blazor en .NET 5 resuelve el problema de guardar información del lado del cliente con la posibilidad de ser alterada. Para esto tenemos dos nuevos servicios: ProtectedLocalStorage y ProtectedSessionStorage. Estos servicios nos ayudan a almacenar nuestros valores como el estado en el almacenamiento local y de sesión, respectivamente, y se encargaran de proteger los datos almacenados mediante las API de protección de datos ASP.NET Core.
Pasos:
- Agregar la referencia al paquete Microsoft.AspNetCore.Components.Web.Extensions
- Configurar los servicios Microsoft.AspNetCore.Components.Web.Extensions. desde Startup.ConfigureServcies.
- Inyectar ProtectedLocalStorage and ProtectedSessionStorage en la implementación del componente:
- @inject ProtectedLocalStorage ProtectedLocalStorage
- @inject ProtectedSessionStorage ProtectedSessionStorage
- Utilizar para el servicio para acceder
private async Task IncrementCount()
{
await ProtectedLocalStorage.SetAsync("count", ++currentCount);
}
Enlace y validación de modelos con tipos de registro de C# 9
Es posible usar los tipos de registro, disponibles en C#, con los controladores de MVC o en páginas Razor.
<br />*Person/Index.cshtml* ```razor @model Person Name: <input asp-for="Model.Name" /> <span asp-validation-for="Model.Name" /> Age: <input asp-for="Model.Age" /> <span asp-validation-for="Model.Age" />
Mejoras en DynamicRouteValueTransformer
Desde ASP.NET Core en .NET Core 3.1 tenemos DynamicRouteValueTransformer como una manera de utilizar un endpoint personalizado para seleccionar dinámicamente una acción de controlador MVC o una página de Razor. En .NET 5 Preview 8 podemos pasar el estado a su DynamicRouteValueTransformer y filtrar el conjunto de puntos de conexión elegidos.
Actualización automática con dotnet watch
En .NET 5, dotnet watch se ejecuta en un proyecto ASP.NET Core al iniciar el explorador predeterminado y lo actualiza automáticamente a medida que se realizan cambios en el código. Esto significa que podemos abrir un proyecto ASP.NET Core en nuestro editor de texto favorito, ejecutar dotnet watch run una vez y, a continuación, centrarnos en los cambios de código mientras las herramientas controlan la reconstrucción, reinicio y recarga de la aplicación.
Formador de registrador de consola
Como nombramos antes, se realizaron mejoras en el proveedor de registro de consola en la biblioteca Microsoft.Extensions.Logging. Ahora podemos implementar un ConsoleFormatter personalizado para ejercer un control completo sobre el formato y la salida de la consola.
Las API de formateador permiten el formato enriquecido mediante la implementación de un subconjunto de las secuencias de escape VT-100 que son compatibles con la mayoría de los terminales modernos. También podemos detectar si la consola no es compatible que le permite crear un único formateador para todos los terminales.
JSON Console Logger
Además del anterior, tenemos un formateador JSON integrado que emite registros JSON estructurados a la consola. Podemos cambiar el registrador simple predeterminado a JSON.
Conclusión
Mas funcionalidades y caracteristicas para ir probando y estar actualizados apenas este la versión final. En el siguiente post veremos Entity Framerowork Preview 8.
