Razor 组件 OnClick 未触发答案

【问题标题】：Razor Component OnClick not triggeringRazor 组件 OnClick 未触发
【发布时间】：2022-08-16 19:23:37
【问题描述】：

我试图在我的 MVC WebApp 中添加一个 Razor 组件。渲染组件工作正常，但是当我单击按钮时，我想用作 OnClick 事件的方法不会被调用，并且我为类似问题找到的所有解决方案都不适用于我。

这是剃刀组件：

@using Models
@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Web

@{ foreach (var item in order.ObjectConfigs.ConfigList)
    {
        <button class=\"button\" type=\"button\" @onclick=\"() => SelectConfig(item.fileName)\">@item.FileName</button>

    }

}
@{ if (objectConfiguration != null)
    {
        <ConfigureObject ObjectConfiguration=\"objectConfiguration\"></ConfigureObject>

    }
}


@code {
    [Parameter]
    public OrderIntern order { get; set; }
    public ObjectConfiguration objectConfiguration;
    bool loadConfigView;

    void SelectConfig(string fileName)
    {
        objectConfiguration = order.ObjectConfigs.ConfigList.First(e => e.FileName == fileName);
        
    }
}

这里我想使用组件：

@model OrderIntern
@{

}
@(await Html.RenderComponentAsync<ObjectList>(RenderMode.ServerPrerendered, new { order = Model }))

<button class=\"button-left\" type=\"button\">Zurück</button>
<button class=\"button-right\" type=\"button\">Weiter</button>

我找到的解决方案之一是添加 _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
@using System.IO
@using Models
@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Mvc.Rendering;
@using System.Linq

我还在 Startup.cs 中的 ConfigureServices 和 Configure 方法中添加了 Blazor

 public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllersWithViews();
            services.AddServerSideBlazor();
            services.AddRazorPages();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        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.MapControllerRoute(
                    name: \"default\",
                    pattern: \"{controller=Home}/{action=Index}/{id?}\");
                endpoints.MapBlazorHub();
            });
        }

我正在为我的项目使用 .Net 6.0。我希望我没有忘记重要信息，如果有，请询问。

有谁知道我做错了什么？

编辑1：我稍微更改了组件的代码，因为我需要带参数的 OnClick 方法。我只是将其删除以查明这是否导致问题。

编辑2：我创建了一个新的 MVC 应用程序，在其中添加了一个带有按钮的 razor 组件。 OnClick 方法没有做任何事情，但我使用断点查看是否调用了该方法，但仍然没有。我创建了一个 Github 存储库，因此您可以自己尝试。 https://github.com/courtmountain/MvcRazorComponent

这是我创建项目的方式。

从带有 MVC 的 Web 应用程序开始
2.我将builder.Services.AddServerSideBlazor();和app.MapBlazorHub();添加到Program.cs （看起来他们将startup.cs 合并到Programm.cs 中似乎很简单。我还通过这些更改重新创建了我的实际项目，但它仍然不起作用）

3.我将<script src=\"~/js/site.js\" asp-append-version=\"true\"></script>添加到Layout.cs
1. 我创建了一个剃须刀组件，其中只有一个按钮和一个 OnClick 函数，并在 HomeController 的Index.cs 中调用它

也许您可以尝试将 foreach 循环移到 razor 子句之外（用 @{} 包裹的部分），然后使用 @foreach 迭代您的按钮或组件
你有什么错误吗？
您实际上是在使用断点来确定您没有使用该方法吗？还是只是您的 UI 没有像您期望的那样更新？ IIRC void 方法不会自动调用 StateHasChanged，因此要么调用它，要么使用 Task 方法。
我没有收到任何错误。
您应该发布正确的 minimal reproducible example ：从新模板开始并发布所有更改。您可能可以将其简化为一个按钮和一个字符串字段。然后其他人可以尝试。

标签： c# asp.net-mvc asp.net-core blazor

【解决方案1】：

如果你想调用 C# 代码，你的按钮代码应该是这样的

<button class="button" type="button" @onclick=@(() => SelectConfig())>@item.FileName</button>

【讨论】：

这到底应该有什么帮助？您只用() 替换了（推荐的）""。
@也一样
原始代码应该已经编译（并且可以工作）。它没有错。