我无法在Blazor中创建@onclick事件,遵循ASP.NET教程[重复]

4urapxun  于 2023-10-21  发布在  .NET
关注(0)|答案(4)|浏览(236)

此问题已在此处有答案

Blazor onclick event is not triggered(18回答)
20天前关闭。
我正在学习有关YouTube的ASP.NET教程,但在创建onclick事件时遇到了问题。我正在使用Blazor,下面的代码是一个Razor文件。我用的是.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");
    }
}

在第25和26行,我创建了一个按钮。按钮创建成功,但函数SelectAd()从未被调用。这就好像@onclick命令没有被识别,它不知道如何处理下面的字符串。
然而,即使有红色标记的代码,网站和所有的按钮都编译得很好。这是怎么回事?
我试着用一个函数替换lambda表达式来简化,但没有成功。
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;
    }
vfh0ocws

vfh0ocws1#

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

sg2wtvxw

sg2wtvxw2#

您链接的教程使用了**Razor组件,即.cshtml,而您使用了Blazor*组件,即.razor(都非常混乱)。
因此,您的项目很可能没有配置为使用Blazor组件。我建议创建一个新的 Blazor Web App 项目,它也使用与 * ASP.NET Core Web App
相同的框架。但是,此项目模板已配置为使用Blazor .razor 组件。

请确保选择下面的“交互式”选项之一。

此外,您需要在 .razor 组件的顶部包含一个页面呈现模式,以实现交互性。

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

那么你的代码应该像现在这样工作。

z5btuh9x

z5btuh9x3#

这只是语法。在事件中不需要第二个@,事件对象e在错误的位置,但无论如何都不需要它。
这应该是你的语法;
@onclick="() => SelectAd(jobAd)"
如果你确实想使用事件对象,你可以调整SelectAd并像这样传递它;
@onclick="(e) => SelectAd(jobAd,e)"

private void SelectAd(string adId, MouseEventArgs e)
{
  ...
}
qvk1mo1f

qvk1mo1f4#

我找到了一个解决办法,按照@rvnlord的回答to a similar question。通过将_Imports.razor文件添加到Components文件夹,

@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

原始代码运行良好,无需进一步更改。谢谢你的帮助!

相关问题