Ejercicio: Creación de un controlador de eventos de Blazor para eventos onclick
Blazer le ofrece la capacidad de conectar código de C# a eventos HTML de DOM. Usará esta capacidad para mejorar una aplicación existente.
Como parte de un equipo de desarrollo que trabaja para mejorar un aplicación Pizza de Blazing, se le ha pedido que termine el proceso de finalización de la compra para capturar las direcciones de los clientes. Agregará algunos campos de texto y mejorará el proceso de finalización de la compra.
En este ejercicio, clonará una aplicación existente y creará un nuevo componente de dirección para capturar los detalles de dirección. Con los campos ya definidos, establecerá el foco en el primer campo del formulario.
Clonación de la aplicación existente del equipo
Nota:
En este módulo se usan la CLI (interfaz de la línea de comandos) de .NET y Visual Studio Code para el desarrollo local. Cuando complete este módulo, podrá aplicar los conceptos mediante Visual Studio (Windows), Visual Studio para Mac (macOS), o seguir con el desarrollo mediante Visual Studio Code (Windows, Linux y macOS).
En este módulo se usa el SDK de .NET 6.0. Asegúrese de que tiene instalado .NET 6.0 mediante la ejecución del siguiente comando en la terminal que prefiera:
dotnet --list-sdks
Verá un resultado similar al siguiente:
3.1.100 [C:\program files\dotnet\sdk]
5.0.100 [C:\program files\dotnet\sdk]
6.0.100 [C:\program files\dotnet\sdk]
Asegúrese de que aparezca una versión que comience en 6
. Si no aparece ninguna o no se encuentra el comando, instale el SDK más reciente de .NET 6.0.
Si no ha creado antes una aplicación de Blazor, siga las instrucciones de instalación de Blazor para instalar la versión correcta de .NET y compruebe que la máquina esté configurada correctamente. Deténgase en el paso Create your app (Creación de la aplicación).
Abra Visual Studio Code.
Abra el terminal integrado desde Visual Studio Code; para ello, seleccione Ver y luego Terminal integrado en el menú principal.
En el terminal, navegue hasta donde quiere que se cree el proyecto.
Clone la aplicación desde GitHub.
git clone https://github.com/MicrosoftDocs/mslearn-use-forms-in-blazor-web-apps.git BlazingPizza
Seleccione Archivo y luego Abrir carpeta…
En el cuadro de diálogo Abrir, navegue hasta la carpeta BlazingPizza y seleccione Seleccionar carpeta.
Es posible que Visual Studio Code le pregunte sobre las dependencias sin resolver. Seleccione Restaurar.
Ejecute la aplicación para comprobar que todo funcione correctamente.
En Visual Studio Code, presione F5 o seleccione Ejecutar>Iniciar depuración.
Pruebe a configurar algunas pizzas y agregarlas al pedido. Seleccione Order> (Pedir) al final de la página. Verá la página actual de finalización de la compra.
Presione Mayús + F5 para detener la ejecución de la aplicación.
Refactorización de la página de finalización de la compra
En el explorador de archivos de Visual Studio Code, expanda Pages y, después, seleccione Checkout.razor.
Por el momento, la página de finalización de la compra solo muestra la lista de pizzas que se han configurado. Se le ha pedido que refactorice la página para incluir una sección de dirección.
Reemplace el bloque HTML
<div class="main">
existente para que tenga dos columnas para los datos.<div class="main"> <div class="checkout-cols"> <div class="checkout-order-details"> <h4>Review order</h4> <OrderReview Order="Order" /> </div> <div class="checkout-delivery-address"> <h4>Deliver to...</h4> <AddressEditor Address="Order.DeliveryAddress" /> </div> </div> <button class="checkout-button btn btn-warning" @onclick="PlaceOrder" disabled=@isSubmitting> Place order </button> </div>
El código anterior conecta el evento
onclick
de HTML del elemento de botón al métodoPlaceOrder
de Blazor en el bloque@code
.La refactorización hace referencia a dos nuevos controles de Blazor,
OrderReview
yAddressEditor
. Moverá el código anterior de finalización de la compra que enumera las pizzas al componenteOrderReview
.En el explorador de archivos, haga clic con el botón derecho en Shared y luego seleccione Nuevo archivo.
Escriba OrderReview.razor como nombre de archivo.
Agregue un bucle
foreach
para mostrar las pizzas de un pedido.@foreach (var pizza in Order.Pizzas) { <p> <strong> @(pizza.Size)" @pizza.Special.Name (£@pizza.GetFormattedTotalPrice()) </strong> </p> } <p> <strong> Total price: £@Order.GetFormattedTotalPrice() </strong> </p> @code { [Parameter] public Order Order { get; set; } }
En el explorador de archivos, haga clic con el botón derecho en Shared y luego seleccione Nuevo archivo.
Escriba AddressEditor.razor como nombre de archivo.
Agregue código que use un elemento
input
para cada campo de una dirección. La claseAddress
de la carpeta Model le muestra todos los campos.<div class="form-field"> <label>Name:</label> <div> <input @bind="Address.Name" /> </div> </div> <div class="form-field"> <label>Line 1:</label> <div> <input @bind="Address.Line1" /> </div> </div> <div class="form-field"> <label>Line 2:</label> <div> <input @bind="Address.Line2" /> </div> </div> <div class="form-field"> <label>City:</label> <div> <input @bind="Address.City" /> </div> </div> <div class="form-field"> <label>Region:</label> <div> <input @bind="Address.Region" /> </div> </div> <div class="form-field"> <label>Postal code:</label> <div> <input @bind="Address.PostalCode" /> </div> </div> @code { [Parameter] public Address Address { get; set; } }
Prueba de la nueva página de finalización de la compra
En Visual Studio Code, presione F5 o seleccione Ejecutar>Iniciar depuración.
Agregue algunas pizzas y seleccione Order > (Pedir) para ver el nuevo flujo de finalización de la compra.
Presione Mayús + F5 para detener la aplicación en ejecución.
Mejora de la facilidad de uso del formulario
Cuando el cliente se dirige a la página de finalización de la compra, lo primero que hace es escribir su nombre. Blazor permite establecer el foco en los elementos HTML de una página. Para mejorar la aplicación, vamos a agregar lo siguiente.
En AddressEditor.razor, cambie el código HTML del elemento
input
de nombre para agregar@ref="startName"
.<input @ref="startName" @bind="Address.Name" />
La directiva de Blazor
@ref="startName"
permite al bloque de código crear un elementoElementReference
para hacer referencia al elemento de entrada. A continuación, puede usar esta referencia de elemento para llamar aFocusAsync
después de que se ha representado una página.Agregue código para llamar a
FocusAsync
después de que se haya cargado una página en la declaración[Parameter] public Address Address { get; set; }
.private ElementReference startName; protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await startName.FocusAsync(); } }
Este código crea
ElementReference
y, después de que se ha representado una página, establece el foco en el campoName
.En Visual Studio Code, presione F5 o seleccione Ejecutar>Iniciar depuración.
Agregue algunas pizzas y seleccione Order > (Pedir) para ver que, en la página de finalización de la compra, el foco está en el campo de formulario Name (Nombre).
Presione Mayús + F5 para detener la ejecución de la aplicación.