MVC视图嵌入Blazor组件后@onclick点击事件无法正常触发问题求助

核心问题原因 #

你遇到的问题由多个常见错误共同导致：

• 禁止在Blazor组件内部直接修改[Parameter]修饰的父级传入参数，这类参数的更新逻辑由父级控制，组件内修改不会触发状态重渲染，页面不会同步更新
• 测试逻辑中未给UserToView.FirstName赋值，按钮展示为空，会误以为事件未触发
• 下拉菜单内的a标签默认点击会跳转刷新页面，掩盖事件执行效果
• 预渲染模式下SignalR连接未建立时事件不会触发

分步修改方案 #

1. 修正UserToView属性定义，移除[Parameter]注解改为组件内部状态
   修改UserIndexBase.cs对应代码：

// 原代码
// [Parameter]
// public Account UserToView { get; set; }

// 替换为
public Account UserToView { get; set; } = new Account();

2. 完善事件逻辑，添加状态刷新通知，给测试属性赋值
   修改UserIndexBase.cs中的ViewUser方法：

public async Task ViewUser()
{
    UserToView = new Account
    {
        Id = $"{Guid.NewGuid()}",
        FirstName = "测试用户"
    };
    // 手动触发状态重渲染，确保页面更新
    StateHasChanged();
    await Task.CompletedTask;
}

3. 阻止下拉菜单a标签的默认跳转行为
   修改UserIndex.razor表格内的View链接代码：

<a class="dropdown-item" @onclick="ViewUser" @onclick:preventDefault>View</a>

4. 调整渲染模式排查预渲染问题（可选）
   如果测试时还是触发不了，把Index.cshtml中组件的渲染模式暂时改为Server：

<component type="typeof(UserIndex)" render-mode="Server"
           param-Listing= "Model" param-Search = "search" param-Action= "action" param-Controller= "controller" param-RouteDataDict= "routeData" />

5. 验证静态资源加载
   访问你的站点地址/_framework/blazor.server.js，确认可以正常加载JS文件，若返回404检查Startup.cs中app.UseStaticFiles()中间件是否放在UseEndpoints之前。

内容的提问来源于stack exchange，提问作者Bookish