如何将JavaScript生成按钮的u.userEmail传递至后端控制器？

Hey there! Let's work through getting that user email passed to your controller when clicking the table row button, and clear up the value type question too.

核心实现方案 #

关键是把u.userEmail绑定到按钮的自定义数据属性上，再通过事件委托监听点击，最后用AJAX把值发送到控制器。

1. 修正表格按钮的生成逻辑 #

你之前的表格生成代码没写完，这里补全正确的按钮生成方式——把邮箱存在按钮的data-email属性里，这样点击时能直接获取：

$(document.body).append("<table>");
// 循环遍历返回的用户列表
$.each(crewResponse, function(index, u) {
  // 构建带按钮的表格行，将u.userEmail存入按钮的data属性
  var tableRow = `<tr>
                    <td>${u.userEmail}</td>
                    <td><button class="action-btn" data-email="${u.userEmail}">执行操作</button></td>
                  </tr>`;
  $("table").append(tableRow);
});
$(document.body).append("</table>");

2. 绑定按钮点击事件，发送请求到控制器 #

因为表格是异步加载的，必须用事件委托来监听动态生成按钮的点击，然后获取邮箱值发送请求：

// 用事件委托监听所有.action-btn的点击
$(document).on("click", ".action-btn", function() {
  // 从按钮的data属性中取出邮箱值
  var targetEmail = $(this).data("email");
  
  // 发送AJAX请求到控制器
  $.ajax({
    url: "/YourController/YourActionMethod", // 替换成你的控制器和方法路径
    type: "POST", // 根据你的控制器方法需求选GET/POST
    data: { userEmail: targetEmail }, // 键名要和控制器方法的参数名一致
    success: function(res) {
      // 请求成功后的处理逻辑
      console.log("请求成功，返回结果：", res);
    },
    error: function(xhr, status, err) {
      // 请求失败的处理逻辑
      console.error("请求出错：", err);
    }
  });
});

3. 控制器接收参数（以C#为例） #

控制器里的方法直接用string类型参数接收就行，传递过来的值就是字符串：

public ActionResult YourActionMethod(string userEmail)
{
  // 在这里处理接收的邮箱值
  // ...
  return Json(new { success = true });
}

关于传递值的类型 #

没错，传递给控制器的u.userEmail是字符串类型。邮箱本身就是字符串格式，我们通过data-email存储的是字符串，AJAX发送时也会以字符串形式传递，控制器用string类型参数就能正确接收。

为什么你之前的代码没生效？ #

大概率是两个问题：一是没把邮箱值正确绑定到按钮上；二是没有用事件委托——因为表格是异步加载的，直接给按钮绑定click事件会找不到动态生成的元素，而$(document).on("click", ".action-btn", ...)的事件委托能解决这个问题。

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