Integrando formulario con servicios

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:008:52

Integrando formulario con servicios

Curso de Aplicaciones Web con Blazor WebAssembly y .NET

Clase 16 de 19

Clase 16 / 19

Jonatan Agudelo Suarez

Hace 3 años

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

Profesor

Hace 3 años

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

Jonatan Agudelo Suarez

Hace 3 años

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;}
}

Comentarios (12)12 comentarios

Kevin Castellano

Hace 4 años

Oriana Carolina Ailigo

Jesus David Mendez Coronell

Cristhian Llanos

Juan Carlos miranda

Hace 2 años

Aron Eliezer Lopez Agurcia

Raúl Alejandro Chávez Valenzuela

Rena Salazar Curiel

Andres Eliecer Pineda

Sergio Sanc

Emiliano Perez

Andrés Cueva

Juan David Forero

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

Integrando formulario con servicios

Progreso del curso

Introducción

Componentes de Blazor

Conectando Blazor a Backend

Usando Librerías de Blazor

Cierre