Updating Blazor 8 Application - Special Attention Needed After Recent Updates

Question

Hello,

I previously posted a question about a Blazor Server application I was working on, which was functioning correctly at the time. However, after recent updates to Blazor 8, it seems that the application requires additional steps to work properly.

The application involves Blazor Server, EF Core with the Code First approach, and SQLite. It's a basic app that displays a list of names retrieved from an SQLite database.

Here is the link to the project on GitHub: https://github.com/devenv2/BlazorEfcSQ

User @Qing Guo - MSFT initially responded to my question and provided valuable assistance.

Could someone guide me through the necessary changes to make my application compatible with the latest Blazor 8 updates? Any help would be greatly appreciated.

Thank you in advance for your time and help.

Answer 1

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