我尝试实现像此示例这样的简单onclick事件：https : //blazorfiddle.com/s/counter，但是在我的解决方案中不起作用。该事件仅出于未知原因在网页运行时触发。
带有blazor组件的HTML页面显示得很好，但是当我单击按钮时，什么也没有发生。
我正在使用VS 2019 .Net Core 3.0。ASP.NET MVC项目
Counter.razor文件：
@using Microsoft.AspNetCore.Components
<p>Current count: @currentCount</p>
<button class="btn btn-primary" onclick="@IncrementCount();">Click me</button>
@code {
int currentCount = 0;
private async Task IncrementCount()
{
await Task.Run(() => currentCount++);
}
}
Index.cshtml：
@using WebApplication2.Views.Components
@{
ViewData["Title"] = "Home Page";
}
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>
@(await Html.RenderComponentAsync<Counter>(RenderMode.Server, new { }))
startup.cs：
public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews();
services.AddHttpClient();
services.AddRazorPages();
services.AddServerSideBlazor();
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_3_0);
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Home/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapRazorPages();
endpoints.MapBlazorHub();
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
}
浏览器中的按钮：
<button class="btn btn-primary" onclick="System.Runtime.CompilerServices.AsyncTaskMethodBuilder`1+AsyncStateMachineBox`1[System.Threading.Tasks.VoidTaskResult,WebApplication2.Views.Components.Counter+<IncrementCount>d__2];">Click me</button>
浏览器错误：
Gre*_*Gum 57
此答案仅适用于 .net 8，其中静态渲染是默认设置。.net 8 引入了渲染模式的概念，现在页面级别或全局都需要它。默认情况下是静态渲染，这意味着组件完全按照编写的方式渲染，而 Blazor 引擎没有连接任何交互性。如果您有纯静态 html，并且不需要交互性的开销，那么这很好。另一方面，如果使用了早期版本并且您的点击事件没有得到处理并且没有明显的原因，它可能会让您感到惊讶。
要连接交互性，您有两种选择。
每个组件的解决方案
在文件顶部检查此指令：
@rendermode InteractiveServer
如果它丢失，那么您将不会触发事件。在客户端（wasm）将是这样的：
@rendermode InteractiveAuto
全局解决方案
更新文件Routes中的元素App.razor：
<body>
<Routes @rendermode=RenderMode.InteractiveServer />
<script src="_framework/blazor.web.js"></script>
</body>
全局解决方案允许您使用MainLayout.razor每个组件解决方案不支持的交互元素。如果您正在做诸如连接“暗”模式之类的事情，并且需要在 html 的顶层应用一个类，以便将其应用于所有内容，那么这会很有用。
编辑：即使您添加了AddInteractiveServerComponents()这并不意味着您已将默认设置为 InteractiveServer。它仅意味着您可以选择将 InteractiveServer 添加为全局或组件选项。所以你仍然必须像上面一样添加全局或组件选项。
rvn*_*ord 17
这是与该问题相关的最受欢迎的问题：Blazor onclick events don't get triggered. 添加到解决 OP 问题且无法解决我的问题的答案中，我想补充一点：
<script src="~/_framework/blazor.server.js"></script>需要放在声明事件的组件之后，而不是放在<head />标签中。可能在需要组件的MVC 视图的body标签的最底部。如果你不这样做，语法仍然有效，项目将编译，大多数事情将按预期运行，但不会触发事件。_Host.cshtmlBlazorBlazor
我只是花了几个小时试图弄清楚这一点。
此外，如果@onclick根本没有被识别为文件中的Blazor代码.razor（这尤其可能发生在Component Libraries），请确保_Imports.razor在项目的最顶部添加以下内容：
@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
如果由于某种原因无法找到某些命名空间，则可以将它们添加为nuget包。
我认为您对onclick事件的调用是错误的，它们改变了您引用函数的方式
<button class="btn btn-primary" onclick="@IncrementCount();">Click me</button>
至
<button class="btn btn-primary" @onclick="IncrementCount();">Click me</button>
该@现在在@onclick的前面，是不是在函数名的前面。
我遇到了完全相同的问题，但在这里找到了解决方案。
您需要_Imports.razor使用以下 using 语句将文件添加到 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
由于您使用服务器端 Blazor，因此更改RenderMode.Static为可能会解决您的问题。RenderMode.Server但正如 JohnB 建议的那样，您应该阅读文档。在ASP.NET Core Blazor 托管模型中了解服务器端 Blazor 和客户端 Blazor 之间的区别。
| 归档时间： |
|
| 查看次数： |
942 次 |
| 最近记录： |