AJAX无法获取选中员工ID导致员工删除功能失效问题求助

我来帮你搞定这个问题！核心问题就是你没把动态生成的员工ID传递到模态框的删除按钮里，加上AJAX参数传递的小错误，导致后端拿不到正确的ID。咱们一步步来修复：

问题根源 #

1. 动态生成的表格元素直接绑定事件会失效（因为元素生成时事件还没绑定）
2. 你没有把对应行的EmpID传递到模态框的删除按钮中
3. AJAX代码里的data.EmpID = $('#empid').val(data);写法错误，而且参数名和后端的ID不对应

解决步骤 #

1. 给动态生成的删除按钮添加EmpID标识 #

在生成表格行的时候，给每个删除按钮加上data-empid属性，用来存储当前行的员工ID：

<!-- 示例：动态生成的表格行（假设你用Razor或其他方式生成） -->
<tr>
  <td>@item.EmpName</td>
  <td>@item.Department</td>
  <!-- 给删除按钮添加data-empid属性，存储当前员工ID -->
  <td><button class="btn btn-danger btn-delete" data-empid="@item.EmpID">删除</button></td>
</tr>

2. 用事件委托绑定删除按钮的点击事件 #

因为表格是AJAX动态生成的，直接绑定click事件会无效，所以要用事件委托来绑定：

// 监听文档中所有.btn-delete按钮的点击事件（包括动态生成的）
$(document).on('click', '.btn-delete', function() {
    // 获取当前按钮对应的员工ID
    const empId = $(this).data('empid');
    // 把ID存储到模态框的删除按钮的data属性中
    $('#deleteEmp').data('empid', empId);
    // 弹出删除确认模态框（假设你的模态框ID是deleteModal）
    $('#deleteModal').modal('show');
});

3. 修正模态框删除按钮的AJAX代码 #

现在点击模态框的删除按钮时，就能从data属性里拿到正确的EmpID，并且正确传递给后端：

$('#deleteEmp').click(function () {
    // 从按钮的data属性中获取员工ID
    const empId = $(this).data('empid');
    
    // 先校验ID是否存在
    if (!empId) {
        alert("请选择要删除的员工！");
        return;
    }

    $.ajax({
        url: 'http://localhost:1089/api/Employee/DeleteEmployee',
        type: 'GET', // 你的后端用的是HttpGet，所以这里对应GET请求
        data: { ID: empId }, // 后端参数名是ID，必须严格对应
        beforeSend: function () {
            $("#dvRoomsLoader").show();
        },
        complete: function () {
            $("#dvRoomsLoader").hide();
        },
        success: function (response) {
            alert("Employee Deleted Successfully...!");
            // 可选：删除成功后刷新表格，重新加载员工列表
            // loadEmployeeTable();
        },
        error: function () {
            alert("An error occured while deleting Employee...!");
        }
    });
});

4. 修复后端代码的小问题 #

你的后端SqlConnection没有指定连接字符串，这会直接导致数据库连接失败，而且可以优化返回值让前端更清晰：

using System.Configuration;
using System.Web.Http;

[Route("api/Employee/DeleteEmployee")]
[HttpGet]
public IHttpActionResult DeleteEmployee(int ID) 
{
    try 
    {
        // 从配置文件中获取数据库连接字符串
        string connStr = ConfigurationManager.ConnectionStrings["YourDbConnection"].ConnectionString;
        using (SqlConnection con = new SqlConnection(connStr)) 
        {
            con.Open();
            SqlCommand com = new SqlCommand("RemoveEmployee", con);
            com.CommandType = CommandType.StoredProcedure;
            com.Parameters.AddWithValue("@EmpID", ID);
            int affectedRows = com.ExecuteNonQuery();
            
            // 根据受影响行数返回不同结果
            if (affectedRows > 0)
                return Ok("删除成功");
            else
                return NotFound(); // 未找到对应员工
        }
    } 
    catch (Exception ex) 
    {
        return InternalServerError(ex); // 返回错误信息
    }
}

额外提示 #

• 记得在Web.config里配置你的数据库连接字符串：

  <connectionStrings>
      <add name="YourDbConnection" connectionString="Data Source=你的服务器;Initial Catalog=你的数据库;Integrated Security=True;" providerName="System.Data.SqlClient" />
  </connectionStrings>
  

• 可以考虑把HttpGet改成HttpDelete，更符合RESTful规范，不过需要调整AJAX的type为DELETE，后端用[HttpDelete]标签。

内容的提问来源于stack exchange，提问作者Syed Muhammad Aousaja Ali