ASP.NET Core按钮无法传递选中行ID至ViewModel求助

你遇到的核心问题是：asp-route-id 和 data-id 都是服务器端渲染时生成的静态值，页面加载完成后，即便你用JavaScript更新了输入框的SelectedId值，这些属性并不会自动同步更新。所以点击按钮时，传递的始终是页面初始化时的Model.SelectedId值（初始为0或25）。

针对编辑和删除按钮，分别给出可行的处理方式：

1. 处理编辑按钮 #

方案A：通过JavaScript动态修改跳转URL #

监听编辑按钮的点击事件，获取输入框中最新的SelectedId，手动构造跳转地址：

<button class="btn btn-primary mx-2 edit-btn">
  <i class="bi bi-pencil-square"></i> Edit
</button>

<script>
document.querySelector('.edit-btn').addEventListener('click', function(e) {
  e.preventDefault(); // 阻止默认跳转
  const selectedId = document.querySelector('.selectedId').value;
  if (selectedId && selectedId !== '0') {
    window.location.href = `/Employee/Edit/${selectedId}`;
  } else {
    alert('请先选择一个员工');
  }
});
</script>

方案B：通过表单提交传递SelectedId #

把编辑按钮改成表单提交按钮，让SelectedId通过表单字段提交到控制器，无需依赖路由参数：

<form asp-controller="Employee" asp-action="Edit">
  <div class="buttons">
    <div class="w-100 btn-group">
      <input asp-for="SelectedId" class="form-control selectedId" readonly/>
      <button type="submit" class="btn btn-primary mx-2">
        <i class="bi bi-pencil-square"></i> Edit
      </button>
    </div>
  </div>
</form>

同时修改控制器方法，接收ViewModel或直接绑定参数：

public IActionResult Edit(EmployeeListViewModel model) 
{
  int? id = model.SelectedId;
  // 处理id逻辑
}

// 或者直接接收参数
public IActionResult Edit(int SelectedId) 
{
  // 处理id逻辑
}

2. 处理删除按钮 #

删除按钮依赖data-id触发模态框，需要在点击时动态获取最新的SelectedId，替换模态框所需参数：

<a class="btn btn-danger delete" id="delete-btn"
   data-controller="Employee" data-action="DeletePOST"
   data-body-message="Are you sure you want to delete this employee?">
  <i class="bi bi-trash"></i> Delete
</a>

<script>
document.querySelector('#delete-btn').addEventListener('click', function(e) {
  e.preventDefault();
  const selectedId = document.querySelector('.selectedId').value;
  if (!selectedId || selectedId === '0') {
    alert('请先选择一个员工');
    return;
  }
  
  // 动态更新当前按钮的data-id
  this.dataset.id = selectedId;
  
  // 调用你的模态框初始化逻辑（比如原delete.js中的方法）
  initDeleteModal(this);
});
</script>

如果你的delete.js是通过读取元素data-id获取ID，现在点击时已经更新了该属性，就能拿到正确的选中ID。

关键注意点 #

• 服务器端标签助手生成的属性（如asp-route-id）是静态的，页面加载后不会自动更新，必须通过JavaScript动态修改。
• 输入框的SelectedId是客户端DOM值，不会自动同步回服务器端Model，除非通过表单提交或AJAX传递。

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