链接到 Razor 页面的 JQuery 数据表行答案

【问题标题】：JQuery Datatable Rows linked to Razor Pages链接到 Razor 页面的 JQuery 数据表行
【发布时间】：2021-10-13 12:43:02
【问题描述】：

我正在使用当前版本的 JQuery 数据表 1.10.25，带有 Razor 页面和 SQL 服务器。我无法弄清楚如何使数据表行可选择用于 CRUD。我需要将每一行路由到相同的 Razor 页面以进行更新，但还需要从行中携带数据。我如何在

之后进行语法

$(document).ready(function () {
     $("#myTable").DataTable({ *my information*})

路由到 Razor 更新页面，并将行数据传递到页面？

该表填充了我的 SQL 服务器信息，但我似乎无法添加我需要的路由/传递。

提前谢谢你。

【问题讨论】：

标签： jquery asp.net-core datatables razor-pages

【解决方案1】：

这是一个将行数据传递给处理程序的演示：

型号：

public class Test
    {
        public int Id { get; set; }
        public string Name { get; set; }

    }

cshtml:

@Html.AntiForgeryToken()
<select id="ddlGroup">
    <option>Choose Id</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>

</select>
<table id="taskDt">
    <thead>
        <tr>
            <td>Id</td>
            <td>Name</td>
            <td>Action</td>
        </tr>
    </thead>
    <tbody></tbody>
</table>

js:

var table;
    function LoadData() {
        table = $("#taskDt").DataTable({
            "ajax": {
                url: '?handler=GET',
                type: 'GET',
                processing: true,
                serverSide: true,
            },
            "columns": [
                { "data": "id", "width": "50%" },
                { "data": "name", "width": "50%" },
                {
                    render: function (data) {
                        return `


                                           <button type="button" onclick=getData(this) class="btn btn-primary">
                                                     Edit Staff
                                           </button>
                                  `;
                    }
                },
                ],
            paging: true,
            responsive: true,
            searching: true,

            ordering: true,
            order: [[1, "asc"]]
        });
    }
    function getData(t) {
        var data = table.row($(t).parents('tr')).data();
        console.log(data);
        $.ajax({
            type: "POST",
            url: '?handler=ChangeData',
            headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
            data: data,
            success: function (data) {
            },
            error: function (result) {
                alert("fail");
            }
        })
    }
    $(document).ready(function () {
        LoadData();
    })

然后就可以用public void OnPostChangeData(Test t)获取handler中的行数据了

【讨论】：