ASP.NET Razor中获取选中复选框ID并实现数据更新的方法

一、前端HTML结构调整 #

确保复选框与行ID正确绑定，两种常用实现方式：

方式1：将ID作为复选框的value属性 #

<table id="dataTable">
    <thead>
        <tr>
            <th><input type="checkbox" id="selectAll"></th>
            <th>ID</th>
            <!-- 其他业务列 -->
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.DataList)
        {
            <tr>
                <td><input type="checkbox" class="row-checkbox" value="@item.Id"></td>
                <td>@item.Id</td>
                <!-- 其他列内容 -->
            </tr>
        }
    </tbody>
</table>
<button id="reprintdatabtn" type="button">执行更新</button>
@Html.AntiForgeryToken() <!-- 必须添加，用于防CSRF验证 -->

方式2：将ID存储在表格行的data-id属性 #

<table id="dataTable">
    <!-- 表头省略 -->
    <tbody>
        @foreach (var item in Model.DataList)
        {
            <tr data-id="@item.Id">
                <td><input type="checkbox" class="row-checkbox"></td>
                <td>@item.Id</td>
                <!-- 其他列内容 -->
            </tr>
        }
    </tbody>
</table>

二、前端jQuery逻辑优化 #

点击按钮时正确收集选中ID并发送POST请求：

$('#reprintdatabtn').click(function() {
    // 收集选中ID（对应方式1的写法）
    let selectedIds = $('.row-checkbox:checked').map(function() {
        return $(this).val();
    }).get();

    // 如果用方式2，替换成以下代码：
    // let selectedIds = $('.row-checkbox:checked').closest('tr').map(function() {
    //     return $(this).data('id');
    // }).get();

    // 校验是否有选中项
    if (selectedIds.length === 0) {
        alert('请选择至少一行数据');
        return;
    }

    // 发送请求到后端
    $.ajax({
        url: '/YourPagePath?handler=UpdateSelected', // 替换为实际页面路由，比如'/Orders?handler=UpdateSelected'
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(selectedIds),
        headers: {
            // 携带防CSRF令牌，避免请求被拦截
            'RequestVerificationToken': $('input[name="__RequestVerificationToken"]').val()
        },
        success: function(res) {
            if (res.success) {
                alert('更新完成');
                window.location.reload(); // 刷新页面同步数据
            } else {
                alert('更新失败：' + res.message);
            }
        },
        error: function() {
            alert('请求出错，请稍后重试');
        }
    });
});

三、后端Razor页面模型处理 #

定义接收ID数组的异步POST方法，执行数据更新：

public class YourPageModel : PageModel
{
    private readonly YourDbContext _dbContext;

    public YourPageModel(YourDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    // 方法名需与前端handler参数对应（OnPost{HandlerName}）
    public async Task<IActionResult> OnPostUpdateSelectedAsync([FromBody] int[] selectedIds)
    {
        if (selectedIds == null || selectedIds.Length == 0)
        {
            return new JsonResult(new { success = false, message = "未选择任何数据" });
        }

        try
        {
            // 查询选中ID对应的实体
            var targetItems = await _dbContext.YourEntity
                .Where(item => selectedIds.Contains(item.Id))
                .ToListAsync();

            // 执行自定义更新逻辑，例如标记重印状态
            foreach (var item in targetItems)
            {
                item.IsReprinted = true;
                // 其他字段更新操作
            }

            await _dbContext.SaveChangesAsync();
            return new JsonResult(new { success = true });
        }
        catch (Exception ex)
        {
            return new JsonResult(new { success = false, message = ex.Message });
        }
    }
}

关键注意事项 #

• ID类型匹配：若你的业务ID是字符串类型，将后端的int[]改为string[]即可
• 选择器准确性：确保jQuery选择器能精准定位目标复选框（推荐用统一的row-checkbox类）
• 请求路由一致性：前端url中的页面路径和handler名称必须与后端方法对应
• 防CSRF验证：必须携带RequestVerificationToken，否则Razor页面会拦截请求

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