ASP.NET中如何向Partial View传递选中项数据实现模态框删除？

我正尝试用模态框实现CRUD的删除操作，现在表格里的每条数据都能拿到ID直接调用Delete Action，但不知道怎么把选中项的ID和名称传递到循环外的Partial View模态框里；另外当前表格的Delete按钮会直接触发删除，我只想让它弹出模态框，真正的删除操作由模态框里的按钮执行。

原Category视图代码 #

@model IEnumerable<Category>
@{
  ViewData["Title"] = "Index";
}

<h1>Categories</h1>
<button><a asp-controller="Category" asp-action="Create">Add Category +</a></button>
<table> 
  <thead>
    <tr>
      <th>
        Category Name
      </th>      
      <th>
        Display Order
      </th>      
      <th>
        Created Date
      </th>
      <th>
        Edit Category
      </th>
      <th>
        Delete Category
      </th>
    </tr>
  </thead>
  <tbody>
    @foreach(var obj in Model)
    {
      <tr>
        <td>@obj.Name</td>
        <td>@obj.DisplayOrder</td>
        <td>@obj.CreatedDateTime</td>
        <td>
          <button><a asp-controller="Category" asp-action="Edit" asp-route-id="@obj.Id">Edit Category</a></button>
        </td>        
        <td>
          <button  onclick="add()"><a asp-controller="Category" asp-action="Delete" asp-route-id="@obj.Id">Delete Category</a></button>
        </td>
      </tr>
    }
  </tbody>
</table>

<partial name="_viewpartial"/>

原Partial View代码 #

<div class="modal-container">
  <div class="modal-wrapper">
    <p>Are you sure you want to delete this category?</p>
<!--selected category will have its name as the disabled input value next line-->
    <input value="Category" disabled/>
    <div class="confirmation">
      <button><a asp-controller="Category" asp-action="Index">Cancel</a></button>
      <button><a asp-controller="Category" asp-action="Delete">Delete</a></button>
    </div>
  </div> 
</div>

步骤1：修改表格中的Delete按钮 #

去掉按钮内的<a>标签（避免直接跳转），改为点击时调用自定义JS函数，并传入当前分类的ID和名称：

<td>
  <button onclick="openDeleteModal('@obj.Id', '@obj.Name')">Delete Category</button>
</td>

步骤2：改造Partial View，添加可操作标识 #

给模态框和需要动态修改的元素添加ID，方便JS控制，同时添加隐藏输入框存储分类ID：

<div id="deleteModal" class="modal-container" style="display: none;">
  <div class="modal-wrapper">
    <p>Are you sure you want to delete this category?</p>
    <input id="categoryNameInput" value="Category" disabled/>
    <!-- 隐藏存储分类ID的输入框 -->
    <input type="hidden" id="categoryId" />
    <div class="confirmation">
      <button onclick="closeDeleteModal()">Cancel</button>
      <button onclick="confirmDelete()">Delete</button>
    </div>
  </div> 
</div>

• 初始设置display: none让模态框默认隐藏
• categoryNameInput用来显示选中的分类名称
• categoryId用来存储选中分类的ID，供后续删除使用

步骤3：编写JavaScript函数处理逻辑 #

在主视图（Index.cshtml）末尾添加<script>标签，实现模态框的显示、隐藏和删除跳转：

<script>
// 打开模态框，接收分类ID和名称
function openDeleteModal(categoryId, categoryName) {
  // 更新模态框里的分类名称
  document.getElementById('categoryNameInput').value = categoryName;
  // 把ID存入隐藏输入框
  document.getElementById('categoryId').value = categoryId;
  // 显示模态框
  document.getElementById('deleteModal').style.display = 'block';
}

// 关闭模态框
function closeDeleteModal() {
  document.getElementById('deleteModal').style.display = 'none';
}

// 确认删除，跳转至Delete Action
function confirmDelete() {
  const categoryId = document.getElementById('categoryId').value;
  // 构造带ID的删除URL
  const deleteUrl = `/Category/Delete/${categoryId}`;
  // 跳转执行删除
  window.location.href = deleteUrl;

  // 【可选更安全方式】如果你的Delete Action是POST请求，用表单提交（需加防伪造令牌）
  // const form = document.createElement('form');
  // form.method = 'POST';
  // form.action = deleteUrl;
  // // 加入ASP.NET默认生成的防伪造令牌
  // const token = document.querySelector('input[name="__RequestVerificationToken"]').value;
  // const tokenInput = document.createElement('input');
  // tokenInput.type = 'hidden';
  // tokenInput.name = '__RequestVerificationToken';
  // tokenInput.value = token;
  // form.appendChild(tokenInput);
  // document.body.appendChild(form);
  // form.submit();
}
</script>

步骤4：添加模态框样式（可选） #

如果需要遮罩效果，给.modal-container添加CSS：

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-wrapper {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
}

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