重定向时隐藏Action方法参数的技术方案问询

嘿，这个场景太常见了！我帮不少开发者解决过类似的问题，咱们一步步来搞定它，既隐藏ID又符合Web开发的最佳实践：

你之前的实现应该是用了window.location.href这类GET请求重定向，把ID直接拼在URL里——这就是ID暴露的根源。改成POST表单提交，把ID放在隐藏字段里，参数就不会出现在URL中了。

前端实现示例： #

在表格的每一行里，给编辑按钮绑定一个提交隐藏表单的逻辑：

<tr>
  <td>用户张三</td>
  <td>
    <button onclick="submitEditForm(123)">编辑</button>
    <!-- 隐藏的POST表单 -->
    <form id="edit-form-123" action="/Edit" method="POST" style="display: none;">
      <input type="hidden" name="id" value="123">
      <!-- 记得加防伪令牌防止CSRF攻击，比如ASP.NET的@Html.AntiForgeryToken() -->
    </form>
  </td>
</tr>

对应的JS函数：

function submitEditForm(id) {
  document.getElementById(`edit-form-${id}`).submit();
}

后端Action适配： #

把原来接收GET请求的Action改成接收POST：

// 以ASP.NET MVC为例
[HttpPost]
public IActionResult Edit(int id) {
  // 根据ID获取数据并返回编辑视图
  var model = _userService.GetUserById(id);
  return View(model);
}

如果不想让页面跳转，直接在当前页面弹出编辑模态框，完全不需要重定向，自然也不会暴露ID。这种方式用户体验更流畅，也是现在主流的实现方式。

前端实现示例： #

<!-- 表格里的编辑按钮 -->
<tr>
  <td>用户李四</td>
  <td>
    <button class="edit-btn" data-id="456">编辑</button>
  </td>
</tr>

<!-- 用于展示编辑表单的模态框 -->
<div id="edit-modal" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background: white; border: 1px solid #ccc;">
  <!-- 表单内容会通过AJAX加载进来 -->
</div>

对应的JS逻辑：

// 页面加载完成后绑定点击事件
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.edit-btn').forEach(btn => {
    btn.addEventListener('click', function() {
      const userId = this.dataset.id;
      // 用POST请求获取编辑表单的HTML
      fetch('/GetEditForm', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ id: userId })
      })
      .then(res => res.text())
      .then(html => {
        document.getElementById('edit-modal').innerHTML = html;
        document.getElementById('edit-modal').style.display = 'block';
      });
    });
  });
});

后端接口实现： #

写一个返回编辑表单部分视图的接口：

[HttpPost]
public IActionResult GetEditForm(int id) {
  var model = _userService.GetUserById(id);
  // 返回部分视图（只渲染编辑表单）
  return PartialView("_EditForm", model);
}

内联JS不仅难以维护，还存在XSS安全风险。建议用事件委托的方式绑定点击事件，把ID存在元素的data-*属性里，代码更干净：

<!-- 表格行 -->
<tr>
  <td>用户王五</td>
  <td>
    <button class="edit-btn" data-id="789">编辑</button>
  </td>
</tr>

<!-- 页面底部的JS脚本 -->
<script>
document.addEventListener('DOMContentLoaded', () => {
  // 给表格容器绑定事件委托，监听编辑按钮点击
  document.querySelector('#user-table').addEventListener('click', (e) => {
    if(e.target.classList.contains('edit-btn')) {
      const id = e.target.dataset.id;
      // 创建临时表单提交
      const form = document.createElement('form');
      form.method = 'POST';
      form.action = '/Edit';
      
      // 添加隐藏ID字段
      const idInput = document.createElement('input');
      idInput.type = 'hidden';
      idInput.name = 'id';
      idInput.value = id;
      form.appendChild(idInput);
      
      // 添加防伪令牌
      const tokenInput = document.createElement('input');
      tokenInput.type = 'hidden';
      tokenInput.name = '__RequestVerificationToken';
      tokenInput.value = document.querySelector('input[name="__RequestVerificationToken"]').value;
      form.appendChild(tokenInput);
      
      document.body.appendChild(form);
      form.submit();
    }
  });
});
</script>

如果业务上必须要重定向（比如某些老旧系统限制），可以把ID存在TempData或Session里，先通过POST提交到一个中间Action，再重定向到编辑页面：

[HttpPost]
public IActionResult RedirectToEdit(int id) {
  TempData["EditUserId"] = id;
  return RedirectToAction("Edit");
}

public IActionResult Edit() {
  if(TempData["EditUserId"] is int userId) {
    var model = _userService.GetUserById(userId);
    return View(model);
  }
  // 如果没有ID，跳回列表页
  return RedirectToAction("Index");
}

不过这种方式依赖会话状态，不如直接POST到编辑页面可靠，仅作为备选方案。

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