ASP.NET MVC中获取表格选中行ID并传递至控制器的实现问题

我来帮你梳理下现有代码的问题，然后一步步给出可行的修正方案：

1. 先修正视图里的小问题 #

你当前的复选框用了重复的id="chk"，这不符合HTML规范（id必须唯一），改成class更合理。另外隐藏的Id列可以保留，但其实我们完全不需要从td里提取Id，直接用复选框的value就足够，逻辑会更简单。

修正后的表格视图代码：

<tbody> 
@foreach (var item in Model.ReqDocumentsViewModel.OrderByDescending(x => x.Id)) 
{  
    <tr class="even pointer">
        <td style="display:none;">@item.Id</td>
        <td>@item.FileType</td>
        <td>@item.Note</td> 
        @if (item.RequestStatus == false) { 
            <td> Not Requested; </td> 
        } else { 
            <td> Requested; </td> 
        } 
        <td>
            <!-- 把重复的id改成class，避免DOM元素标识冲突 -->
            <input type="checkbox" value="@item.Id" class="chk-doc" />
        </td>
        <td>
            <button type="button" onclick="RemoveReqDocument()" class="btn btn-danger">Remove</button>
        </td>
    </tr> 
} 
</tbody>
<button type="button" class="btn btn-primary sm" onclick="SendMailNotification();">Send Request Mail</button>

2. 简化并修正前端JS逻辑 #

原来的JS代码绕了不必要的弯路，我们可以直接选中所有被勾选的复选框，提取它们的value（也就是目标Id），然后构造成符合后端模型的数组，再发送AJAX请求。

修正后的JS代码：

function SendMailNotification() {
    // 筛选出所有被勾选的复选框，提取Id并转成符合模型的结构
    const selectedIds = $('.chk-doc:checked').map(function() {
        // 把字符串类型的value转成数字，匹配后端int类型的Id
        return { Id: parseInt($(this).val()) };
    }).get(); // 将jQuery对象转换为普通JS数组

    // 增加空选择判断，提升用户体验
    if (selectedIds.length === 0) {
        alert("请至少选择一项再发送请求！");
        return;
    }

    $.ajax({
        type: "POST",
        url: "/Task/RequestDocument",
        data: JSON.stringify(selectedIds),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(r) {
            if (r) {
                alert("邮件请求已成功发送！");
                location.reload();
            } else {
                alert("操作失败，请稍后重试！");
            }
        },
        error: function() {
            alert("请求出错，请检查网络或后台服务状态！");
        }
    });
}

3. 完善控制器方法的参数绑定 #

需要给控制器的参数加上[FromBody]特性，告诉ASP.NET MVC从请求体中读取JSON数据并绑定到模型列表，同时补充基础的业务逻辑处理：

using System.Web.Mvc;

public class TaskController : Controller
{
    [HttpPost]
    public JsonResult RequestDocument([FromBody]List<ReqDocList> idQs) 
    {
        try
        {
            if (idQs == null || idQs.Count == 0)
            {
                return Json(false);
            }

            // 在这里编写你的核心业务逻辑：比如根据传入的Id列表发送邮件
            // 示例：foreach(var docItem in idQs) { /* 处理每个Id对应的邮件请求 */ }

            return Json(true); // 操作成功返回true
        }
        catch (Exception ex)
        {
            // 可在此处添加日志记录逻辑
            return Json(false); // 操作失败返回false
        }
    }
}

4. 模型代码无需修改 #

你的ReqDocList模型已经满足需求，保持原样即可：

public class ReqDocList
{
    public int Id { get; set; }
}

这样修改后，当用户勾选复选框并点击按钮时，就能正确收集选中的Id列表，传递到控制器并完成参数绑定，后续你就可以在控制器里实现发送邮件的业务逻辑了。

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