Ejercicio: Mejora de la interactividad de aplicaciones con eventos del ciclo de vida

Completado

La compañía de pizzas ha decidido que les gustaría vender una pizza especial de tamaño familiar que solo está disponible en un tamaño de 24 pulgadas. La aplicación de pizza actual tiene un control deslizante de tamaño que no admite una pizza de tamaño único. Se le pedirá que agregue la nueva pizza de tamaño familiar y deshabilite la opción de tamaño para esa pizza.

En este ejercicio, cambiará la base de datos de pizzas para agregar la pizza de tamaño familiar y cambiará el modelo de pizza para admitir la nueva pizza. Para controlar los eventos de ciclo de vida de los componentes de Blazor, realice cambios en el cuadro de diálogo de configuración de pizzas para controlar el caso de tamaño fijo.

Creación de la nueva pizza de tamaño familiar

En primer lugar, agregue la nueva funcionalidad FixedSize al modelo de pizza y cree la nueva pizza de tamaño familiar en la base de datos de pizzas.

1. En el Explorador de Visual Studio Code, expanda Modelos y seleccione PizzaSpecial.cs.

2. En el archivo PizzaSpecial.cs, después de la propiedad ImageUrl, agregue la siguiente propiedad nueva:

   public int? FixedSize { get; set; }
   

3. Abra Pizza.cs y reemplace el método GetBasePrice por el código siguiente:

   public decimal GetBasePrice() =>
       Special is { FixedSize: not null }
           ? Special.BasePrice
           : (decimal)Size / DefaultSize * Special?.BasePrice ?? 1;
   

   El código ahora tiene en cuenta un elemento especial que tiene un valor FixedSize cuando devuelve BasePrice.

4. Expanda Datos y seleccione SeedData.cs.

5. En el archivo SeedData.cs, agregue el código siguiente para la nueva pizza de tamaño familiar al final de la declaración de matriz specials en el método InitializeAsync.

   new()
   {
       Id = 9,
       Name = "Margherita Family Size",
       Description = "24\" of pure tomatoes and basil",
       BasePrice = 14.99m,
       ImageUrl = "img/pizzas/margherita.jpg",
       FixedSize = 24
   }
   

6. La clase SeedData se usa para rellenar previamente la base de datos de pizzas con pizzas especiales. Para que se cree la nueva PizzaSpecial, debe eliminar la base de datos existente. En el Explorador, seleccione y elimine los archivos pizza.db, pizza.db-shm y pizza.db-wal.

7. En Visual Studio Code, presione F5 o seleccione Ejecutar>Iniciar depuración.

8. En la aplicación, seleccione la nueva pizza Margherita Family Size.

   

9. En el formulario de pedido, observe que todavía puede cambiar el tamaño de la pizza.

10. Presione Mayús+F5 o seleccione Ejecutar>Detener depuración para detener la aplicación.

Eliminación del control deslizante de tamaño

El componente ConfigurePizzaDialog usa un elemento range HTML para permitir al cliente seleccionar el tamaño de la pizza. Una manera de deshabilitar la entrada del usuario es omitir condicionalmente la representación del control de usuario de tamaño por completo.

1. En el Explorador de Visual Studio Code, expanda Compartido y seleccione ConfigurePizzaDialog.razor.

2. En la directiva @code, después de las propiedades existentes, agregue los siguientes miembros:

   bool supportSizing = true;
   
   protected override void OnInitialized()
   {
       if (Pizza is { Special.FixedSize: not null })
       {
           Pizza.Size = Pizza.Special.FixedSize.Value;
           supportSizing = false;
       }
   }
   

   El campo supportSizing adopta true como valor predeterminado, pero si la pizza tiene un tamaño fijo, se establece en false. La invalidación del método de ciclo de vida OnInitialized establece el tamaño de la pizza en el tamaño fijo y deshabilita la compatibilidad con el cambio de tamaño.

   Nota

   Si el código tuviera que depender de la interoperabilidad de JavaScript, el uso del método OnInitialized no habría funcionado. En su lugar, tendría que haber usado el método OnAfterRenderAsync para asegurarse de que la interoperabilidad de JavaScript está disponible.

3. Cerca de la parte superior del archivo en <form class="dialog-body">, reemplace las líneas label y input existentes por el código siguiente:

   @if (supportSizing)
   {
       <label>Size:</label>
       <input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize"
           step="1" @bind="Pizza.Size" @bind:event="oninput" />
   }
   

4. Presione F5 o seleccione Ejecutar>Iniciar depuración.

5. Agregue la pizza de tamaño familiar y compruebe que el control deslizante de tamaño está deshabilitado porque se omite de la representación.

   

6. Pida una pizza diferente y compruebe que todavía puede usar el control deslizante de tamaño para esa pizza.

7. Presione Mayús+F5 o seleccione Ejecutar>Detener depuración para detener la aplicación.