Creando funcionalidad de eliminar usando JavaScript

Curso de Aplicaciones Web con Blazor WebAssembly y .NET

Contenido del curso

Introducción

Componentes de Blazor

Conectando Blazor a Backend

Usando Librerías de Blazor

Cierre

19
Conclusión y cierre
01:52 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:24

Creando funcionalidad de eliminar usando JavaScript

Curso de Aplicaciones Web con Blazor WebAssembly y .NET

Clase 17 de 19

Clase 17 / 19

Rolando Fernández

Hace 3 años

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

Hace 3 años

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

Hace 3 años

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

Comentarios (14)14 comentarios

Pablo Cesar Lara Londoño

JIMMY BURITICA

Juan Felipe Barahona Gonzalez

Miguel Teheran

Profesor

Hace 2 años

Luca Cristian Manea

Hace 4 años

David Dzul

Jairo Alonso Contreras Mateus

Kevin Castellano

Luis Felipe Perdomo Murcia

Jose Noriega

ROMMEL DUAREZ SAENZ

Lilián Gómez

Juan David Forero

Oriana Carolina Ailigo

Cristian David Boada Padilla

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

Creando funcionalidad de eliminar usando JavaScript

Progreso del curso

Introducción

Componentes de Blazor

Conectando Blazor a Backend

Usando Librerías de Blazor

Cierre