ASP.NET MVC中使用SweetAlert删除时确认按钮无响应的问题

我太懂这种明明后端逻辑没问题，前端弹窗确认后却纹丝不动的憋屈了！你这情况百分百是SweetAlert的确认回调里没正确发起删除请求，或者有细节没处理好。我给你梳理几个必看的解决步骤：

核心问题就是你没在「Yes delete it」的确认操作后，触发向控制器DeleteCategory的请求。下面给你两种常用的实现方式，选适合你的就行：

方式1：跳转到控制器路由（和你不用JS时的逻辑一致） #

适合不需要异步刷新的场景，代码示例：

// 假设你的删除按钮带了data-id属性存分类ID，比如 <button class="delete-btn" data-id="1">删除</button>
document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止按钮默认的跳转/提交行为，避免弹窗还没确认就直接触发删除
    const categoryId = this.getAttribute('data-id');

    // 弹出SweetAlert确认框
    Swal.fire({
      title: '确定要删除吗？',
      text: '删除后无法恢复该分类！',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#d33',
      cancelButtonColor: '#3085d6',
      confirmButtonText: 'Yes delete it!'
    }).then((result) => {
      // 点击确认后的回调
      if (result.isConfirmed) {
        // 跳转到控制器的DeleteCategory方法，记得替换成你实际的控制器名称
        window.location.href = `/Category/DeleteCategory/${categoryId}`;
      }
    });
  });
});

方式2：AJAX异步删除（更友好，无需刷新页面） #

如果想实现删除后页面局部刷新的效果，用AJAX更合适：

document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', function(e) {
    e.preventDefault();
    const categoryId = this.getAttribute('data-id');
    const currentRow = this.closest('tr'); // 获取当前要删除的表格行

    Swal.fire({
      title: '确定要删除吗？',
      text: '删除后无法恢复该分类！',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#d33',
      cancelButtonColor: '#3085d6',
      confirmButtonText: 'Yes delete it!'
    }).then((result) => {
      if (result.isConfirmed) {
        // 发起异步请求
        fetch(`/Category/DeleteCategory/${categoryId}`, {
          method: 'GET' // 如果你控制器用POST方法，记得带上CSRF Token，下面会说
        })
        .then(response => {
          if (response.ok) {
            // 删除成功后提示并移除页面上的行
            Swal.fire('已删除！', '分类已成功移除。', 'success').then(() => {
              currentRow.remove();
            });
          } else {
            Swal.fire('出错了！', '删除失败，请重试。', 'error');
          }
        })
        .catch(() => {
          Swal.fire('出错了！', '网络异常，请稍后再试。', 'error');
        });
      }
    });
  });
});

• 阻止默认行为：如果你的删除按钮是<a>标签或者表单提交按钮，一定要加e.preventDefault()，不然弹窗还没弹出就直接跳转到删除路由了，根本看不到确认框。
• 路由拼写正确：确保URL里的控制器名称和方法名和后端一致，比如你的控制器叫CategoryController，那路由就是/Category/DeleteCategory/${categoryId}，别写错大小写或者名称。
• CSRF Token问题：如果你的控制器用[HttpPost]注解（推荐删除用POST更安全），AJAX请求里要带上CSRF Token：

  fetch(`/Category/DeleteCategory/${categoryId}`, {
    method: 'POST',
    headers: {
      'X-CSRF-Token': document.querySelector('input[name="__RequestVerificationToken"]').value
    }
  })
  

• SweetAlert版本差异：如果你用的是旧版SweetAlert（不是SweetAlert2），回调写法是swal({...}, function(isConfirm) {...})，而不是.then()，别搞混版本了。

打开浏览器开发者工具（F12），切换到「Network」标签，点击确认按钮后看有没有请求发送出去：

• 如果没有请求，说明回调逻辑没触发，检查SweetAlert的写法是否正确；
• 如果有请求但返回错误，看状态码和响应内容排查（不过你说后端逻辑没问题，大概率是请求没发出去）。

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