按照 ASP.NET 教程，我无法在 Blazor 中创建 @onclick 事件

Question

我正在关注 youtube 上的 ASP.NET 教程，但在创建 onclick 事件时遇到问题。我正在使用 blazor，以下代码是一个 razor 文件。我正在使用 .NET 8.0 预览版。

@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");
    }
}

在第 25 行和第 26 行中，我正在创建一个按钮。按钮已成功创建，但函数 SelectAd() 从未被调用。就好像 @onclick 命令无法识别，并且不知道如何处理以下字符串。

但是，即使有红色标记的代码，网站和所有按钮都编译得很好。有人知道这里发生了什么吗？

编辑： 我尝试通过用函数替换 lambda 表达式来简化，但没有成功。

<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;
    }

Answer 1

您似乎正在使用数据切换，这可能会破坏 onclick 处理。您可以尝试删除它以查看您的处理程序是否被调用

Answer 2

这是代码的非常基本的版本。将其添加到索引并单击按钮。这有效。如果它在您的网站上不起作用，那么您的设置就存在严重问题。

@page "/"

<PageTitle>Index</PageTitle>

<div class="card-columns">
    <div class="card">
        <div class="card-body">
            Hello
        </div>
        <div class="card-body">
            <h5 class="card-title">Blazor</h5>
        </div>

    </div>
    <div class="card-footer">
        <small class="text-muted">
            <button class="btn btn-primary" @onclick="OnClicked">Update</button>
        </small>
    </div>
</div>
<div class="alert alert-primary m-3">
    @message
</div>

@code {
    string? message;

    private void OnClicked()
    {
        message = $"clicked at {DateTime.Now.ToLongTimeString()}";
    }
}

Answer 3

您链接的教程正在使用 Razor 组件，即

.cshtml

并且您正在使用 Blazor 组件，即

.razor

（都非常混乱）

因此，您的项目很可能未配置为使用 blazor 组件。我建议创建一个新的 Blazor Web 应用程序项目，该项目也使用与

ASP.NET Core web App

相同的框架，但是，该项目模板已配置为与 blazor

.razor

组件一起使用。

确保选择下面的任一交互式选项。

此外，您需要在

.razor

组件顶部包含页面呈现模式以实现交互。

@attribute [RenderModeServer]
<PageTitle>Home</PageTitle>

那么你的代码应该可以正常工作。