使用ASP.NET Core Razor Pages实现多Ajax数据传递至表单

我正尝试通过jQuery把DataTable里的员工数据传递到另一页面的表单，试了网上各种方法都没成。原本想把数据拼到跳转链接的href里，再在目标页面提取值填充表单，但写的代码跑不起来，原代码如下：

$(document).ready(function () {
    dataTable = $('#DT_employees').DataTable({
        "pageLength": 50,
        "ajax": {
            "url": "/api/Employees",
            "type": "GET",
            "datatype": "json"
        },
        "columns": [
            { "data": "employeeId", "width": "10%" },
            { "data": "userName", "width": "10%" },
            { "data": "firstName", "width": "10%" },
            { "data": "lastName", "width": "10%" },
            {
                "data": "{employeeId, firstName, lastName}",
                "render": function (data) {
                    return `<div class="w-75 btn-group">
                                <a href = "/Trainees/Index?=${data}" class="btn btn-primary text-white">
                                </a>
                            </div>`
                },
                "width": "5%"
            }
        ],
        "width": "100%"
    });
});

问题分析 #

1. DataTable列配置错误："data": "{employeeId, firstName, lastName}"这种写法不符合DataTable规则，它无法识别该字符串格式的字段，应使用"data": null让render函数直接获取整行数据。
2. URL参数格式错误：原代码中href = "/Trainees/Index?=${data}"会把对象直接转成[object Object]，根本传不了有效参数，得把数据拆成标准的URL查询键值对。

修正后的代码 #

列表页（DataTable所在页面） #

$(document).ready(function () {
    dataTable = $('#DT_employees').DataTable({
        "pageLength": 50,
        "ajax": {
            "url": "/api/Employees",
            "type": "GET",
            "datatype": "json"
        },
        "columns": [
            { "data": "employeeId", "width": "10%" },
            { "data": "userName", "width": "10%" },
            { "data": "firstName", "width": "10%" },
            { "data": "lastName", "width": "10%" },
            {
                "data": null,
                "render": function (rowData) {
                    // 用URLSearchParams拼接标准查询参数
                    const params = new URLSearchParams({
                        employeeId: rowData.employeeId,
                        firstName: rowData.firstName,
                        lastName: rowData.lastName
                    });
                    return `<div class="w-75 btn-group">
                                <a href="/Trainees/Index?${params}" class="btn btn-primary text-white">跳转至学员页面</a>
                            </div>`
                },
                "width": "5%"
            }
        ],
        "width": "100%"
    });
});

目标页面（Trainees/Index） #

在该页面的脚本中添加以下代码，提取URL参数并填充表单：

$(document).ready(function() {
    // 获取当前URL的查询参数
    const urlParams = new URLSearchParams(window.location.search);
    
    // 假设表单字段的id分别是employeeId、firstName、lastName，对应填充
    $('#employeeId').val(urlParams.get('employeeId'));
    $('#firstName').val(urlParams.get('firstName'));
    $('#lastName').val(urlParams.get('lastName'));
});

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