Jquery UI、Razor与MVC：确认弹窗OK按钮触发非法调用错误

这个报错我太熟悉了——「Illegal Invocation」十有八九是你在AJAX请求里直接传递了DOM对象或者格式错误的参数，导致jQuery无法正确序列化数据。咱们一步步来解决这个问题：

核心问题分析 #

你遇到的情况，大概率是触发删除时没有正确提取testUser.TestUserId的纯数值/字符串值，反而把关联的DOM元素或者未处理的对象传给了AJAX请求，jQuery在尝试序列化这些内容时就会抛出非法调用的错误。

解决方案分步实现 #

1. 前端HTML：给删除按钮绑定用户ID

首先，把每个删除按钮的TestUserId存到元素的data属性里，这样点击时能轻松拿到：

<!-- 假设这是你的用户列表删除按钮 -->
<button class="delete-user-btn" data-user-id="@testUser.TestUserId">删除用户</button>

<!-- 提前定义隐藏的确认对话框 -->
<div id="delete-confirm-modal" title="确认删除">
  <p>你确定要删除该用户吗？此操作不可恢复。</p>
</div>

2. 前端JS：正确初始化对话框并传递参数

用jQuery UI对话框时，要在点击删除按钮时把当前用户ID暂存到对话框上，然后在确定按钮触发时用AJAX正确传递参数：

$(function() {
  // 初始化对话框，默认隐藏
  $("#delete-confirm-modal").dialog({
    autoOpen: false,
    modal: true,
    width: 400,
    buttons: {
      "确定删除": function() {
        // 从对话框上取出暂存的用户ID
        const userId = $(this).data("target-user-id");
        
        // 发送AJAX请求到后端
        $.ajax({
          url: "/Home/DeleteTestUser",
          type: "POST",
          // 关键：传递纯键值对，而非DOM对象/复杂对象
          data: { 
            TestUserId: userId,
            // 如果你的项目启用了防伪验证，要带上这个Token
            __RequestVerificationToken: $("input[name='__RequestVerificationToken']").val()
          },
          success: function(res) {
            if (res.success) {
              // 删除成功后的UI处理：比如移除对应行、提示用户
              $(`.delete-user-btn[data-user-id="${userId}"]`).closest("tr").remove();
              alert("用户已成功删除");
            } else {
              alert(`删除失败：${res.message}`);
            }
            // 关闭对话框
            $("#delete-confirm-modal").dialog("close");
          },
          error: function(xhr, status, err) {
            console.error("删除请求出错：", err);
            alert("删除请求失败，请稍后重试");
          }
        });
      },
      "取消": function() {
        $(this).dialog("close");
      }
    }
  });

  // 绑定删除按钮的点击事件：打开对话框并暂存用户ID
  $(".delete-user-btn").on("click", function(e) {
    e.preventDefault();
    const targetUserId = $(this).data("user-id");
    // 把用户ID存到对话框元素上
    $("#delete-confirm-modal").data("target-user-id", targetUserId);
    // 打开对话框
    $("#delete-confirm-modal").dialog("open");
  });
});

3. 后端HomeController：正确接收参数

确保你的删除Action是POST请求，并且参数名和前端传递的一致：

[HttpPost]
[ValidateAntiForgeryToken] // 如果前端带了防伪Token，必须加这个特性
public JsonResult DeleteTestUser(int TestUserId)
{
    try
    {
        // 执行你的删除逻辑：比如调用服务删除用户
        // _testUserService.Delete(TestUserId);
        return Json(new { success = true });
    }
    catch (Exception ex)
    {
        // 捕获异常并返回错误信息
        return Json(new { success = false, message = ex.Message });
    }
}

关键注意点 #

• 务必确认data-user-id属性渲染出了正确的TestUserId值，可以通过Chrome开发者工具查看元素验证。
• 如果你的项目启用了ASP.NET MVC的防伪验证，必须在AJAX请求中带上__RequestVerificationToken，否则会返回400错误。
• 不要直接传递DOM对象或者未处理的复杂对象给AJAX的data参数，一定要提取出纯值（比如数字、字符串）。

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