此问题已在此处有答案:
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;
}
4条答案
按热度按时间vfh0ocws1#
你似乎在使用数据切换,这可能会破坏onclick处理。您可以尝试删除它,以查看是否会调用您的处理程序。
sg2wtvxw2#
您链接的教程使用了**Razor组件,即
.cshtml
,而您使用了Blazor*组件,即.razor
(都非常混乱)。因此,您的项目很可能没有配置为使用Blazor组件。我建议创建一个新的 Blazor Web App 项目,它也使用与 * ASP.NET Core Web App 相同的框架。但是,此项目模板已配置为使用Blazor .razor 组件。
请确保选择下面的“交互式”选项之一。
此外,您需要在 .razor 组件的顶部包含一个页面呈现模式,以实现交互性。
那么你的代码应该像现在这样工作。
z5btuh9x3#
这只是语法。在事件中不需要第二个
@
,事件对象e
在错误的位置,但无论如何都不需要它。这应该是你的语法;
@onclick="() => SelectAd(jobAd)"
如果你确实想使用事件对象,你可以调整
SelectAd
并像这样传递它;@onclick="(e) => SelectAd(jobAd,e)"
qvk1mo1f4#
我找到了一个解决办法,按照@rvnlord的回答to a similar question。通过将
_Imports.razor
文件添加到Components
文件夹,原始代码运行良好,无需进一步更改。谢谢你的帮助!