Ejercicio: Enlace de controles a datos en aplicaciones Blazor

  • 5 minutos

La aplicación Blazing Pizza debe actualizar la interfaz cuando los clientes modifiquen las pizzas y las agreguen a sus pedidos. Blazor permite enlazar controles HTML a propiedades de C# para actualizar cuando cambian sus valores.

Los clientes deben ver qué pizzas están pidiendo y cómo afecta el tamaño que eligen al precio que pagarán.

En este ejercicio, hará que la aplicación Blazing Pizza permita que los pedidos se puedan actualizar y editar. Verá cómo enlazar controles a las propiedades de una pizza y volver a calcular los precios según los cambios.

Visualización del pedido de pizza de un cliente

Va a agregar una barra lateral que mostrará todas las pizzas que un cliente ha agregado a su pedido.

  1. Detenga la aplicación si todavía está en ejecución.

  2. En Visual Studio Code, expanda Páginas y, después, seleccione Index.razor.

  3. Entre los bloques @if y @code, agregue este código:

    <div class="sidebar">
    @if (order.Pizzas.Any())
    {
        <div class="order-contents">
            <h2>Your order</h2>

            @foreach (var configuredPizza in order.Pizzas)
            {
              <div class="cart-item">
                  <div class="title">@(configuredPizza.Size)" @configuredPizza.Special.Name</div>
                  <div class="item-price">
                      @configuredPizza.GetFormattedTotalPrice()
                  </div>
              </div>
            }
        </div>
    }
    else
    {
        <div class="empty-cart">Choose a pizza<br>to get started</div>
    }

    <div class="order-total @(order.Pizzas.Any() ? "" : "hidden")">
        Total:
        <span class="total-price">@order.GetFormattedTotalPrice()</span>
        <a href="checkout" class="@(OrderState.Order.Pizzas.Count == 0 ? "btn btn-warning disabled" : "btn btn-warning")">
            Order >
        </a>
    </div>
</div>

    Este código HTML agrega una barra lateral a la página. Si hay pizzas en OrderState.Order, las muestra. Si no hay pedidos, se solicita a los clientes que agreguen algunos.

    Verá algunos errores, ya que el componente no sabe cuáles son los pedidos.

  4. Agregue este código en el bloque @code bajo List<PizzaSpecial> specials = new();:

    Order order => OrderState.Order;

  5. Seleccione F5 o Ejecutar. A continuación, seleccione Iniciar depuración.

    Screenshot showing the ordering sidebar.

    Pruebe a pedir algunas pizzas y cancelar otras. Verá que se agregan al carro y las actualizaciones totales del pedido.

  6. Seleccione Mayús+F5 o Detener depuración.

Eliminación de una pizza del pedido de un cliente

Es posible que haya observado que no hay manera de quitar una pizza configurada del carro de la compra del cliente. Vamos a agregar esa funcionalidad.

El primer paso consiste en actualizar el servicio OrderState para que pueda proporcionar un método para quitar pizzas de un pedido.

  1. En el explorador de archivos, seleccione Servicios/OrderState.cs.

  2. En la parte inferior de la clase, agregue este método:

    public void RemoveConfiguredPizza(Pizza pizza)
{
    Order.Pizzas.Remove(pizza);
}

  3. En el explorador de archivos, expanda Páginas y, después, seleccione index.razor.

  4. En <div class="cart-item">, agregue una etiqueta <a> antes de </div> de cierre para crear un botón Quitar:

    <a @onclick="@(() => OrderState.RemoveConfiguredPizza(configuredPizza))" class="delete-item">x</a>

    Esta etiqueta agrega un X a cada pizza en la barra lateral de pedidos. Cuando se selecciona, llama al método RemoveConfiguredPizza en el servicio OrderState.

  5. Seleccione F5 o Ejecutar. A continuación, seleccione Iniciar depuración.

    Screenshot showing the ordering sidebar with an order.

  6. Seleccione Mayús+F5 o Detener depuración.

Configuración dinámica de un tamaño de pizza

El cuadro de diálogo de configuración de pizza no se actualiza cuando se cambia el control deslizante de tamaño. El componente necesita una manera de actualizar la pizza y el tamaño y, entonces, volver a calcular el precio.

  1. En el explorador de archivos, expanda Compartido y, después, seleccione ConfigurePizzaDialog.razor.

  2. Agregue código al control HTML input para enlazar su valor al tamaño de la pizza.

    <input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize" step="1" @bind="Pizza.Size"/>

  3. Seleccione F5 o Ejecutar. A continuación, seleccione Iniciar depuración.

    Use el cuadro de diálogo actualizado para agregar algunas pizzas de diferentes tamaños a su pedido. Haga clic en la barra deslizante en lugar de arrastrar. Observe que el tamaño de la pizza se actualiza con el evento del mouse en el control.

    Si arrastra el control deslizante, el tamaño no cambiará hasta que suelte el mouse. Vamos a solucionarlo.

  4. Seleccione Mayús+F5 o Detener depuración.

  5. Agregue el evento al que se debe enlazar el control.

    <input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize" step="1" @bind="Pizza.Size" @bind:event="oninput" />

  6. Seleccione F5 o Ejecutar. A continuación, seleccione Iniciar depuración.

    Animated screenshot showing pizza size slider.

¿Cómo ha agregado el código @bind="Pizza.Size" tanta funcionalidad? Si examina todo el código ConfigurePizzaDialog.razor, verá que el equipo ya había conectado los demás elementos a las propiedades de la pizza.

Por ejemplo, el precio se actualiza debido a este código:

Price: <span class="price">@(Pizza.GetFormattedTotalPrice())</span>

El precio se actualiza cuando cambia el tamaño de la pizza porque el método GetFormattedTotalPrice() de la pizza usa el tamaño de la pizza para calcular el precio total.

Ha avanzado en la aplicación Blazing Pizza. Si quiere seguir mejorando, complete el módulo siguiente de esta ruta de aprendizaje.