Razor Page中数据路由至Modal失败，Modal向控制器传递空值的技术问题

看起来你已经确认后端逻辑没问题，核心就是要把列表中对应分类的ID传递到Modal里，然后提交给处理方法。下面是具体的实现步骤，完全适配Razor Page的场景：

1. 给触发Modal的按钮添加分类ID标识 #

首先，你需要在渲染下拉菜单的地方（应该是在遍历分类列表的循环里），给每个"Update"和"Delete"按钮加上data-category-id属性，把当前分类的ID存进去：

<div class="dropdown-menu" aria-labelledby="dropdownMenuLink1" style="will-change: transform;">
  <!-- 假设item是当前循环的Category对象，替换成你实际的变量名 -->
  <a class="dropdown-item" data-toggle="modal" data-target="#categoryUpdate" data-category-id="@item.CategoryID">Update</a>
  <a class="dropdown-item" data-toggle="modal" data-target="#categoryDelete" data-category-id="@item.CategoryID">Delete</a>
</div>

2. 用JavaScript监听Modal打开事件，填充数据 #

Bootstrap Modal提供了show.bs.modal事件，我们可以利用这个事件，在Modal打开的瞬间，把按钮上的分类ID填充到Modal里的隐藏输入框中。在页面底部添加这段JS代码：

// 处理删除Modal的数据传递
$('#categoryDelete').on('show.bs.modal', function (event) {
  // 获取触发Modal的按钮
  const triggerBtn = $(event.relatedTarget);
  // 从按钮的data属性中获取分类ID
  const categoryId = triggerBtn.data('category-id');
  
  // 获取当前Modal对象
  const modal = $(this);
  // 找到Modal里的隐藏输入框，设置它的value为分类ID
  modal.find('input[name="CategoryID"]').val(categoryId);
  
  // 可选：如果想在提示文字里显示分类名称，可以额外加data-category-name属性，然后填充
  // const categoryName = triggerBtn.data('category-name');
  // modal.find('.modal-body b').text(categoryName);
});

// 同理处理更新Modal（如果需要填充更多字段，还可以通过AJAX拉取分类详情）
$('#categoryUpdate').on('show.bs.modal', function (event) {
  const triggerBtn = $(event.relatedTarget);
  const categoryId = triggerBtn.data('category-id');
  
  const modal = $(this);
  modal.find('input[name="CategoryID"]').val(categoryId);
  
  // 如果更新需要显示分类名称等其他信息，可以用AJAX从后端获取
  // $.get('/YourPageName?handler=GetCategoryDetails&categoryId=' + categoryId, function(data) {
  //   modal.find('input[name="CategoryName"]').val(data.CategoryName);
  // });
});

3. 修正Modal表单的Razor Page语法 #

因为你用的是Razor Page，表单的提交目标应该用asp-page-handler而不是asp-action（asp-action更多是MVC Controller的用法）。修改删除Modal的表单：

<form class="mt-0" method="post" asp-page-handler="DeleteCategory">
  <!-- 这里可以去掉value=""，JS会自动填充，asp-for会帮你生成正确的name和属性 -->
  <input type="hidden" asp-for="Category.CategoryID">
  <div class="modal-body">
    <p>
      <b></b> Are you sure about deleting that category?
    </p>
  </div>
  <div class="modal-footer md-button">
    <button class="btn" data-dismiss="modal"><i class="flaticon-cancel-12"></i> Vazgeç</button>
    <button type="submit" class="btn btn-primary">Sil</button>
  </div>
</form>

同时，确保你的Razor PageModel（后台代码）里有对应的属性和处理方法：

public class YourPageNameModel : PageModel
{
    // 绑定分类对象，或者直接接收CategoryID参数
    [BindProperty]
    public Category Category { get; set; }

    // 删除处理方法
    public IActionResult OnPostDeleteCategory()
    {
        // 这里就能拿到Category.CategoryID了，执行删除逻辑
        // _unitOfWork.CategoryRepository.Delete(Category.CategoryID);
        // _unitOfWork.Save();
        
        return RedirectToPage();
    }
}

为什么之前会有空值？ #

你之前的隐藏输入框value=""是硬编码为空，而且点击按钮时没有把对应行的分类ID传递给Modal，所以Modal打开后输入框还是空的，提交自然就传空值给后端了。上面的步骤就是通过数据属性存ID + Modal事件填充数据的方式解决这个问题。

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