Creando formulario para agregar registros

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

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"))"></button>
<EditForm Model="@product">
    <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>
</EditForm>


@code{
    private Product product=new();


 }

Steven Rendon

student•

Buenas buenas.

Yo usé la el atributo href en los botones para ir hacia agregar producto o ir atrás , y navega sin problema. Eso es normal o debería tener algún tipo de cuidado. Gracias.

<div><a type="button" href="/product" class="btn btn-dark ml-auto">Atrás</a>

Miguel Teheran

teacher•

Te puede causar problemas cuando publiques la aplicacion en un subdominio, también dificulta el manejo de parametros en la URL y guardar historial de navegación. En conclusión para escenarios sencillos y básicos puede funcionar pero lo ideal es usar el navigationmanager, navlink y demas controles de Blazor.

Oriana Carolina Ailigo

student•

Products.razor


@page "/product"

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

<PageTitle>Products</PageTitle>

<ModuleTitle Title="Products"/>
<button class="btn btn-dark" @onclick="@(()=> NavigationManager.NavigateTo("/addproduct"))"></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>

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

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

@code{
    private List<Product>? products;

protected override async Task OnInitializedAsync()
{
    products=await GetProducts();
}
    private async Task<List<Product>> GetProducts(){
          return await productService.Get();
    }

 }

Samil Sanchez

student•

En mi encontré esta forma de crear la navegación para la pagina de creación de producto.

<button class="btn btn-dark" @onclick="GoToNewProductPage"> </button>

@code

{

private string urlNewProduct = "/product";

private Product product = new();

private void GoToNewProductPage() {

NavigationManager.NavigateTo("/product");

}

Espero les resulte util para asi evitar el problema de las comillas

Davis Álvarez

student•

Código de la clase:

@page "/addproduct"
@inject ILogger<Counter> logger;
@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">
    <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>

</EditForm>

@code
{
 
 private Product product = new ();

}

@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"))"></button>
<EditForm Model="@product">
    <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>
</EditForm>


@code{
    private Product product=new();


 }

@page "/product"

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

<PageTitle>Products</PageTitle>

<ModuleTitle Title="Products"/>
<button class="btn btn-dark" @onclick="@(()=> NavigationManager.NavigateTo("/addproduct"))"></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>

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

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

@code{
    private List<Product>? products;

protected override async Task OnInitializedAsync()
{
    products=await GetProducts();
}
    private async Task<List<Product>> GetProducts(){
          return await productService.Get();
    }

 }

@page "/addproduct"
@inject ILogger<Counter> logger;
@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">
    <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>

</EditForm>

@code
{
 
 private Product product = new ();

}

Creando formulario para agregar registros

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