Blazor onclick 事件未触发答案

【问题标题】：Blazor onclick event not triggeredBlazor onclick 事件未触发
【发布时间】：2020-01-31 10:55:49
【问题描述】：

我尝试实现一个简单的 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>

浏览器出错：

Bug in brower

【问题讨论】：

在浏览器控制台中是否收到错误消息（浏览器中的 F12）。
您的代码在某些地方有所不同 - 建议您重新检查，例如。你错过了柜台页面上的@page 指令...
@PascalR。浏览器没有错误。
阅读：docs.microsoft.com/en-us/aspnet/core/blazor/…
好的，我检查了文档，@page 指令没有任何变化

标签： c# onclick blazor

【解决方案1】：

我的解决方案最终与这里的其他答案大不相同。我使用 Cloudflare CDN 来帮助为我的 Blazor Server 应用程序提供服务。

最后，我需要在 Cloudflare 中关闭“HTML 缩小”以使我的 onclick 事件再次工作。

在 Cloudflare 的“速度”设置部分中“关闭”此设置：

有关解决此问题的其他选项，请参考此博文：

ASP.NET Core Blazor with SignalR breaks when used with Cloudflare's HTML minification by Tobias Zimmergren

我也遇到了同样的HTML Minification issue using Scully with Angular and Cloudflare。

【讨论】：

【解决方案2】：

我将所有的 blazor 组件放在一个单独的“类库”项目中。包含 @using Microsoft.AspNetCore.Components.Web 在组件中解决了这个问题。

【讨论】：

【解决方案3】：

我认为你对 onclick 事件的调用是错误的，他们改变了你引用函数的方式

<button class="btn btn-primary" onclick="@IncrementCount">Click me</button>

到

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@现在在@onclick前面，NOT在函数名前面。

【讨论】：

我已经试过了。我认为这是不正确的，因为在浏览器中，按钮看起来像：
如果您使用的是 .net 3.0 的发行版，则后面的代码将无法编译如果您尝试发布的代码，它将在 blazor fiddle 中失败，将其更改为它编译的新结构很好，很好用
此外，如果您点击链接到您链接的 blazor fiddle 示例，他们已经在预览版 7 到 3.0 版本之间更改了结构。你说的唯一不起作用的就是点击。
这个答案应该可以工作（另外 (); 部分不需要）

【解决方案4】：

我整天被这个问题困扰，然后发现它在 Chrome 中运行良好。因此，我在 Windows 10 控制面板/Internet 设置/安全页面中的 Intranet 网站列表中添加了 http://localhost。只有从 Visual Studio 运行应用程序的开发人员才需要这样做。

【讨论】：

【解决方案5】：

这是与该问题相关的最受欢迎的问题：Blazor onclick events don't get triggered。添加解决 OP 问题但无法解决我的问题的答案，我想补充一点：

<script src="~/_framework/blazor.server.js"></script> 需要放在声明事件的组件之后，而不是放在<head /> 标记中。可能在_Host.cshtml 的body 标记的最底部或需要Blazor 组件的MVC 视图。如果您不这样做，Blazor 语法仍然有效，项目将编译，大多数事情将按预期运行，但不会触发事件。

我只是花了几个小时试图弄清楚这一点。

另外，如果@onclick 在.razor 文件中根本不被识别为Blazor 代码（尤其是在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 包。

【讨论】：

特别注意项目顶部的_Imports.razor。我在 Pages 目录中有这个文件，一切都会呈现，但没有交互作用。
非常感谢！我正在使用 _imports 并且不知何故 onclick 停止在某些页面上工作。我遗漏了您列表中的一些 using 语句。
我在移动 blazor.server.js

【解决方案6】：

我遇到了同样的问题。问题在于在 Internet Explorer 中运行应用程序。

当我在 Edge 中运行应用程序时，OnClick 运行良好。

【讨论】：

【解决方案7】：

应该是<button @onclick=IncrementCount

【讨论】：

【解决方案8】：

在我的例子中，我像这样在 Startup.cs 中添加了 StaticFileOptions（在我的 mvc asp.core 项目中使用了这个代码）

app.UseStaticFiles(new StaticFileOptions()
{
   OnPrepareResponse = ctx =>
   {
       const int duration = 60 * 60 * 24;
       ctx.Context.Response.Headers[HeaderNames.CacheControl] = $"public,max-age={duration}";
   }
});

然后返回

 app.UseStaticFiles();

它开始工作了

【讨论】：

这对我也有用！在浏览器控制台中收到“无法加载资源 _framework/blazor.server.js”，但一旦我恢复为 app.UseStaticFiles() 一切正常。
我遇到了同样的问题。添加“if (path.EndsWith("blazor.server.js")) return;”到“OnPrepareResponse”解决了这个问题。

【解决方案9】：

我遇到了完全相同的问题，但在这里找到了解决方案。

https://stackoverflow.com/a/58444907/82197

您需要使用以下 using 语句将_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

【讨论】：

这为我解决了这个问题。谢谢！！
添加 Microsoft.AspNetCore.Components.Web 命名空间对我有用！感谢您的提示。

【解决方案10】：

我刚刚注意到将它嵌入到 MVC 应用程序中。您在添加的 index.cshtml 中没有用于 blazor.server.js 的脚本标记

<script src="_framework/blazor.server.js"/>

在 index.cshtml 页面的底部，这是将信号器连接到服务器的部分，这是服务器端所需要的。

见Scott Hanselman doing exactly what you are trying to do.

【讨论】：

【解决方案11】：

将 RenderMode.Static 更改为 RenderMode.Server 可能会解决您的问题，因为您使用的是服务器端 Blazor。但正如 JohnB 建议的那样，您应该阅读文档。在此处了解服务器端 Blazor 和客户端 Blazor 之间的区别：https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-3.0

【讨论】：

我更改了几段代码（帖子已更新）和渲染模式，但单击按钮时未触发事件。我现在在浏览器中出现错误。