ASP.NET Core 101 Contoso Crafts Website Upgrade To .NET 8

Hello,

After the release of .NET 8, I tried upgrading some of the sample projects that I have written in .NET Core 3.x to .NET 8. These were tutorials or video series from Microsoft Learn website that taught students the basics of .NET Core. The only major change that I have for this project is to fix a minor issue in the Blazor component which is Bootstrap modal not showing on first button click. The solution I found in the forums is to add a mouseover event to the button which is explained First click modal doesn't open in .NET 5 Blazor server side

bool unlock;
void start(string productId)
{
    if (!unlock)
    {
        selectProductId = productId;
        selectedProduct = ProductService.GetProducts().First(x => x.Id == productId);
        unlock = true;
    }
}

See below the complete Blazor component with the modal click issue.

@using Microsoft.AspNetCore.Components.Web
@using ContosoCrafts.WebSite.Models
@using ContosoCrafts.WebSite.Services
@inject JsonFileProductService ProductService

<div class="card-columns">
    @foreach (var product in ProductService.GetProducts())
    {
        <div class="card">
            <div class="card-img" style="background-image: url('@product.Image')"></div>
            <div class="card-body">
                <h5 class="card-title">@product.Title</h5>
            </div>
        </div>
        <div class="card-footer">
            <small class="text-muted">
                <button @onclick="(e => SelectProduct(product.Id))" @onmouseover="(e => start(product.Id))" data-toggle="modal" data-target="#productModal" class="btn btn-primary">More Info</button>
            </small>
        </div>
    }
</div>

@if (selectedProduct != null)
{
    <div class="modal fade" id="productModal" tabindex="-1" role="dialog" aria-labelledby="productTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="productTitle">@selectedProduct.Title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="card">
                        <div class="card-img" style="background-image: url('@selectedProduct.Image');">
                        </div>
                        <div class="card-body">
                            <p class="card-text">@selectedProduct.Description</p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    @if (voteCount == 0)
                    {
                        <span>Be the first to vote!</span>
                    }
                    else
                    {
                        <span>@voteCount @voteLabel</span>
                    }
                    @for (int i = 1; i < 6; i++)
                    {
                        var currentStar = i;
                        if (i <= currentRating)
                        {
                            <span class="fa fa-star checked" @onclick="(e => SubmitRating(currentStar))"></span>
                        }
                        else
                        {
                            <span class="fa fa-star" @onclick="(e => SubmitRating(currentStar))"></span>
                        }
                    }
                </div>
            </div>
        </div>
    </div>
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

@code {
    Product selectedProduct;
    string selectProductId;

    void SelectProduct(string productId)
    {
        selectProductId = productId;
        selectedProduct = ProductService.GetProducts().First(x => x.Id == productId);
        GetCurrentRating();
    }

    bool unlock;
    void start(string productId)
    {
        if (!unlock)
        {
            selectProductId = productId;
            selectedProduct = ProductService.GetProducts().First(x => x.Id == productId);
            unlock = true;
        }
    }

    int currentRating = 0;
    int voteCount = 0;
    string voteLabel;

    void GetCurrentRating()
    {
        if (selectedProduct.Ratings == null)
        {
            currentRating = 0;
            voteCount = 0;
        }
        else
        {
            voteCount = selectedProduct.Ratings.Count();
            voteLabel = voteCount > 1 ? "Votes" : "Vote";
            currentRating = selectedProduct.Ratings.Sum() / voteCount;
        }

        System.Console.WriteLine($"Current rating for {selectedProduct.Id}: {currentRating}");
    }

    void SubmitRating(int rating)
    {
        System.Console.WriteLine($"Rating received for {selectedProduct.Id}: {rating}");
        ProductService.AddRating(selectProductId, rating);
        SelectProduct(selectProductId);
    }
}

Source Code: Contoso Crafts Website