razor-pages 删除功能不起作用，如何删除？

Question

我目前正在 codecademy.com 学习 Razor Pages。 我做了视频教程中显示的所有内容，不幸的是它不起作用：

项目任务： "数据删除 当前项目在 Index 页面列表上有一个按钮，可以删除当前的 Continent 或 Country。该按钮将被修改为调用离散的 Delete.cshtml 页面。此页面将显示当前记录以供查看并提供删除按钮。删除发生后，用户将被重定向回列表，以便他们获得成功任务的视觉反馈。

代码和标记很容易从现有的 Detail.cshtml 页面复制。复制该页面后，我们添加一个删除按钮并从 Index.cshtml.cs 页面的 OnPostAsync() 方法中复制必要的语句。” 删除页面已创建。问题是： 当我在删除页面上按下删除按钮时，我在浏览器中重定向到了这个链接：

https://localhost/Continents/Delete/SA?Continent.ID=SA

实际上没有删除事件 无重定向

这里可能有什么错误？

代码Delete.cshtml：

@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>
[enter image description here](https://i.stack.imgur.com/tFnrX.jpg)
<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>

<form metod="post" 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>

删除.cshtml.cs：

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;
    }

    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();
    }
    public async Task<IActionResult> OnPostAsync(string id)
    {
      if (id == null)
      {
        return NotFound();
      }
      // Find the continent
      Continent Continent = await _context.Continents.FindAsync(id);
      //Delete the continent
      if (Continent != null)
      {
        _context.Continents.Remove(Continent);
      }
      //Persist Changes
      await _context.SaveChangesAsync();
      //Redirect to the user
      return RedirectToPage("./Index");
    }
  }
}

模型 Continent.cs：

using System.ComponentModel.DataAnnotations;
using System.Collections.Generic;

namespace RazorCountry.Models
 {
public class Continent
  {
[Required, StringLength(2, MinimumLength = 2), Display(Name = "Code")]
[RegularExpression(@"[A-Z]+", ErrorMessage = "Only upper case characters are allowed.")]
public string ID { get; set; }

[Required]
public string Name { get; set; }

public ICollection<Country> Countries { get; set; }
  }
 }

尝试了解 RazorPages 功能的工作原理，尝试以正确的方式修复错误

Answer 1

没有发生错误的原因是因为您的OnPostAsync 方法没有被命中。您在表单中拼错了 method 属性（您有 metod），因此提交它会生成默认的 GET 请求，而执行您的 OnGetAsync 处理程序。

更正该错误后，您仍然有未解决的问题。

您的 OnPostAsync 处理程序需要一个名为 id 的参数。表单中的隐藏字段标签助手生成一个名为Continent.ID 的参数。因此，该值不会绑定到 id 参数。最简单的解决方案是取消删除页面底部表单中的标签助手，并将其替换为带有 name 属性的纯 HTML 输入：

<form method="post" class="d-flex flex-row-reverse mt-3">
  <input type="hidden" name="id" value="@Continent.ID"/>
  <input type="submit" value="Delete" class="btn btn-danger btn-sm"/>
</form>

您可以在此处阅读有关模型绑定的更多信息：https://www.learnrazorpages.com/razor-pages/model-binding