0

Estoy practicando con Blazor Web App del net 8 (con lo bien que funcionaba el 7).

He creado una aplicación Blazor Web App:

  • Cuentas individuales
  • https
  • Interactive reder mode: Auto (server y webassembly)
  • Interactivity location: Per page/component

Dentro del proyecto del servidor me he creado una carpeta Controllers y he añadido la clase webapi valuesController.

He modificando el program.cs del servidor he añadido: builder.Services.AddControllers(); builder.Services.AddEndpointsApiExplorer();

app.MapControllers();

Ejecuto la aplicación y en el navegador pongo https://localhost:7074/api/values y funciona. El webapi funciona

Me voy al cliente, creo una pagina razor:

@page "/Webapi"
@using System.Net.Http
@using System.Net.Http.Json
@inject HttpClient Http
@rendermode InteractiveAuto

<h3>Webapi</h3>
<p>
    @if (values is not null)
        for (int i=0;i<values.Count;i++)
            {
            <p>@values[i]</p>   
            }
</p>
@code {
    List<string>? values = new List<string>();
    protected override async Task OnInitializedAsync()
        {
        await this.CargaValues();
        }
    protected async Task CargaValues()
        {
        try
            {
            values= await Http.GetFromJsonAsync<List<string>>("/api/values");
            }
        catch 
            {
            
            }
        }
}

Y cuando intento entrar en esa página:

InvalidOperationException: Cannot provide a value for property 'Http' on type 'BlazorAppWebApi.Client.Pages.Webapi'. There is no registered service of type 'System.Net.Http.HttpClient'.

Este es mi program.cs del cliente:

using BlazorAppWebApi.Client;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);

builder.Services.AddAuthorizationCore();
builder.Services.AddCascadingAuthenticationState();
builder.Services.AddSingleton<AuthenticationStateProvider, PersistentAuthenticationStateProvider>();


builder.Services.AddScoped(sp =>
        new HttpClient
            {
            BaseAddress = new Uri(builder.Configuration["FrontendUrl"] ?? "https://localhost:7074")
            });
builder.Services.AddHttpClient();

await builder.Build().RunAsync();

Pero nada, no va el webapi. He probado a añadir otras Services fijandome en un proyecto net7, pero tampoco va.

Alguien me puede decir como registrar el HttpClient?

Muchas gracias

2 respuestas 2

1

Resumen

Me quedo larga la respuesta, así que agrego un pequeño resumen

Veo al menos 3 soluciones:

  • Configurar el proyecto para que se asemeje lo más posible al Blazor antiguo
  • Mantener la configuración nueva, y usar Httpclient después del rendering
  • Programar todos los elementos para aprovechar tanto el rendering del servidor como del cliente

En Blazor Web App se ha cambiado todo y francamente la documentación es malísima para explicar cómo funciona.

Ahora la aplicación se renderiza en el servidor, en el cliente o en ambos y hay 2 conceptos "nuevos" el rendermode y el prerender

Yo pasé una aplicación de .net 7 al 8 y lo que me di cuenta es que cambiar el rendermode afectaba bastante poco, siempre la aplicación busca renderizarse en el servidor. No obstante, cambiando prerender si se lograba cambiar el comportamiento.

Para dejar el Blazor funcionando lo más parecido a como era antes, hay ir que App.razor y dejar:

<HeadOutlet @rendermode="new InteractiveWebAssemblyRenderMode(prerender: false)" />
<Routes @rendermode="new InteractiveWebAssemblyRenderMode(prerender: false)" />

Y en el program.cs

builder.Services.AddRazorComponents()
    .AddInteractiveWebAssemblyComponents();

Si bien la solución anterior funciona, no es lo que te recomiendo ya que hay que acostumbrarse (queramos o no) a cómo va a funcionar Blazor de aquí en adelante.

Como te señalaba anteriormente, Blazor intentará renderizar en el servidor siempre (a menos que cambies el prerender). Este comportamiento te obliga a setear los servicios tanto en el cliente como en el servidor, de lo contrario el servidor no puede renderizar

Tu tienes este servicio en el cliente (program.cs)

builder.Services.AddScoped(sp =>
        new HttpClient
            {
            BaseAddress = new Uri(builder.Configuration["FrontendUrl"] ?? "https://localhost:7074")
            });

Este debe contar con un análogo en el servidor (program.cs del servidor)

builder.Services.AddTransient<HttpClient>();

Esto te solucionará los problemas, salvo los casos en que el servicio utilice javascript, porque el servidor no tiene un motor de javascript para ejecutar ese código. Tu problema es que el HttpClient de Blazor usa internamente el fetch de javascript, esto provoca que no puedas utilizar el OnInitializedAsync para ejecutar aquellos servicios

protected override async Task OnInitializedAsync()
{
  // Aquí no puede ir código que utilice javascript, incluyendo el HttpClient
}

En su lugar debes utilizar

protected override async Task OnAfterRenderAsync(bool firstrender)
{
    if (firstrender)
    {
        await this.CargaValues();
        // base.StateHasChanged(); //esto puede ser necesario en algunos casos
    }
}

Ya que ese evento se lanzar después del render (como su nombre lo indica)


La solución anterior tampoco es la buena, porque estamos desaprovechando lo nuevo que nos ofrece Blazor, que es poder renderizar en el servidor y en el cliente según se den las circunstancias.

Si el servidor puede renderizar, y el servidor tiene acceso a la base de datos ¿Por qué mejor no le entregamos lo datos directamente en lugar de usar una API? En teoría esto te dará el doble de trabajo, pero si tienes tus clases y modelos bien ordenados no será tanto. En cualquier caso, el resultado final será una aplicación sumamente rápida.

Digamos que tenemos que obtener una lista de enteros List<int>

En el cliente

1.- Creamos una Interface y una clase

public interface IData
{
    Task<List<int>> Get();
}
public class Data : IData
{
    public readonly HttpClient client = new HttpClient();

    public Data(HttpClient client)
    {
        this.client = client;
    }

    public async Task<List<int>> Get()
    {
        return await client.GetFromJsonAsync<List<int>>("URL_API");
    }

    //Aquí más metodos, para insertar, actualizar, etc (estos métodos también deben estar en la interface de arruba)
}

En el program.cs

builder.Services.AddTransient(sp =>
        new HttpClient
        {
            BaseAddress = new Uri(builder.HostEnvironment.BaseAddress),

        });

builder.Services.AddSingleton<IData,Data>();

Y lo usamos en alguna Page

@page "/"
@inject BlazorApp1.Client.Servicio.IData data;
<PageTitle>Home</PageTitle>

<ul>
@foreach(var i in lista){
    <li>@i</li>
}
</ul>
@code{
    public List<int> lista =new();

    protected override async Task OnInitializedAsync()
    {
         lista = await data.Get();
    }
}

En El servidor

Debemos replicar el servicio en el servidor

Creamos otra clase Data pero en el servidor

public class DataServidor : IData //La interface la referenciamos directamente desde el cliente, no hay que crear otra nueva
{
    public async Task<List<int>> Get()
    {
        //En la práctica estos datos deberían venir desde la base de datos
        var a = new List<int>() { 1,2 };
        return a;
    }
}

Luego en el program.cs del servidor

builder.Services.AddSingleton<IData, DataServidor>();
8
  • Estoy de acuerdo en que intentar hacer en el 8 lo que se hacia en el 7 no es lo mejor. EL problema es que no tengo una clase, tengo 20 (y seguramente haya que añadir mas) y algunas vistas, generadas desde Sql Server con EF, ¿hay que añadir las 20 clases una a una en el program? A Esto le veo mucho trabajo "horrible" de mantenimiento ¿No se le puede decir que añada todas las clases "IData" de una carpeta que este en un proyecto compartido?.
    – Juanjo
    Commented el 14 jun. a las 5:21
  • @Juanjo No necesariamente, eso dependerá de cómo tengas estructurado tu proyecto, me parece que como lo hicieron está pensado para usar el paradigma DDD (que a mí no me gusta). Además tienes que tener en cuenta que no es necesario realizarlo para TODAS las API, solo para las que se renderizan en el servidor, por ejemplo cuando haces un post para guardar no va a ser necesario, porque ese proceso es post rendering
    – Yussef
    Commented el 14 jun. a las 6:05
  • Me quedé pensando en esto que preguntaste al final: ¿No se le puede decir que añada todas las clases "IData" de una carpeta que este en un proyecto compartido?. Puedes explicar mejor la idea????
    – Yussef
    Commented el 14 jun. a las 6:09
  • Estimo que mi base de datos va a tener unas 20 tablas, según la solución más actual habría que añadir "manualmente" 20 líneas al programa del servidor como esta builder.Services.AddSingleton<IDtata..... ¿no se puede automatizar? A parte, yo uso databasefirst, habría que ir modificando cada clase que se genera, cada vez que se actualice el modelo, hay que ir clase por clase modificandolas (aunque tengo solución para esto).
    – Juanjo
    Commented el 14 jun. a las 8:29
  • @Juanjo En rigor podrías colocar las 20 líneas, pero coincidimos que es mala idea. Pienso que puedo tener la solución a tu problema, pero creo que lo mejor es que realices otra pregunta (preguntando esto específicamente), porque esta respuesta ya es bastante larga como para agregar aún más código
    – Yussef
    Commented el 14 jun. a las 10:20
0

Por si a alguien le interesa.

Con las indicaciones de @Yussef y esta página que encontre: https://auth0.com/blog/call-protected-api-from-blazor-web-app/

Hice lo siguiente para que me funcionara el webapi.

En el program.cs del cliente añadí estas lineas:

string baseAddress = builder.Configuration.GetValue<string>("BaseUrl") ?? "https://localhost:7074";
builder.Services.AddScoped(sp =>
                new HttpClient
                    {
                    BaseAddress = new Uri(baseAddress)
                    });

builder.Services.AddHttpClient("ServerAPI",
            client => client.BaseAddress = new Uri(baseAddress));
builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>()
    .CreateClient("ServerAPI"));

En el program.cs del servidor tuve que añadir:

string baseAddress = builder.Configuration.GetValue<string>("BaseUrl")??"https://localhost:7074";
builder.Services.AddScoped(sp =>
                new HttpClient
                    {
                    BaseAddress = new Uri(baseAddress)
                    });

builder.Services.AddHttpClient("ServerAPI",
            client => client.BaseAddress = new Uri(baseAddress));
builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>()
    .CreateClient("ServerAPI"));
builder.Services.AddHttpClient();

y en el appsetting.json añadi:

  "BaseUrl": "https://localhost:7074"

Ahora ya funciona el webapi tanto al cargar la página de primeras como al recargarla pasados unos minutos.

Lo que no se es por que no me coge la variable builder.HostEnvironment.BaseAddress, que es por lo que he tenido que modificar el appsetting.json y añadir BaseUrl

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.