Asp.Net MVC中Blazor视图无法向控制器传递Id的解决方法

核心问题 #

Blazor组件不支持MVC的标签助手（如asp-action、asp-route-id），这些属性不会被服务器解析，导致生成的URL没有带上Id参数；同时你的<a>标签未闭合，也没有触发正确的导航逻辑。

修复步骤 #

1. 替换MVC标签助手，手动构造正确URL #

在Blazor视图中，直接拼接符合MVC路由规则的URL，或者使用NavigationManager进行导航：

方式一：手动拼接<a>标签的href

修改Action列的代码：

<td>
    <a href="/Designation/Delete/@item.Id">删除</a>
</td>

可以临时在视图中添加@item.Id，验证该字段是否有有效Guid值。

方式二：使用NavigationManager导航（推荐）

• 首先注入NavigationManager：

@inject NavigationManager NavManager

• 修改Action列的点击逻辑：

<td>
    <a @onclick="() => GoToDelete(item.Id)">删除</a>
</td>

• 在@code块中添加导航方法：

private void GoToDelete(Guid id)
{
    // 构造MVC控制器的Delete GET方法路由
    NavManager.NavigateTo($"/Designation/Delete/{id}");
}

2. 处理POST删除请求（直接执行删除而非跳转确认页） #

如果希望直接通过Blazor发起POST请求调用删除接口，需要处理防伪造令牌：

• 注入IHttpContextAccessor和NavigationManager：

@inject HttpClient HttpClient
@inject IHttpContextAccessor HttpContextAccessor
@inject NavigationManager NavManager

• 修改Action列为按钮：

<td>
    <button @onclick="() => DeleteDesignation(item.Id)" class="btn btn-danger">删除</button>
</td>

• 在@code块中添加删除方法：

private async Task DeleteDesignation(Guid id)
{
    // 获取防伪造令牌
    var antiForgeryToken = HttpContextAccessor.HttpContext.Request.Cookies["XSRF-TOKEN"];
    HttpClient.DefaultRequestHeaders.Add("X-XSRF-TOKEN", antiForgeryToken);

    // 调用MVC的POST Delete接口
    var response = await HttpClient.PostAsync($"/Designation/Delete/{id}", null);
    
    if (response.IsSuccessStatusCode)
    {
        // 删除成功后刷新列表或导航到首页
        NavManager.NavigateTo("/Designation/Index", forceLoad: true);
    }
}

• 记得在Program.cs/Startup.cs中注册服务：

services.AddHttpContextAccessor();

3. 基础检查 #

• 确认Designation实体的Id字段确实是Guid类型，且数据加载时item.Id有有效值；
• 确认MVC控制器的路由配置正确，默认路由{controller=Home}/{action=Index}/{id?}已启用；
• 闭合所有未结束的HTML标签（比如原始代码中未闭合的<a>标签）。

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