Integrando formulario con servicios

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

Kevin Castellano

student•

Sería interesante que las piezas de código que tiene guardadas así como los archivos finales estén en los recursos de la clase

Oriana Carolina Ailigo

student•

addProduct.razor


@page "/addproduct"

@inject  IProductService productService;
@inject  ICategoryService categoryService;
@inject  NavigationManager NavigationManager;

<PageTitle>Add - Product</PageTitle>

<ModuleTitle Title="Add product"/>

<button class="btn btn-dark" @onclick="@(()=> NavigationManager.NavigateTo("/product"))"> Go 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 id="title" @bind-Value="product.Title" required class="form-control"/> 
           </div>
           <div class="col form-group">
                <label for="price" class="col-form-label">Price</label>
                <InputNumber id="price" @bind-Value="product.Price" min="0" required class="form-control" />
            </div>
    </div>
    <div class="row">
        <div class="col form-group">
            <label for="category" class="col-form-label">Category</label>
            <InputSelect id="category" @bind-Value="product.CategoryId" required class="form-control">
                <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 id="image" @bind-Value="product.Image" required class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="description" class="col-form-label">Description</label>
        <InputTextArea id="description" @bind-Value="product.Description" required class="form-control"></InputTextArea>
    </div>

    <hr />
    <button class="btn btn-primary" type="submit">Save</button>
</EditForm>


@code{
    private Product product=new();

     private List<Category> categories = new List<Category>();

    protected override async Task OnInitializedAsync()
    {
        categories = await categoryService.Get();
    }

    private async Task Save()
    {
        product.Images = new string[1] { product.Image };
        await productService.Add(product);
        NavigationManager.NavigateTo("/product");
    }

 }

Jesus David Mendez Coronell

student•

creo que en este curso falta el tema de como depurar el proyecto, fundamental para cuando ocurre un error y ver que está pasando

Cristhian Llanos

student•

Las imagenes me devuelven error 404 ya que estan entrando entre [corchetes]

Cuando lo edito en el navegador y le quito los corchetes se ve bien, alguna idea?

Juan Carlos miranda

student•

Lo mismo me pasa a mi, no he podido solucionarlo.

Cristhian Llanos

student•

Al final tuve que tratar la variable como texto, eliminando todos los corchetes, comillas y demás para que lo tomara como un enlace correcto. Si me acuerdo más tarde que tenga el código te lo subo compañero

Aron Eliezer Lopez Agurcia

student•

En mi caso para que funcionara, fue necesario cambiar los nombres del modelo Product, ya que en la Api los atributos son en minusculas, por si no les muestra las categorias y no permite guardar productos.

Raúl Alejandro Chávez Valenzuela

student•

Me parece que te podría faltar la configuración de la opción PropertyNameCaseInsensitive en ProductService.cs:

options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true }; }

Cristhian Llanos

student•

Me respondo ;)

Rena Salazar Curiel

student•

Andres Eliecer Pineda

student•

Buenos dias. Quiero preguntar si la api de productos esta funcionando. He invocado la api pero no trae categorías, tampoco productos, Sera que estoy haciendo algo mal?

Miguel Teheran

teacher•

Parece que la URL cambió intenta con esta

https://api.escuelajs.co/api/v1/products

Sergio Sanchez

student•

El cogio me pide @using BlazorApp1.Models; es necesario? no estoy seguro por que no lo veo en el codigo de la clase. Y si no se incluye, como se hace el llamada del modelo en la instanciacion: private Product product = new();

Emiliano Perez

student•

Para hacer uso de los modelos (o de cualquier paquete o carpeta que hayas creado) es necesario agregarlos en el _Imports.razor para que puedas utilizarlo tranquilamente

Andrés Cueva

student•

pienso igual deberia estar en el recurso de clase, me sale error en categoria en la lista..no se si esta caida la API de categoria, o cual es la falla

Sergio Sanchez

student•

A lot of issues with the code in this cool course, for example, the result of the Product Module is below, at least in Nov 2023. (Maybe the api changed or idk).

namespace BlazorApp1.Models
{
    public partial class Product
    {
        public long Id { get; set; }
        public string Title { get; set; }
        public long Price { get; set; }
        public string Description { get; set; }
        public Uri[] Images { get; set; }
        public DateTimeOffset CreationAt { get; set; }
        public DateTimeOffset UpdatedAt { get; set; }
        public Category Category { get; set; }
    }

}

```namespace BlazorApp1.Models

{

&#x20;   public partial class Product

&#x20;   {

&#x20;       public long Id { get; set; }

&#x20;       public string Title { get; set; }

&#x20;       public long Price { get; set; }

&#x20;       public string Description { get; set; }

&#x20;       public Uri\[] Images { get; set; }

&#x20;       public DateTimeOffset CreationAt { get; set; }

&#x20;       public DateTimeOffset UpdatedAt { get; set; }

&#x20;       public Category Category { get; set; }

&#x20;   }



}

Juan David Forero

student•

Todo muy claro. Gracias profe.

Jonatan Agudelo Suarez

student•

Me pasa que con el inputselect no me trae las categorías, pero si me permite guardar el producto y se guarda con la categoría 1, alguien sabría por qué pasa?

Miguel Teheran

teacher•

Por favor compartenos el código de este componente para que veamos que es lo que esta pasando

Jonatan Agudelo Suarez

student•

Gracias por responder, el código del componente es este

<code>
@page "/addproduct"


@inject IProductService productService
@inject ICategoryService categoryService
@inject NavigationManager NavigationManager

<PageTitle>Add products</PageTitle>

<ModuleTitle Title="Add Product"></ModuleTitle>

<button class="btn btn-dark" @onclick="@(()=> NavigationManager.NavigateTo("/products"))">Back to products</button>

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

</EditForm>

@code
{
    private Product product = new();
    private List<Category> categories = new List<Category>();

    protected override async Task OnInitializedAsync()
    {
        categories = await categoryService.Get();
    }

    private async Task Save()
    {
        product.Images = new string[1] {product.Image};
        await productService.Add(product);
        NavigationManager.NavigateTo("/products");
    }
}

Y el modelo es este:

<code>
namespace blazor_demo;

public class Category
{
    public int Id {get; set;}
    public string CategoryName {get; set;}
    public string? Image {get; set;}
}

@page "/addproduct"

@inject  IProductService productService;
@inject  ICategoryService categoryService;
@inject  NavigationManager NavigationManager;

<PageTitle>Add - Product</PageTitle>

<ModuleTitle Title="Add product"/>

<button class="btn btn-dark" @onclick="@(()=> NavigationManager.NavigateTo("/product"))"> Go 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 id="title" @bind-Value="product.Title" required class="form-control"/> 
           </div>
           <div class="col form-group">
                <label for="price" class="col-form-label">Price</label>
                <InputNumber id="price" @bind-Value="product.Price" min="0" required class="form-control" />
            </div>
    </div>
    <div class="row">
        <div class="col form-group">
            <label for="category" class="col-form-label">Category</label>
            <InputSelect id="category" @bind-Value="product.CategoryId" required class="form-control">
                <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 id="image" @bind-Value="product.Image" required class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="description" class="col-form-label">Description</label>
        <InputTextArea id="description" @bind-Value="product.Description" required class="form-control"></InputTextArea>
    </div>

    <hr />
    <button class="btn btn-primary" type="submit">Save</button>
</EditForm>


@code{
    private Product product=new();

     private List<Category> categories = new List<Category>();

    protected override async Task OnInitializedAsync()
    {
        categories = await categoryService.Get();
    }

    private async Task Save()
    {
        product.Images = new string[1] { product.Image };
        await productService.Add(product);
        NavigationManager.NavigateTo("/product");
    }

 }

namespace BlazorApp1.Models
{
    public partial class Product
    {
        public long Id { get; set; }
        public string Title { get; set; }
        public long Price { get; set; }
        public string Description { get; set; }
        public Uri[] Images { get; set; }
        public DateTimeOffset CreationAt { get; set; }
        public DateTimeOffset UpdatedAt { get; set; }
        public Category Category { get; set; }
    }

}

```namespace BlazorApp1.Models

{

&#x20;   public partial class Product

&#x20;   {

&#x20;       public long Id { get; set; }

&#x20;       public string Title { get; set; }

&#x20;       public long Price { get; set; }

&#x20;       public string Description { get; set; }

&#x20;       public Uri\[] Images { get; set; }

&#x20;       public DateTimeOffset CreationAt { get; set; }

&#x20;       public DateTimeOffset UpdatedAt { get; set; }

&#x20;       public Category Category { get; set; }

&#x20;   }



}

<code>
@page "/addproduct"


@inject IProductService productService
@inject ICategoryService categoryService
@inject NavigationManager NavigationManager

<PageTitle>Add products</PageTitle>

<ModuleTitle Title="Add Product"></ModuleTitle>

<button class="btn btn-dark" @onclick="@(()=> NavigationManager.NavigateTo("/products"))">Back to products</button>

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

</EditForm>

@code
{
    private Product product = new();
    private List<Category> categories = new List<Category>();

    protected override async Task OnInitializedAsync()
    {
        categories = await categoryService.Get();
    }

    private async Task Save()
    {
        product.Images = new string[1] {product.Image};
        await productService.Add(product);
        NavigationManager.NavigateTo("/products");
    }
}

Integrando formulario con servicios

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