Acceso a datos desde un componente Blazor

Los sitios web atractivos necesitan mostrar contenido dinámico que pueda cambiar todo el tiempo. Aprender a obtener datos de un origen dinámico, como una base de datos o un servicio web, es una técnica fundamental en el desarrollo web.

Supongamos que está trabajando para una empresa de entrega de pizzas en su sitio web actualizado orientado al cliente. Tiene una variedad de páginas web expuestas y diseñadas como componentes de Blazor. Ahora, desea rellenar esas páginas con información sobre pizzas, ingredientes y pedidos que desea obtener de una base de datos.

En esta unidad, aprenderá a acceder a los datos y a representarlos dentro del marcado HTML para mostrarlos al usuario.

Creación de un servicio de datos registrado

Si desea crear un sitio web dinámico que muestre el cambio de información a los usuarios, debe escribir código para obtener esos datos desde algún lugar. Por ejemplo, supongamos que tiene una base de datos que almacena todas las pizzas que vende su empresa. Dado que las pizzas siempre cambian, es una mala idea codificarlas en el html del sitio web. En su lugar, use código de C# y Blazor para consultar la base de datos y, a continuación, dar formato a los detalles como HTML para que el usuario pueda elegir su favorito.

En una aplicación Blazor Server, puede crear un servicio registrado para representar un origen de datos y obtener datos de él.

La creación de un servicio registrado comienza escribiendo una clase que define sus propiedades. Este es un ejemplo que puede escribir para representar una pizza:

namespace BlazingPizza.Data;

public class Pizza
{
    public int PizzaId { get; set; }
    
    public string Name { get; set; }
    
    public string Description { get; set; }
    
    public decimal Price { get; set; }
    
    public bool Vegetarian { get; set; }
    
    public bool Vegan { get; set; }
}

La clase define las propiedades y los tipos de datos de la pizza. Debe asegurarse de que estas propiedades coinciden con el esquema de pizza del origen de datos. Tiene sentido crear esta clase en la carpeta Data del proyecto y usar un espacio de nombres de miembro denominado Data. Si lo prefiere, puede elegir otras carpetas y espacios de nombres.

A continuación, definiría el servicio:

namespace BlazingPizza.Data;

public class PizzaService
{
    public Task<Pizza[]> GetPizzasAsync()
    {
    // Call your data access technology here
    }
}

Observe que el servicio usa una llamada asincrónica para acceder a los datos y devolver una colección de Pizza objetos. El origen de datos puede ser remoto desde el servidor donde se ejecuta el código blazor. En ese caso, use una llamada asincrónica. A continuación, si el origen de datos responde lentamente, otro código puede seguir ejecutándose mientras espera la respuesta.

Para registrar el servicio, agregue una línea a la Add Services to the container sección del archivo Program.cs :

...
// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
// Register the pizzas service
builder.Services.AddSingleton<PizzaService>();
...

Uso de un servicio para obtener datos

Ahora usa el servicio que definió llamándolo en un componente Blazor y obteniendo datos. Supongamos que tiene el código de componente siguiente y quiere mostrar pizzas en él:

@page "/pizzas"

<h1>Choose your pizza</h1>

<p>We have all these delicious recipes:</p>

Inserción del servicio

Para poder invocar el servicio desde el componente, debe usar la inyección de dependencias para agregar el servicio. Inserte el servicio agregando el código siguiente después de la @page directiva :

@using BlazingPizza.Data
@inject PizzaService PizzaSvc

Normalmente, el componente y el servicio están en distintos miembros del espacio de nombres, por lo que debe incluir la directiva @using. Esta directiva funciona de la misma manera que una using instrucción en la parte superior de un archivo de código de C#. La @inject directiva agrega el servicio al componente actual e inicia una instancia de él. En la directiva , especifique el nombre de la clase de servicio. Agregue a continuación el nombre que desea usar para la instancia del servicio en este componente.

Invalidación del método OnInitializedAsync

Un buen lugar para llamar al servicio y obtener datos es el método OnInitializedAsync. Este evento se desencadena cuando se completa la inicialización del componente y recibe sus parámetros iniciales, pero antes de que la página se represente y se muestre al usuario. El evento se define en la clase base del componente Blazor. Puede invalidarlo en un bloque de código como en este ejemplo:

protected override async Task OnInitializedAsync()
{
    \\ Call the service here
}

Llamada al servicio para obtener datos

Cuando llame al servicio, use la await palabra clave porque la llamada es asincrónica:

private Pizza[] todaysPizzas;

protected override async Task OnInitializedAsync()
{
    todaysPizzas = await PizzaSvc.GetPizzasAsync();
}

Mostrar datos al usuario

Después de obtener algunos datos del servicio, querrá mostrarlos al usuario. En el ejemplo de pizzas, esperamos que el servicio devuelva una lista de pizzas entre las que los usuarios pueden elegir. Blazor incluye un amplio conjunto de directivas que puede usar para insertar estos datos en la página que ve el usuario.

Comprobación de datos

En primer lugar, determinamos qué muestra la página antes de que se carguen las pizzas comprobando si la todaysPizzas colección es null. Para ejecutar código de representación condicional en un componente blazor, use la @if directiva :

@if (todaysPizzas == null)
{
    <p>We're finding out what pizzas are available today...</p>
}
else
{
    <!-- This markup will be rendered once the pizzas are loaded -->
}

La @if directiva representa el marcado en su primer bloque de código solo si la expresión de C# devuelve true. También puede usar un bloque de código else if para ejecutar otras pruebas y representar el marcado si son true. Por último, puede especificar un else bloque de código para representar el código si ninguna de las condiciones anteriores devolvió true. Al comprobar si hay elementos null en el bloque de código @if, se asegura de que Blazor no intenta mostrar los detalles de la pizza antes de que se hayan obtenido los datos del servicio.

Representación de una colección de objetos

Si Blazor ejecuta la instrucción else en el código anterior, sabrá que se han obtenido algunas pizzas del servicio. La siguiente tarea es mostrar estas pizzas al usuario. Veamos cómo mostrar los datos en una tabla HTML simple.

No sabemos cuántas pizzas están disponibles cuando codificamos esta página. Podemos usar la @foreach directiva para recorrer en bucle todos los objetos de la todaysPizzas colección y representar una fila para cada una de ellas:

<table>
 <thead>
  <tr>
   <th>Pizza Name</th>
   <th>Description</th>
   <th>Vegetarian?</th>
   <th>Vegan?</th>
   <th>Price</th>
  </tr>
 </thead>
 <tbody>
  @foreach (var pizza in todaysPizzas)
  {
   <tr>
    <td>@pizza.Name</td>
    <td>@pizza.Description</td>
    <td>@pizza.Vegetarian</td>
    <td>@pizza.Vegan</td>
    <td>@pizza.Price</td>
   </tr>
  }
 </tbody>
</table>

Probablemente quiera una visualización más completa de pizzas que la tabla simple que se muestra en este ejemplo. Es posible que quiera dar formato al precio y a otros valores. Trabaje con sus diseñadores gráficos para desarrollar una interfaz de usuario más atractiva. Por ejemplo, incluya imágenes de cada pizza.

En la próxima unidad, registrarás tu propio servicio de datos.