Bueno, bueno, bueno. Estoy empezando a conocer Blazor, el nuevo framework de Microsft para las SPA (Single Page Aplication), y la verdad que me esta encantando. Pero como siempre yo soy un poco loco, y cuando me pongo a aprender algo nuevo, al tiempo intento realizar algun projecto, mas que sea una tonteria propia para practicar. El caso es que note que en todos los componentes, y ¿que son componentes? te puedes preguntar, para eso te redirecciono a este fantastico curso de TI Capacitación en el que podrás aprender desde el principio.
Como comentaba, en todos los componentes, o en el 90% de los mismos, vas a utilizar una serie de dependencias, claro que siempre dependerá de lo que haga tu aplicación, y para no tener que estar siempre escribiendo lo mismo, es algo que yo odio, sobre todo si de repente necesitas de una nueva dependencia en todas las páginas. Con este pequeño truco que te traigo en esta ocasión, podrás realizar esta tarea de una manera, digamos, fácil, rápida, y sobre todo, centralizada.
Comencemos
En mi caso, las dependencias que necesitaba en la mayoría de las páginas son¨
- HttpClient
- NAvigationManager
- IJSRuntime
- ILogger
Por lo que mi ejemplo va a implemtar estas dependencias. Vamos paso a paso.
Preparar un interface
Primero creamos in interface que exponga los métodos que devolverán las dependencias heredadas.
using System.Net.Http;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Logging;
using Microsoft.JSInterop;
namespace Browser.Client.Services
{
///
/// Service interface for our DefaultServices service
///
public interface IDefaultServices
{
public HttpClient httpClient { get;}
public NavigationManager navigation { get;}
public IJSRuntime jsRuntime { get;}
public ILogger Logger { get;}
}
}
Luego necesitamos definir una clase con un constructor el cual reciba las dependencias y que herede del interface que hemos creado.
using Browser.Client.Pages.Account;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Logging;
using Microsoft.JSInterop;
using System.Net.Http;
namespace Browser.Client.Services
{
public DefaultServices(HttpClient Client,
NavigationManager nav,
IJSRuntime js,
ILogger logger)
{
this.Client = Client;
this.Navigation = nav;
this.JsRuntime = js;
this.Logger = logger;
this.User = new UserContext(js);
}
public UserContext User { get; }
public HttpClient Client { get; }
public NavigationManager Navigation { get; }
public IJSRuntime JsRuntime { get; }
public ILogger Logger { get; }
}
Configurar nuestra app
Ahora necesitamos hacer que nuestra app cree un servicio para poder invocar a esta clase y su interface. Por lo tanto en el archivo Program.cs agegaremos una línea como:
builder.Services.AddScoped();
Con esto ya tenemos el sistema preparado para poder injectar este interface en cualquier página, y así, heredar de una vez todos los interfaces que se van a utilizar en la misma.
Utilización
En el componente donde necesites todas las depencias en lugar de tener 4 líneas al comienzo en plan:
@inject HttpClient httpClient
@inject NavigationManager navigation
@inject IJSRuntime jsRuntime
@inject ILogger Logger
Podremos utilizar sólo una:
@inject Browser.Client.Services.IDefaultServices services
Y desde el código, bueno aqui hay una pequeña pega, como son métodos, y no propiedades, queda un poco loko el uso, pero no hay otra manera de hacerlo, por ahora que yo sepa.
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
services.jsRuntime().Focus("txtNombre");
}
}
protected bool Clicked = false;
async Task SendLoginRequest()
{
if (!Clicked)
{
Clicked = true;
StateHasChanged();
try
{
services.Logger().LogInformation("Click in login");
await services.httpClient().PostAsJsonAsync("account/register", user);
}
catch (Exception ex)
{
services.Logger().LogError(ex, "Register Component Error");
Console.WriteLine(ex.Message);
}
}
}
He resaltado un poco más negritas las partes del código dónde se está llamando a las injecciones de las dependencias.
Conclusiones
Realmente
Blazor, ya sea en modo Servidor o Webasembly, para los que no les gusta el JAVASCRIPT, es una solución perfecta para poder crear interfaces de usuario super eficientes. A mi, como ya comenté al principio, me está encantando, aún estoy muy verde, y como de costumbre, comparto mis locuras cuando consigo hacer algo
fuera de lo común. Agradecer a
Miguel y
Eduardo su ayuda en el grupo de Facebook
Blazor Grupo de Apoyo, sin los cuales estaría aun perdido para realizar esta tarea.
#trucos #blazor #CSHARP #CORE
Actualización 5 Abril 2021
Se ha actualizado el código eliminado la declaración de Métodos para user Propiedades.