I'm unable to create an @onclick event in Blazor, following an ASP.NET tutorial

I'm following the ASP.NET tutorial on YouTube, and I'm having trouble creating an onclick event. I'm using Blazor and the following code is a Razor file. I'm using .NET 8.0 preview.

Image where code is more readable here

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

@namespace webtest.WebSite.Components

<div class="card-columns">
    @foreach (var jobAd in ProductService.GetJobAds())
    {
        <div class="card">
            <div class="card-body">
                <a href="@jobAd.Url" target="_blank">finn.no link</a>
            </div>
            <div class="card-body">
                <h5 class="card-title">@jobAd.Title</h5>
            </div>

        </div>
        <div class="card-footer">
            <small class="text-muted">
                @code{
                    //@onclick is a Blazor event
                }
                <button @onclick="@(e=>SelectAd(jobAd.Id))"
                    data-toggle="modal" data-target="#jobAdModal" class="btn btn-primary">More info</button>
            </small>
        </div>
    }
</div>

@code{
    JobAd selectedAd;
    string selectedAdId;

    void SelectAd(string adId){
        selectedAdId=adId;
        selectedAd=ProductService.GetJobAds().First(x => x.Id == adId);
        System.Console.WriteLine("Hello there");
    }
}

In line 25 and 26, I'm creating a button. The button is created successfully, but the function SelectAd() is never called. It's as if the @onclick command is not recognized and it doesn't know what to do with the following string.

However, even though there are code marked in red, the website and all the buttons compile just fine. What's going on here?

I tried simplifying by replacing the lambda expression with a function, but no luck.

Image

<div class="card-columns">
    @foreach (var jobAd in ProductService.GetJobAds())
    {
        <div class="card">
            <div class="card-body">
                <a href="@jobAd.Url" target="_blank">finn.no link</a>
            </div>
            <div class="card-body">
                <h5 class="card-title">@jobAd.Title</h5>
            </div>

        </div>
        <div class="card-footer">
            <small class="text-muted">
                <button class="btn btn-primary"     @onclick="UpdateHeading">@currentButton</button>
            </small>
        </div>
    }
</div>




@code{
    JobAd selectedAd;
    string selectedAdId;
    string currentButton = "Initial button";
    string newButton = "Update button!!";
    void SelectAd(string adId){
        selectedAdId=adId;
        selectedAd=ProductService.GetJobAds().First(x => x.Id == adId);
        System.Console.WriteLine("Hello there");
    }
    private void UpdateHeading(){
        currentButton=newButton;
    }

Solution

I found a fix, following @rvnlord's answer to a similar question. By adding an _Imports.razor file to the Components folder with the lines

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop

the original code ran fine, without further changes. Thank you for all the help!