时间戳

首页 > 解决方案 > 链接到 Razor 页面的 JQuery 数据表行

jquery - 链接到 Razor 页面的 JQuery 数据表行

问题描述

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

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

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

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

先感谢您。

标签： jqueryasp.net-coredatatablesrazor-pages

解决方案

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

模型：

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)

推荐阅读