I am a bit new. I am sorry if this question has already been answered, I have not been able to find a solution yet.
I am trying to follow a tutorial on YT, but for some reason my code is not working as intended.
Its basically a CRUD app.
My delete method is not working as intended. When I run the app and select to delete a product the Modal hangs. I cant either delete or cancel out of the modal. I can close the modal by clicking the cross.
For the other methods. Create, Update the Modal is working fine. Just the delete one is not working.
Indexpage
@page "/product"@using BlazorApp.Models.Entities@using BlazorApp.Models.Models@using BlazorappReal.Web.Components.BaseComponent@using Newtonsoft.Json@using Microsoft.AspNetCore.Components;@using Blazored.Toast.Services;@inject ApiClient _apiClient@inject IToastService _toastService@inherits ComponentBase // I Think this is implicit blazor does this by defualt ?<h3>IndexProduct</h3>@if(ProductModels == null){<p>Loading...</p>}else{<a class="btn btn-primary" href="/product/create">Create</a><table class="table"><thead><tr><th>ProductName</th><th>Quantity</th><th>Price</th><th>Description</th><th>CreatedAt</th><th>Action</th></tr></thead><tbody> @foreach(var product in ProductModels) {<tr><td>@product.ProductName</td><td>@product.Quantity</td><td>@product.Price</td><td>@product.Description</td><td>@product.CreatedAt.ToShortDateString()</td> <td><a class="btn btn-secondary" href="/product/update/@product.ID">Update</a><button class="btn btn-danger" @onclick="() => { DeleteID = product.ID; Modal.OpenModal();}">Delete</button> </td></tr> }</tbody></table><AppModal @ref="Modal"><Title>Notification</Title><Body> Are you sure you want to delete this product ?</Body><Footer><button type="button" class="btn btn-primary" style="width:80px" @onClick="HandleDelete">Yes</button><button type="button" class="btn btn-secondary" data-dismiss="modal" @onClick="() => Modal.CloseModal()">Cancel</button></Footer></AppModal>}@code { // [Inject] // public ApiClient ApiClient{ get; set; } // [Inject] // TODO: May not need this // private IToastService ToastService { get; set; } public List<ProductModel> ProductModels { get; set; } public AppModal Modal { get; set; } public int DeleteID { get; set; } protected override async Task OnInitializedAsync() { await base.OnInitializedAsync(); await LoadProduct(); } protected async Task LoadProduct() { // var result = await ApiClient.GetFromJsonAsync<BaseResponseModel>("/api/Product"); var result = await _apiClient.GetFromJsonAsync<BaseResponseModel>("/api/Product"); if (result != null && result.Success) { ProductModels = JsonConvert.DeserializeObject<List<ProductModel>>(result.Data.ToString()); } await base.OnInitializedAsync(); } protected async Task HandleDelete() { // var result = await ApiClient.DeleteAsync<BaseResponseModel>($"/api/Product/{DeleteID}"); var result = await _apiClient.DeleteAsync<BaseResponseModel>($"/api/Product/{DeleteID}"); if(result != null && result.Success) { // ToastService.ShowSuccess("Product deleted successfully"); _toastService.ShowSuccess("Product deleted successfully"); await LoadProduct(); Modal.CloseModal(); } }}using Newtonsoft.Json;using System.IO;namespace BlazorappReal.Web;public class ApiClient(HttpClient httpClient){ public Task<T> GetFromJsonAsync<T>(string path) { return httpClient. GetFromJsonAsync<T>(path); } public async Task<T1> PostAsync<T1, T2>(string path, T2 postModel) { var result = await httpClient.PostAsJsonAsync(path, postModel); if(result != null && result.IsSuccessStatusCode) { return JsonConvert.DeserializeObject<T1>(await result.Content.ReadAsStringAsync()); } return default; } // Update ?? public async Task<T1> PutAsync<T1, T2>(string path, T2 postModel) { var result = await httpClient.PutAsJsonAsync(path, postModel); if (result != null && result.IsSuccessStatusCode) { return JsonConvert.DeserializeObject<T1>(await result.Content.ReadAsStringAsync()); } return default; } public Task<T> DeleteAsync<T>(string path) { return httpClient.DeleteFromJsonAsync<T>(path); }}using BlazorApp.BuisnessLogic.Repositories;using BlazorApp.Models.Entities;using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;namespace BlazorApp.BuisnessLogic.Services{ public interface IProductService { Task<List<ProductModel>> GetProducts(); Task<ProductModel> GetProduct(int id); Task<ProductModel> CreateProduct(ProductModel productModel); Task<bool> ProductModelExist(int id); Task UpdateProduct(ProductModel productModel); Task DeleteProduct(int id); } // Using Di to provide the instance of the productRepository public class ProductService(IProductRepository productRepository) : IProductService { public Task<List<ProductModel>> GetProducts() { return productRepository.GetProducts(); } public Task<ProductModel> GetProduct(int id) { return productRepository.GetProduct(id); } public Task<ProductModel> CreateProduct(ProductModel productModel) { return productRepository.CreateProduct(productModel); } public Task<bool> ProductModelExist(int id) { return productRepository.ProductModelExist(id); } public Task UpdateProduct(ProductModel productModel) { return productRepository.UpdateProduct(productModel); } public Task DeleteProduct(int id) { return productRepository.DeleteProduct(id); } }}using BlazorApp.Database.Data;using BlazorApp.Models.Entities;using Microsoft.EntityFrameworkCore;using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Text.RegularExpressions;using System.Threading.Tasks;namespace BlazorApp.BuisnessLogic.Repositories{ public interface IProductRepository { Task<List<ProductModel>> GetProducts(); Task<ProductModel> GetProduct(int id); Task<ProductModel> CreateProduct(ProductModel productModel); Task<bool> ProductModelExist(int id); Task UpdateProduct(ProductModel productModel); Task DeleteProduct(int id); } public class ProductRepository(AppDbContext dbContext) : IProductRepository { public Task<List<ProductModel>> GetProducts() { return dbContext.Products.ToListAsync(); // return a list of products from the db } public Task<ProductModel> GetProduct(int id) { // The lambda returns the product(n) whose ID matches the given id, or null if no match exists. return dbContext.Products.FirstOrDefaultAsync(n => n.ID == id); } public async Task<ProductModel> CreateProduct(ProductModel productModel) { dbContext.Products.Add(productModel); await dbContext.SaveChangesAsync(); return productModel; } public async Task<bool> ProductModelExist(int id) { return await dbContext.Products.AnyAsync(e => e.ID == id); } public async Task UpdateProduct(ProductModel productModel) { dbContext.Entry(productModel).State = EntityState.Modified; await dbContext.SaveChangesAsync(); } public async Task DeleteProduct(int id) { var productToDelete = dbContext.Products.FirstOrDefault(n => n.ID == id); dbContext.Products.Remove(productToDelete); await dbContext.SaveChangesAsync(); } }}