Question

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

Answer 1

我认为您对onclick事件的调用是错误的，它们改变了您从

引用函数的方式

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

到

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

@现在位于@onclick的前面，否在函数名的前面。

Answer 2

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

<script src="~/_framework/blazor.server.js"></script>必须放置在声明事件的组件之后，而不是<head />标记中。可能位于body的{{1}}标记的最底部，或者位于需要_Host.cshtml组件的MVC视图中。如果您不这样做，Blazor语法仍将起作用，项目将编译并且大多数事情将按预期方式运行，但事件不会被触发。

我只是花了几个小时试图找出答案。

Answer 3

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

Answer 4

就我而言，我在这样的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();

它开始起作用

Answer 5

我刚刚注意到将其嵌入到MVC应用程序中。添加

时，您在index.cshtml中没有blazor.server.js的脚本标签。

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

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

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

Answer 6

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

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

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

Answer 7

应为<button @onclick=IncrementCount

Answer 8

我有同样的问题。问题是在Internet Explorer中运行该应用。

当我在Edge中运行应用程序时，OnClick正常运行。

Answer 9

我整天都被这个问题困扰着，然后发现在Chrome中工作正常。因此，我在Windows 10“控制面板” /“ Internet设置” /“安全性”页面中将http：// localhost添加到了Intranet网站列表中。这仅适用于从Visual Studio运行应用程序的开发人员。

Answer 10

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

Blazor onclick事件未触发

10 个答案: