Hi @Yusuf, I modified some part of your codes to make home page work. Could you please help test it? Please feel free to let me know whether the codes helped or not.
@page "/"
@inject ProductServices service
@rendermode InteractiveServer
<div class="container">
<div class="row bg-light">
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th>Product Id</th>
<th>Name</th>
<th>Delete Product</th>
</tr>
</thead>
<tbody>
@if (Products.Any())
{
@foreach (var product in Products)
{
<tr @onclick="(() => SetProductForUpdate(product))">
<td>@product.Id</td>
<td>@product.Name</td>
<td><button class="btn btn-danger" @onclick="(() => DeleteProduct(product))">Delete</button></td>
</tr>
}
}
else
{
<tr><td colspan="6"><strong>No products available</strong></td></tr>
}
</tbody>
</table>
</div>
<div class="row m-5">
<div class="col-5 bg-light m-2 justify-content-start">
<div class="p-3 mb-3 bg-primary text-white text-center">Add New Product</div>
<EditForm Model="NewProduct" OnSubmit="AddNewProduct" FormName="newProductForm">
<div class="form-group">
<label for="name">Product Name</label>
<InputText class="form-control" @bind-Value="NewProduct!.Name" />
</div>
<div class="text-center p-3 mb-3">
<button class="btn btn-info" type="submit" > Add Product</button>
</div>
</EditForm>
</div>
<div class="col-5 bg-light m-2 justify-content-end">
<div class="p-3 mb-1 bg-primary text-white text-center">Update Product</div>
<EditForm Model="UpdateProduct" OnSubmit="UpdateProductData" FormName="updateProductForm">
<div class="form-group">
<label for="name">Product Name</label>
@* <input type="text" id="name" @bind-value="@UpdateProduct.Name" /> *@
<InputText class="form-control" @bind-Value="UpdateProduct!.Name" />
</div>
<div class="text-center p-3 mb-3">
<button class="btn btn-info" type="submit"> Update Product</button>
</div>
</EditForm>
</div>
</div>
<tr @onclick="() => TrClickedAtIndex(0)">...</tr>
</div>
@code {
public void TrClickedAtIndex(int index)
{
Console.WriteLine($"tr clicked at index {index}!");
}
List<Product> Products = new List<Product>();
protected override async Task OnInitializedAsync()
{
await RefreshProducts();
}
private async Task RefreshProducts()
{
Products = await service.GetProductAsync();
}
[SupplyParameterFromForm]
public Product? NewProduct { get; set; } = new Product();
private async Task AddNewProduct()
{
await service.AddProductAsync(NewProduct);
NewProduct = new Product();
await RefreshProducts();
}
[SupplyParameterFromForm(FormName = "updateProductForm")]
public Product? UpdateProduct { get; set; } = new Product();
private void SetProductForUpdate(Product product)
{
UpdateProduct = product;
}
private async Task UpdateProductData()
{
await service.UpdateProductAsync(UpdateProduct);
await RefreshProducts();
}
private async Task DeleteProduct(Product product)
{
await service.DeleteProductAsync(product);
await RefreshProducts();
}
}
If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Best regards,
Tiny