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

Posted 2023-03-27

【中文标题】链接到 Razor 页面的 JQuery 数据表行

【英文标题】：JQuery Datatable Rows linked to Razor Pages

【发布时间】：2021-10-13 12:43:02

【问题描述】：

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

之后进行语法

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

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

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

提前谢谢你。

【参考方案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中的行数据了