Событие Blazor onclick не вызвано

Question

Я пытаюсь реализовать простое событие onclick, как в этом примере: https://blazorfiddle.com/s/counter, но не работает в моем решении. Событие запускается только при запуске веб-страницы по неизвестным причинам.

Хорошо отображается HTML-страница с компонентом Blazor, но когда я нажимаю на кнопку, ничего не происходит.

Я на 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>

Ошибка в браузере:

Ошибка в браузере

Answer 1

Я думаю, что ваш вызов события onclick неправильный, они изменили способ, которым вы ссылаетесь на функции, с

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

на

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

. @ Теперь перед @onclick и NOT перед именем функции.

Answer 2

Изменение RenderMode.Static на RenderMode.Server, вероятно, решит вашу проблему, так как вы используете серверную версию Blazor. Но, как предположил ДжонБ, вам следует прочитать документы. Узнать разницу между Blazor на стороне сервера и Blazor на стороне клиента можно здесь: https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-3.0

Answer 3

Я только что заметил, встраивают это в приложение MVC. У вас нет тега сценария для для blazor.server.js в index.cshtml, в котором вы добавляете

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

внизу страницы index.cshtml, это то, что связывает сигнализатор ссервер, который необходим для серверной части.

См. Скотт Хансельман делает именно то, что вы пытаетесь сделать.