如何通过JavaScript向控制器发送Razor表格的PartId与复选框状态

请求无法命中控制器断点是多个代码问题叠加导致的：

• JS部分只留了发送请求的注释占位，根本没有实际编写POST请求的逻辑
• Razor渲染的表格没有存储每行PartId的可读取标识，无法直接从DOM拿到需要提交的零件ID
• 事件绑定冲突：既给复选框写了内联onclick="ClickHandle(this)"，又在jQuery入口函数内部定义了同名函数，全局作用域访问不到该函数，点击时会直接报「函数未定义」错误
• 原控制器方法没有返回值，就算请求到达也会抛出500错误，同时原HTML的div标签内多写了一个无关的左大括号，会导致页面渲染异常

第一步：修正Razor表格渲染代码 #

给每行增加自定义数据属性存储PartId，删掉冲突的内联点击事件，修正语法错误：

<div class="Table">
    <table id="table1" class="table table-striped TableData">            
        @{var rowIndex = 0;}
        @foreach (var item in Model.PieceViewItems)
        {
            rowIndex++;
            <!-- 给tr标签增加data-partid属性存储当前行零件ID -->
            <tr id="@rowIndex" data-partid="@item.PartId">
                <td>@rowIndex</td>
                <td><label>@item.PartDescription</label> <br /> @item.PartId (@item.StatusCode)</td>
                <td>@item.Supplier</td>
                <td style="width: 100px !important">
                    @item.TijdOpO3 
                    @if (item.TijdOpO3 == "1")
                    {<text>dag</text>}
                    else
                    { <text>dagen</text>}
                </td>
                <td>@item.KeurCode</td>
                <td>@item.PromiseDate</td>
                <td>@item.WidthAndPartType</td>
                <td>
                    @item.PieceLengthWithUnit <br /> 
                    @item.NrOfPieces 
                    @if (item.NrOfPieces == "1")
                    {<text>rol</text> }
                    else
                    { <text>rollen</text>}
                </td>
                <td>
                    @if (item.NumberReceived == "0")
                    {<text>NIEUW</text> }
                    else
                    { @item.NumberReceived}
                </td>
                <td>@item.VoorraadQty m</td>
                <td style="width: 100px !important">
                    @item.SalesOrderQty m <br /> 
                    @item.NrOfSalesOrders 
                    @if (item.NrOfSalesOrders == "1")
                    {<text>order</text>}
                    else
                    {<text>orders</text>}
                </td>
                <td style="width: 100px !important">
                    @item.StalenOrdersQty m <br /> 
                    @item.NrOfStalenOrders 
                    @if (item.NrOfStalenOrders == "1")
                    {<text>order</text>}
                    else
                    {<text>orders</text>}
                </td>
                <td>
                    <!-- 删除内联onclick避免事件冲突 -->
                    <input type="checkbox" name="IsChecked" style="width:30px;height:30px;margin-left:20px;margin-top:20px"> 
                </td>
            </tr>
        }
    </table>
</div>

第二步：重写JS逻辑 #

统一用jQuery绑定复选框变更事件，不需要每次点击遍历全表，直接取当前操作行的数据发起AJAX请求即可：

<script type="text/javascript">
$(function(){
    // 统一绑定change事件
    $("input[name='IsChecked']").change(function(){
        // 获取当前点击的复选框
        const currentCheckbox = $(this);
        // 获取复选框所在的当前行
        const currentRow = currentCheckbox.closest("tr");
        // 从行的自定义属性读取PartId
        const partId = currentRow.data("partid");
        // 获取选中状态
        const isChecked = currentCheckbox.prop("checked");
        
        // 切换行高亮背景
        currentRow.css("background-color", isChecked ? "yellow" : "");

        // 发起POST请求，替换url中的「你的控制器名」为实际控制器名称，比如Home、Part
        $.ajax({
            url: '/你的控制器名/PostIsChecked',
            type: 'POST',
            data: {
                partId: partId,
                isChecked: isChecked.toString()
            },
            success: function(res){
                console.log("状态更新成功");
            },
            error: function(err){
                console.error("请求失败", err);
                alert("状态保存失败，请重试");
            }
        })
    })
})
</script>

如果需要每次点击提交全表所有行的选中状态，而非仅提交当前修改行，可以在事件中遍历所有tr，逐行读取data-partid和复选框状态拼成数组提交，控制器对应修改为接收列表类型参数即可。

第三步：补全控制器代码 #

给方法增加标准JSON返回值，避免请求抛出500错误：

[HttpPost]
public ActionResult PostIsChecked(string partId, string isChecked)
{
    try
    {
        Part part = new Part
        {
            id = partId,
            isChecked = isChecked
        };
        receipt.UpdateCheckedStatus(part);
        return Json(new { success = true, message = "状态更新成功" });
    }
    catch (Exception ex)
    {
        return Json(new { success = false, message = ex.Message });
    }
}

改完代码仍无法命中断点时按顺序检查：

• 打开浏览器F12的网络面板，查看POST请求的地址是否正确，是否存在404、401、500状态码
• 如果控制器加了[Authorize]权限注解，先确认当前用户已登录，未登录的请求会被重定向到登录页，无法进入目标方法
• 检查AJAX提交的参数名和控制器形参名是否拼写一致，MVC模型绑定对参数名大小写不敏感，但拼写错误会导致参数接收失败
• 如果项目配置了全局路由前缀，需要把AJAX的请求地址替换为和路由规则匹配的完整路径

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