Creando funcionalidad de eliminar usando JavaScript

Clase 17 de 19 • Curso de Aplicaciones Web con Blazor WebAssembly y .NET

Rolando Fernández

student•

Reto de editar producto

Agrego un botón para editar producto en Products.razor

<div class="card">
                <img class="card-img-top" src="@product.Images[0]" alt="@product.Title" loading="lazy" width="270" height="210"/>
                <div class="card-body">
                    <h5><b>@product.Title</b></h5>
                    <p>@product.Price?.ToString("C")</p>
                    <button class="btn btn-danger btn-delete" title="Delete" @onclick="@(() => DeleteProduct(product))">
                        <span class="oi oi-trash"></span>
                    </button>
                    <button class="btn btn-success" title="Delete" @onclick="@(() => GoToEditProduct(product.Id))">
                        <span class="oi oi-pencil"></span>
                    </button>
                </div>
            </div>

Capturo el id del producto y lo mando por parámetro a la vista para editarlo

private void GoToEditProduct(int productId)
    {
        NavigationManager.NavigateTo($"/editproduct/{productId}");
    }

ProductEditForm.razor

@page "/editproduct/{productIdParameter}"
@inject IProductService productService
@inject ICategoryService categoryService
@inject NavigationManager NavigationManager

<PageTitle>Edit Product</PageTitle>

<Title TitleProp="Edit Product"/>

<button class="btn btn-dark" @onclick="GoToProducts">Go to back products</button>

<EditForm Model="@product" OnSubmit="@Save">
    <div class="row">
        <div class="col-8 form-group">
            <label for="title" class="col-form-label">Title</label>
            <InputText class="form-control" id="title" @bind-Value="product.Title" required/>
        </div>
        <div class="col form-group">
            <label for="price" class="col-form-label">Price</label>
            <InputNumber class="form-control" id="price" @bind-Value="product.Price" min="0" required/>
        </div>
    </div>
    <div class="row">
        <div class="col form-group">
            <label for="category" class="col-form-label">Category</label>
            <InputSelect class="form-control" id="category" @bind-Value="product.CategoryId" required>
                <option>Select Category...</option>
                @foreach (var category in categories)
                {
                    <option value="@category.Id">@category.Name</option>
                }
            </InputSelect>
        </div>
        <div class="col form-group">
            <label for="image" class="col-form-label">Image (URL)</label>
            <InputText class="form-control" id="image" @bind-Value="product.Image" required />
        </div>
    </div>
    <div class="form-group">
        <label for="description" class="col-form-label">Description</label>
        <InputTextArea class="form-control" id="description" @bind-Value="product.Description" required />
    </div>
    <hr />
    <button class="btn btn-primary" type="submit">Save</button>
</EditForm>

@code {
    private Product product = new();
    private List<Category> categories { get; set; } = new List<Category>();
    [Parameter]
    public string productIdParameter { get; set; } = "";

    protected override async Task OnInitializedAsync()
    {
         await GetCategories();
         await GetProduct(int.Parse(productIdParameter));
    }

    public override async Task SetParametersAsync(ParameterView parameters)
    {
        if (parameters.TryGetValue<string>(nameof(productIdParameter), out var value))
        {
            productIdParameter = value ?? productIdParameter;
        }
        await base.SetParametersAsync(parameters);
    }

    private void GoToProducts()
    {
        NavigationManager.NavigateTo("/products");
    }

    private async Task GetCategories()
    {
        categories = await categoryService.Get() ?? categories;
    }

    private async Task GetProduct(int productId)
    {
        product = await productService.Get(productId) ?? product;
        product.Image = product.Images[0] ?? "";
    }

    private async Task Save()
    {
        product.Images = new string[1] { product.Image };
        await productService.Update(product);
        GoToProducts();
    }
}

En ProductService.cs agrego 2 funciones para obtener un producto por id y editar un producto

public async Task<Product?> Get(int productId)
    {
        var response = await _client.GetAsync($"v1/products/{productId}");
        var content = await response.Content.ReadAsStringAsync();
        if (!response.IsSuccessStatusCode) throw new ApplicationException(content);
        return JsonSerializer.Deserialize<Product>(content, _serializer);
    }

public async Task Update(Product product)
    {
        var response = await _client.PutAsync($"v1/products/{product.Id}", JsonContent.Create(product));
        var content = await response.Content.ReadAsStringAsync();
        if (!response.IsSuccessStatusCode) throw new ApplicationException(content);
    }

También modifico la interfaz del servicio

public interface IProductService
{
    Task<List<Product>?> Get();
    Task<Product?> Get(int productId);
    Task Add(Product product);
    Task Update(Product product);
    Task Delete(int productId);
}

Rolando Fernández

student•

Agrego una propiedad más en Product para que me traiga los datos de Category

public class Product 
{
    public int Id { get; set; }
    public string Title { get; set; } = "";
    public decimal? Price { get; set; }
    public string Description { get; set; } = "";
    public int CategoryId { get; set; }
    public Category Category { get; set; } = new Category();
    public string[] Images { get; set; } = new string[0];
    public string Image { get; set; } = "";
}

Y modifico la función en ProductEditForm para rellenar ese campo de CategoryId y el Select lo pueda leer correctamente al momento de editar

private async Task GetProduct(int productId)
    {
        product = await productService.Get(productId) ?? product;
        product.Image = product.Images[0] ?? "";
        product.CategoryId = product.Category.Id;
    }

Está modificación del objeto también podría ir en ProductService.cs donde creo que sería mejor.

Jared García

student•

Creo que te falta en el method Update del service el return, no?

Pablo Cesar Lara Londoño

student•

Por acá les dejo la línea de código.

<button title="Delete" class="btn btn-danger btn-delete" @onclick="@(() => DeleteProduct(product))"><span class="oi oi-trash"></span></button>

JIMMY BURITICA

student•

Link del Repositorio

Juan Felipe Barahona Gonzalez

student•

Que se puede hacer para no tener que hacer refresh al sitio?

Miguel Teheran

teacher•

Estamos esperando que hagan ese ajuste, pero en teoría con dotnet watch deberia funcionar para un gran de escenarios.

Luca Cristian Manea

student•

la app no me tira ningun error pero la pagina no refresca la lista de productos, el codigo esta igual que el de clase alguna sugerencia?

Miguel Teheran

teacher•

Pueba forzando que se refresque usando StateHasChanged https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-7.0

Luca Cristian Manea

student•

muchas gracias, se viene un curso mas avanzado con RenderFragment y Dynamic Components? lo use una o dos veces pero no termino de tenerlo claro

David Dzul

student•

Para el reto basicamente es lo mismo, solo hay que agregar la propiedad Category dentro del modelo Product.

Hacer el ajuste para asignar el dato al formulario:

 product.Image = product.Images[0];
 product.CategoryId = product.Category.Id;

Y para poder pasar el parametro yo opte por usar el QueryString:

[Parameter]
[SupplyParameterFromQuery]
public string Id {get;set;}

Jairo Alonso Contreras Mateus

student•

Muy buena tarde, bendiciones,

Una pregunta, por que cuando emulo, lo valores me muestran el simbolo de euro (€) y no el de pesos ($) como se ve en tu reproduccion

3.800,00 € "De esta manera me muestra los valores"

Debo cambiar algo en mi configuración, no he logrado que se vea igual.

El formato lo tengo exactamente igual

<p>@product.Price?.ToString("C")</p>

Mil gracias!

Kevin Castellano

student•

¿Tendrá que ver con tu configuración regional? Probá cambiarla desde tu SO y contanos si te funciona

Jairo Alonso Contreras Mateus

student•

Hola Kev, no debe ser mi configuración regional, te envio pantalla de como está.

Luis Felipe Perdomo Murcia

student•

como puedo hacer que se recargue automaticamente el listado cuando elimino un articulo?

Miguel Teheran

teacher•

debes traer la lista y asignarla nuevamente a la propiedad del componente y automaticamente deberia hacer el refresh

Jose Noriega

student•

En mi caso no hizo el refresh, tuve añadir la siguiente linea después de actualizar la lista.

await InvokeAsync(StateHasChanged);

ROMMEL DUAREZ SAENZ

student•

¿no me permite editar el CategoryID de un producto, los demás campos sí permite, ...siempre es así con la Foreign Key o algo hay que configurar para que se pueda?

Lilián Gómez

student•

si es la llave de la tabla no se puede modificar.

Pablo Cesar Lara Londoño

student•

Deberían dejar los recursos 😔

Juan David Forero

student•

Recuerda que puedes utilizar el comando dotnet watch para ver los cambios de la app en tiempo real.

Oriana Carolina Ailigo

student•

products.razor


@page "/product"

@inject ILogger<Products> logger;
@inject  IProductService productService;
@inject  NavigationManager NavigationManager;
@inject  IJSRuntime IJSRuntime;

<PageTitle>Products</PageTitle>

<ModuleTitle Title="Products"/>
<button class="btn btn-dark" @onclick="@(()=> NavigationManager.NavigateTo("/addproduct"))">  Add Product</button>
@if (products?.Count > 0){
    <div class= "products-container">
            @foreach (var product in products)
            {
                <div class="card">
                    <img class="card-img-top" src="@product.Images[0]" alt="Product" loading="lazy" width ="270" height="210">
                    <div class="card-body">
                        <h5><b>@product.Title</b></h5>
                        <p>@product.Price?.ToString("C")</p>
                        <button title="Delete" class="btn btn-danger btn-delete" @onclick="@(() => DeleteProduct(product))"><span class="oi oi-trash"></span></button>

                    </div>
                </div>
            }
    </div>

 
 }
else{
 <p>
    No hay productos para mostrar.
 </p> 
 
 }

@code{
    private List<Product>? products;

protected override async Task OnInitializedAsync()
{
    await GetProducts();
}
    private async Task GetProducts(){
           products= await productService.Get();
    }
    private async Task DeleteProduct(Product product){
     bool confirmed = await IJSRuntime.InvokeAsync<bool>("confirm", $"Are you sure? { product.Title}");   
        if(!confirmed)
            return; 
        await productService.Delete(product.Id);
        await GetProducts();
    }

 }

Cristian David Boada Padilla

student•

En vez de llamar de nuevo al apícola se puede simplemente remover de la lista

products.Remove(product);

<div class="card">
                <img class="card-img-top" src="@product.Images[0]" alt="@product.Title" loading="lazy" width="270" height="210"/>
                <div class="card-body">
                    <h5><b>@product.Title</b></h5>
                    <p>@product.Price?.ToString("C")</p>
                    <button class="btn btn-danger btn-delete" title="Delete" @onclick="@(() => DeleteProduct(product))">
                        <span class="oi oi-trash"></span>
                    </button>
                    <button class="btn btn-success" title="Delete" @onclick="@(() => GoToEditProduct(product.Id))">
                        <span class="oi oi-pencil"></span>
                    </button>
                </div>
            </div>

@page "/editproduct/{productIdParameter}"
@inject IProductService productService
@inject ICategoryService categoryService
@inject NavigationManager NavigationManager

<PageTitle>Edit Product</PageTitle>

<Title TitleProp="Edit Product"/>

<button class="btn btn-dark" @onclick="GoToProducts">Go to back products</button>

<EditForm Model="@product" OnSubmit="@Save">
    <div class="row">
        <div class="col-8 form-group">
            <label for="title" class="col-form-label">Title</label>
            <InputText class="form-control" id="title" @bind-Value="product.Title" required/>
        </div>
        <div class="col form-group">
            <label for="price" class="col-form-label">Price</label>
            <InputNumber class="form-control" id="price" @bind-Value="product.Price" min="0" required/>
        </div>
    </div>
    <div class="row">
        <div class="col form-group">
            <label for="category" class="col-form-label">Category</label>
            <InputSelect class="form-control" id="category" @bind-Value="product.CategoryId" required>
                <option>Select Category...</option>
                @foreach (var category in categories)
                {
                    <option value="@category.Id">@category.Name</option>
                }
            </InputSelect>
        </div>
        <div class="col form-group">
            <label for="image" class="col-form-label">Image (URL)</label>
            <InputText class="form-control" id="image" @bind-Value="product.Image" required />
        </div>
    </div>
    <div class="form-group">
        <label for="description" class="col-form-label">Description</label>
        <InputTextArea class="form-control" id="description" @bind-Value="product.Description" required />
    </div>
    <hr />
    <button class="btn btn-primary" type="submit">Save</button>
</EditForm>

@code {
    private Product product = new();
    private List<Category> categories { get; set; } = new List<Category>();
    [Parameter]
    public string productIdParameter { get; set; } = "";

    protected override async Task OnInitializedAsync()
    {
         await GetCategories();
         await GetProduct(int.Parse(productIdParameter));
    }

    public override async Task SetParametersAsync(ParameterView parameters)
    {
        if (parameters.TryGetValue<string>(nameof(productIdParameter), out var value))
        {
            productIdParameter = value ?? productIdParameter;
        }
        await base.SetParametersAsync(parameters);
    }

    private void GoToProducts()
    {
        NavigationManager.NavigateTo("/products");
    }

    private async Task GetCategories()
    {
        categories = await categoryService.Get() ?? categories;
    }

    private async Task GetProduct(int productId)
    {
        product = await productService.Get(productId) ?? product;
        product.Image = product.Images[0] ?? "";
    }

    private async Task Save()
    {
        product.Images = new string[1] { product.Image };
        await productService.Update(product);
        GoToProducts();
    }
}

public async Task<Product?> Get(int productId)
    {
        var response = await _client.GetAsync($"v1/products/{productId}");
        var content = await response.Content.ReadAsStringAsync();
        if (!response.IsSuccessStatusCode) throw new ApplicationException(content);
        return JsonSerializer.Deserialize<Product>(content, _serializer);
    }

public async Task Update(Product product)
    {
        var response = await _client.PutAsync($"v1/products/{product.Id}", JsonContent.Create(product));
        var content = await response.Content.ReadAsStringAsync();
        if (!response.IsSuccessStatusCode) throw new ApplicationException(content);
    }

public interface IProductService
{
    Task<List<Product>?> Get();
    Task<Product?> Get(int productId);
    Task Add(Product product);
    Task Update(Product product);
    Task Delete(int productId);
}

public class Product 
{
    public int Id { get; set; }
    public string Title { get; set; } = "";
    public decimal? Price { get; set; }
    public string Description { get; set; } = "";
    public int CategoryId { get; set; }
    public Category Category { get; set; } = new Category();
    public string[] Images { get; set; } = new string[0];
    public string Image { get; set; } = "";
}

private async Task GetProduct(int productId)
    {
        product = await productService.Get(productId) ?? product;
        product.Image = product.Images[0] ?? "";
        product.CategoryId = product.Category.Id;
    }

@page "/product"

@inject ILogger<Products> logger;
@inject  IProductService productService;
@inject  NavigationManager NavigationManager;
@inject  IJSRuntime IJSRuntime;

<PageTitle>Products</PageTitle>

<ModuleTitle Title="Products"/>
<button class="btn btn-dark" @onclick="@(()=> NavigationManager.NavigateTo("/addproduct"))">  Add Product</button>
@if (products?.Count > 0){
    <div class= "products-container">
            @foreach (var product in products)
            {
                <div class="card">
                    <img class="card-img-top" src="@product.Images[0]" alt="Product" loading="lazy" width ="270" height="210">
                    <div class="card-body">
                        <h5><b>@product.Title</b></h5>
                        <p>@product.Price?.ToString("C")</p>
                        <button title="Delete" class="btn btn-danger btn-delete" @onclick="@(() => DeleteProduct(product))"><span class="oi oi-trash"></span></button>

                    </div>
                </div>
            }
    </div>

 
 }
else{
 <p>
    No hay productos para mostrar.
 </p> 
 
 }

@code{
    private List<Product>? products;

protected override async Task OnInitializedAsync()
{
    await GetProducts();
}
    private async Task GetProducts(){
           products= await productService.Get();
    }
    private async Task DeleteProduct(Product product){
     bool confirmed = await IJSRuntime.InvokeAsync<bool>("confirm", $"Are you sure? { product.Title}");   
        if(!confirmed)
            return; 
        await productService.Delete(product.Id);
        await GetProducts();
    }

 }

Creando funcionalidad de eliminar usando JavaScript

Introducción

Presentación

Prerrequisitos

¿Qué es WebAssembly y Blazor?

Creando un proyecto de Blazor en Visual Studio

Creando un proyecto de Blazor con el CLI

Analizando extensiones de Visual code para blazor

Componentes de Blazor

Estructura de componentes y arquitectura en Blazor

Ciclo de vida en componentes y parámetros

Creando componentes compartidos

Creando archivo de configuración

Conectando Blazor a Backend

Configurando conexión al backend para el proyecto

Creando componentes para conexión a la API

Mostrando lista de productos

Creando Menú y CSS para la lista de productos

Creando formulario para agregar registros

Integrando formulario con servicios

Usando Librerías de Blazor

Creando funcionalidad de eliminar usando JavaScript

Usando Librerías de Blazor

Cierre

Conclusión y cierre