Realizaremos la creación de la App Web que consumirá la Web API.
Crearemos un nuevo proyecto y seleccionaremos Blazor Server App.
Tecleamos el nombre de la app y seleccionamos su ubicación.
Seleccionamos .NET 7.0, dejamos las opciones por default y presionamos Create.
Una vez creado el proyecto, presionamos https, para verificar su funcionamiento.
Si no existe ningún error al crear el proyecto se visualizará la App Web.
Lo excelente de Blazor es que puedes utilizar el mismo código para Móvil y Web.
Instalamos el NuGet Newtonsoft.Json.
Creamos un folder llamado Models y dentro una clase llamada RegistroResponseModel.cs que contendrá los campos con los cuales realizaremos el CRUD.
En la clase MainResponseModel.cs manejaremos las respuestas de los procesos, IsSuccess puede ser True o False dependiendo la respuesta de la operación, ErrorMessage tendrá el error que se generó y Content tendrás el mensaje de la operación.
También crearemos un folder llamado Services y dentro una interfase llamada IRegistroService.cs. que contendrá los métodos para realizar los procesos.
Creamos la clase RegistroService.cs dentro del folder Services, en dicha clase implementaremos los métodos de la interfase, de inicio solo implementaremos el método para visualizar todos los registros de la API.
Registramos el servicio en Program.cs.
Editamos la página Pages\Index.razor e inyectamos el servicio IRegistroService.cs y tecleamos el código para mostrar todos los registros en la tabla.
También la página Pages\Index.razor creamos el inicializador que llamara el punto se servicio para obtener la lista de todos los registros.
Ejecutamos la App y verificamos que se muestren los registros en la pantalla inicial.
Ahora crearemos una página con la cual realizaremos el CRUD, botón derecho sobre la carpeta Pages, seleccionamos Add/Razor Component... y tecleamos el nombre de la página NuevoEditaRegistro.razor.
Asignamos el nombre "/nuevoRegistro", llamamos Model e inyectamos los servicios.
Creamos un poco de diseño con Bootstrap para llamar los INPUT de los campos.
Para poder revisar nuestro avance necesitamos llamar la página desde el navegador, para esto, editamos Shared/NavMenu.razor, podemos copiar todo el bloque y solo llamamos "nuevoRegistro" de la página NuevoEditaRegistro.razor.
Ejecutamos la App, seleccionamos + Nuevo registro del menú, podremos visualizar los campos para teclear la información del nuevo registro.
Realizamos el código para el nuevo registro, serializamos el contenido con var serializeContent = JsonConvert.SerializeObject(registroRequest); posteriormente utilizamos el evento PostAsync(), validamos que todo este correcto y leemos los datos en var response = await apiResponse.Content.ReadAsStringAsync(); posteriormente deserealizamos con returnResponse = JsonConvert.DeserializeObject<MainResponseModel>(response);, por último, la variable url llama la ruta del Web API.
Editamos NuevoEditaRegistroRequest.cs y agregamos el método NuevoEditaRegistroDetalle(), que será donde realizamos el alta de nuevo registros, así como la modificación de los mismos.
Crearemos propiedades private de todos los campos con private int folio;, crearemos un objecto con los datos a actualizar del modelo NuevoEditaRegistroRequest.cs con var nuevoeditaRegistroRequest = new NuevoEditaRegistroRequest y las vinculamos con Folio = folio, también debemos vincular las propiedades con los INPUT con @bind="folio", llamaremos var response = await RegistroService.AddRegistro(nuevoeditaRegistroRequest); y en caso de no haber ningún error se inicializan los campos y se visualiza el mensaje de alta efectuada, por último asignamos @onclick="NuevoEditaRegistroDetalle" al botón Grabar.
Para los mensajes inyectaremos IJSRuntime.
Y los invocaremos cuando grabemos el registro o nos muestre un error.
Ejecutamos la App, tecleamos los datos de un nuevo registro y presionamos Grabar, si no existe ningún error se visualizará el mensaje "El registro ha sido agregado".
Editar y modificar registro
Crearemos los métodos para actualizar y buscar registros en la Services\IRegistroService.cs.
Implementáremos los métodos de la interfase en Services\RegistroService.cs, el método UpdateRegistro() que es muy parecido al método AddRegistro(), para ello utilizaremos en evento PutAsync().
También crearemos el método GetRegistroByID(), ya que, con él, llamaremos la información del registro seleccionado en la lista, para ello utilizaremos en evento GetAsync().
Editamos la página Pages\Index.razor y agregamos la siguiente línea @page "/editaRegistro/{registroID:int}", con ello indicamos que utilizaremos la página para editar el registro llamado el ID.
También agregamos una propiedad como Parameter con la cual obtendré el ID del registro.
Crearemos un nuevo método para sincronizar el inicializador que llamara la API con los datos existentes del registro, para ello utilizaremos el método GetRegistroByID() que se ubica en Services\RegistroService.cs.
En el procedimiento NuevoEditaRegistroDetalle() de la página Pages\NuevoEditaRegistro.razor, agregamos la condición para grabar los cambios de los registros, llamaremos el método UpdateRegistro().
Ejecutamos la App, presionamos el botón Editar de algún registro.
Modificamos el contenido de los campos y presionamos el botón Grabar, si no existe ningún error se visualizará el mensaje "Los cambios han sido guardados".
Eliminar registro
Por último, realizaremos la eliminación del registro, agregamos el método DeleteRegistro() en la interfase Services\IRegistroService.cs.
Implementaremos el método de la interfase en Services\IRegistroService.cs, llamaremos la url DeleteRegistro de nuestra Web API, para eliminar un registro se necesita un identificador por eso no podemos llamar DeleteAsync(), en su caso llamaremos una solicitud de tipo mensaje http con var request = new HttpRequestMessage(); configuraremos el método de punto de solicitud para eliminar los puntos con request.Method = HttpMethod.Delete; llamaremos la información de la url con request.RequestUri = new Uri(url); el contenido del punto llamara la información serializada con request.Content = new StringContent(serializeContent, Encoding.UTF8, "application/json"); y el vez de llamar DeleteAsync() llamare el método de enviar SendAsync() para que la solicitud sea aprobada.
Editamos la página Pages\NuevoEditaRegistro.razor e inyectamos la referencia del navegador.
También creamos un botón para eliminar el registro y adicionamos una condición donde indicamos si el ID es mayor a 0 se muestre el botón Eliminar.
Creamos el procedimiento para eliminar el registro, una vez eliminador el registro se envia el control de la página Pages\Index.razor utilizando el navegador NavManager.NavigateTo("/");.
Ejecutamos la App, editamos algún registro y presionamos el botón Eliminar.
Si no existe ningún error se elimina el registro y se envía el control a la lista de los registros.
.jpg)
0 Comentarios