如果我只有 1 条记录，我希望在我的数据表下方显示一个按钮。单击按钮时如何传递表中记录的ID？

Question

这是带有我想要它们的按钮的表格的 chtml 代码。我还包括了表格的 javascript 和绘图按钮的 .cs 控制器。如果我在表格行中放置一个按钮并在单击时传递记录 ID，则控制器可以工作，但我不希望该按钮位于该行中。这是因为该按钮有意仅在数据表被过滤为剩余一条记录时才可见。

<br />
<div class="container row p-0 m-0">
    <div class="col-6">
        <h2 class="text-info">Device List</h2>
    </div>
    <div class="col-12 border p-3">
        <table id="DT_load" class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Drawing File</th>
                    <th>Barcode</th>
                    <th>Date Modified</th>
                    <th>Location</th>
                    <th></th>
                </tr>
            </thead>
        </table>

    </div >
    <div class="row" >
        <a asp-action="Drawing" class="btn-primary" id="btn1" style="width: 100px" value="0">
            View Drawing
        </a>
        <a asp-action="Location" class="btn-primary" id="btn2" style="width: 100px">
            View Location
        </a>
    </div>
</div>

这是我的javascript

$(document).ready(function () {
    loadDataTable();
});


function loadDataTable()
{
    dataTable = $('#DT_load').DataTable
    ({
        "ajax":
        {
            "url": "/devices/getall/",
            "type": "GET",
            "datatype": "json"
        },
        "columns":
        [
            { "data": "dwgfilename", "width": "20%" },
            { "data": "barcode", "width": "20%" },
            { "data": "moddate", "width": "20%" },
            { "data": "locationdwg", "width": "20%" },
            {
                "data": "id",
                "render": function (data)
                {
                    return `<div class="text-center">
                        /*ignore*/
                        </div>`;
                }, "width": "60%"
            }
        ],

        'infoCallback': function (settings, start, end, max, total, pre)
            {
                if (total == 1)
                {    
                    $("#btn1").show();
                    $("#btn2").show();
                    return 'Showing your record';
                }
                else 
                {
                    $("#btn1").hide();
                    $("#btn2").hide();
                    return 'Showing ' + total + ' of ' + max + ' records';
                }
            },

        "width": "100%"
    });
}

这里是按钮的控制器

public IActionResult Drawing(int id)
        {
            //draw
            Device = _db.Devices.FirstOrDefault(u => u.Id == id);
            if (Device == null)
            {
                return NotFound();
            }
            var filename = Device.Dwgfilename;
                var stream = new FileStream(@"c:\users\boxworks\documents\" + filename +".pdf", FileMode.Open);
                return new FileStreamResult(stream, "application/pdf");

        }

Answer 1

参考下面的工作演示并修改你的javascript：

function loadDataTable() {
        dataTable = $('#DT_load').DataTable
            ({
                "ajax":
                {
                    "url": "/home/getall/",
                    "type": "GET",
                    "datatype": "json",
                    "dataSrc":""
                },
                "columns":
                    [
                        { "data": "orderNumber" },
                        { "data": "orderDate" },
                        { "data": "description" },
                        {
                            "data": "orderId",
                            "render": function (data) {
                                return `<lable hidden>`+data+'</lable>';
                            }, "width": "60%"
                        }
                    ],

                'infoCallback': function (settings, start, end, max, total, pre) {
                    if (total == 1) {
                        var id = $("#DT_load tbody tr").find("lable").text();

                        $("#btn1").attr("href",$("#btn1").attr("href") + "?id=" + id);
                        $("#btn1").show();
                        $("#btn2").show();
                        return 'Showing your record';
                    }
                    else {
                        $("#btn1").hide();
                        $("#btn2").hide();
                        return 'Showing ' + total + ' of ' + max + ' records';
                    }
                },

                "width": "100%"
            });
    }

结果：