Razor Pages删除功能无法生效，请求排查及修复方案

问题背景 #

在Codeacademy学习Razor Pages，按教程实现删除功能：通过独立的Delete.cshtml页面展示待删除的大洲记录，点击删除按钮后执行删除并跳转回列表页。但点击删除按钮后，浏览器地址变为https://localhost/Continents/Delete/SA?Continent.ID=SA，既未执行删除操作，也未跳转回列表页。

错误分析 #

• 表单提交方法拼写错误：Delete.cshtml中表单的metod="post"拼写错误，正确应为method="post"。拼写错误导致表单默认使用GET请求，无法触发后端的OnPostAsync方法，只会在地址栏拼接参数。
• 参数绑定不匹配：后端OnPostAsync(string id)期望接收名为id的参数，但表单中传递的是Continent.ID（隐藏字段asp-for="Continent.ID"），Razor Pages无法自动将Continent.ID绑定到id参数，导致id为null，直接触发NotFound返回，跳过删除逻辑。
• 模型属性未启用绑定：页面模型中的public Continent Continent { get; set; }未添加[BindProperty]特性，Post请求时无法自动绑定表单中的Continent.ID值。
• 变量命名冲突：OnPostAsync方法中局部变量Continent Continent与模型属性重名，易造成逻辑混淆。

修复方案 #

1. 修正Delete.cshtml的表单代码 #

将表单的metod改为method，并确保参数传递正确：

@page "{id}"
@model DeleteModel
@{
  ViewData["Title"] = "Continent Delete";
}

<div class="jumbotron p-3">
  <div class="d-flex align-items-center">
    <h1 class="display-4 flex-grow-1">
      Continent Delete
    </h1>
    <a class="btn btn-primary btn-sm" asp-page="./Index">
      Back to List
    </a>
  </div>
</div>

<div class="d-flex">
  <div class="p-2 bg-primary text-white text-right" style="flex:0 0 15%">
    @Html.DisplayNameFor(model => model.Continent.ID)
  </div>
  <div class="p-2 border-top border-right border-bottom border-primary" style="flex:1 0 auto">
    @Html.DisplayFor(model => model.Continent.ID)
  </div>
</div>
<div class="d-flex">
  <div class="p-2 bg-primary text-white text-right" style="flex:0 0 15%">
    @Html.DisplayNameFor(model => model.Continent.Name)
  </div>
  <div class="p-2 border-right border-bottom border-primary" style="flex:1 0 auto">
    @Html.DisplayFor(model => model.Continent.Name)
  </div>
</div>

<!-- 修正method拼写，添加asp-route-id确保id参数传递 -->
<form method="post" asp-route-id="@Model.Continent.ID" class="d-flex flex-row-reverse mt-3">
  <input type="hidden" asp-for="Continent.ID"/>
  <input type="submit" value="Delete" class="btn btn-danger btn-sm"/>
</form>

2. 修正Delete.cshtml.cs的后端逻辑 #

添加[BindProperty]启用模型绑定，调整参数绑定，解决变量命名冲突：

using System.Collections.Generic;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;
using RazorCountry.Models;
using RazorCountry.Data;

namespace RazorCountry.Pages.Continents
{
  public class DeleteModel : PageModel
  {
    private readonly CountryContext _context;

    public DeleteModel(CountryContext context)
    {
      _context = context;
    }

    // 添加[BindProperty]启用Post请求时的模型绑定
    [BindProperty]
    public Continent Continent { get; set; }

    public async Task<IActionResult> OnGetAsync(string id)
    {
      Continent = await _context.Continents
        .Include(c => c.Countries)
        .AsNoTracking()
        .FirstOrDefaultAsync(m => m.ID == id);

      if (Continent == null)
      {
        return NotFound();
      }

      return Page();
    }

    // 调整参数为绑定Continent的ID，或直接使用绑定后的Continent.ID
    public async Task<IActionResult> OnPostAsync()
    {
      if (Continent.ID == null)
      {
        return NotFound();
      }
      // 重命名局部变量避免冲突
      var continentToDelete = await _context.Continents.FindAsync(Continent.ID);
      if (continentToDelete != null)
      {
        _context.Continents.Remove(continentToDelete);
        await _context.SaveChangesAsync();
      }

      return RedirectToPage("./Index");
    }
  }
}

额外说明 #

• 若希望保持OnPostAsync(string id)的参数形式，可在表单中添加<input type="hidden" name="id" value="@Model.Continent.ID"/>，确保id参数能被正确传递。
• 检查数据库上下文的配置，确保_context.Continents能正确访问数据库表，且删除操作有足够的权限。

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