Asp.net MVC中Blazor视图调用控制器Delete方法二次失效求助

1. Blazor不支持MVC标签助手：你代码里用的asp-action、asp-controller、asp-route-id是ASP.NET MVC/Razor Pages专属的标签助手，Blazor组件不会解析这些属性，所以实际生成的链接是无效的相对路径Delete，而非预期的/Designation/Delete/{id}。
2. 相对路径拼接错误：首次点击时，当前页面URL假设为/Designation/Index，相对路径Delete会跳转至/Designation/Delete/{id}；但第二次点击时，当前URL已变为/Designation/Delete/{id}，相对路径Delete会被拼接成/Designation/Delete/Delete/{id}，这个路由不存在，因此触发404错误。
3. HTML语法错误：你的<a>标签未闭合，可能导致页面渲染异常，影响后续交互逻辑。

方案1：构造绝对路径跳转（适配原MVC控制器跳转逻辑） #

注入NavigationManager获取站点基地址，拼接正确的绝对路由，避免相对路径错误：

@using Microsoft.AspNetCore.Components
@inject HttpClient HttpClient
@inject NavigationManager NavManager <!-- 新增注入 -->

<h3>DesignationList</h3>

<table class="table">
    <thead>
        <tr>
            <th>NumericId</th>
            <th>Name</th>
            <th>Slug</th>
            <th>Status</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Designation)
        {
         <tr>
            <td>@item.NumericId</td>
            <td>@item.Name</td>
            <td>@item.Slug</td>
            <td>@item.Status</td>
            <td>
                <!-- 修改为绝对路径并闭合标签 -->
                <a href="@($"{NavManager.BaseUri}Designation/Delete/{item.Id}")">删除</a>
            </td>
         </tr>
        }
    </tbody>
</table>

@code {
    [Parameter] public IEnumerable<Global.Light.Time.Models.Designation> Designation { get; set; }
}

方案2：使用Blazor异步请求删除（更符合SPA模式） #

如果不需要跳转页面，直接通过HttpClient发送Delete请求，完成后刷新列表或跳转回列表页：

@using Microsoft.AspNetCore.Components
@inject HttpClient HttpClient
@inject NavigationManager NavManager

<h3>DesignationList</h3>

<table class="table">
    <thead>
        <tr>
            <th>NumericId</th>
            <th>Name</th>
            <th>Slug</th>
            <th>Status</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Designation)
        {
         <tr>
            <td>@item.NumericId</td>
            <td>@item.Name</td>
            <td>@item.Slug</td>
            <td>@item.Status</td>
            <td>
                <!-- 替换为按钮并绑定点击事件 -->
                <button @onclick="() => DeleteItem(item.Id)" class="btn btn-danger">删除</button>
            </td>
         </tr>
        }
    </tbody>
</table>

@code {
    [Parameter] public IEnumerable<Global.Light.Time.Models.Designation> Designation { get; set; }

    private async Task DeleteItem(Guid id)
    {
        // 发送Delete请求到控制器
        await HttpClient.DeleteAsync($"{NavManager.BaseUri}Designation/Delete/{id}");
        // 强制跳转回列表页刷新数据
        NavManager.NavigateTo("/Designation/Index", forceLoad: true);
    }
}

额外注意事项 #

• 确保DesignationController的Delete方法路由正确，若使用HttpDelete请求，需添加特性：

  [HttpDelete("{id}")]
  public IActionResult Delete(Guid id)
  {
      // 执行删除逻辑
      return Ok();
  }
  

• 若仍需使用Get请求跳转（不推荐删除操作使用Get），需确保控制器方法添加[HttpGet("Delete/{id}")]特性。

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