从 ASP.NET Core web api 动态构建 DataTable 的 AJAX 调用

debugcn 发表于 Dev

杰森剃须

当用户单击另一个表的行时，我试图填充一个表。我在第一个表onClick的<tr>标签中有一个事件，它触发一个函数将三个属性发送到我的 webapi。我有一个命名处理程序，它接受三个属性并将它们用作另一种方法的输入值，以从 Azure 表中检索数据。响应是我提供给 JavaScript 代码的预先格式化的 JSON 数据。

我在渲染视图中看到的是一长串 JSON 文本；根本没有列或行。根据文档，我应该能够将绑定dataSet到的data值DataTable并动态构建表。

JavaScript：

function GetActivityLog(pk, rk, cn) {
    var dataSet = $('#tblActivityLogs').load('/Nodes?handler=ActivityLog' + '&PartitionKey=' + pk + '&RowKey=' + rk + '&ComputerName=' + cn);
    $('#tblActivityLogs').DataTable({
        "ajax": {
        url: '/Nodes?handler=ActivityLog' + '&PartitionKey=' + pk + '&RowKey=' + rk + '&ComputerName=' + cn,
        data: dataSet
        }
    });
    console.dir(dataSet);
}

$(document).ready(function () {
$('#tblActivityLogs').DataTable({
    "order": [[0, "desc"]],
    columnDefs: [
            {
                targets: 0,
                className: 'dt-body-nowrap'
            }
        ]
    });
})

剃刀/HTML：

<tr onmouseover="" style="cursor: pointer;" role="button" id="getActivtiy" onclick="GetActivityLog('@item.PartitionKey','@item.RowKey','@item.ComputerName');">

HTML表：

<div class="row">
    <div class="col-lg-12">
        <table id="tblActivityLogs" class="display"></table>
    </div>
</div>

C#代码：

public async Task<ContentResult> OnGetActivityLog([FromQuery] string PartitionKey, string RowKey, string ComputerName)
{
    Activities = await _azureTableConnection.GetActivitiesAsync(PartitionKey, RowKey, ComputerName);
    return Content(JsonConvert.SerializeObject(new { Activities }));
}

console.dir(dataSet) 输出：

更新：

在 ajax 调用之前设置一个断点来测试函数和输入值，但仍然得到一个（未定义的）错误。

杰森剃须

根据“凯文”的帖子（https://datatables.net/forums/discussion/comment/136685/#Comment_136685），加上@Hackerman 的建议，我终于有了一个可行的解决方案。

为了以我尝试的方式动态构建表，您必须在构建 DataTable 对象时定义列值。
如果您不使用关键字，则不能使用ajax.reload()orDataTables().destroy()或任何其他方法ajax:（请参阅 Kevin 的帖子）。如果您ajax.reload()在用数据填充表后尝试使用该方法，您将收到无效的 JSON 错误。
需要清空表格，然后添加json内容的行，然后每次点击事件重新绘制。
我没有等待.done触发匿名函数，而是使用success标签来启动它。

这是最终的解决方案：

    function GetActivityLog(pk, rk, cn) {
        $.ajax({
            url: '/Nodes?handler=ActivityLog' + '&PartitionKey=' + pk + '&RowKey=' + rk + '&ComputerName=' + cn,
            success: function (json) {
                table = $('#tblActivityLogs').DataTable({
                    "order": [[0, "desc"]],
                });
                table.clear();
                table.rows.add(json).draw();
            }
        })
    }

    $(document).ready(function () {
        $('#tblActivityLogs').DataTable({
            "order": [[0, "desc"]],
            columnDefs: [
                { targets: 0, className: 'dt-body-nowrap', title: 'Date/Time', data: 'timestamp' },
                { targets: 1, title: 'Computer', data: 'computerName' },
                { targets: 2, title: 'Type', data: 'entryType' },
                { targets: 3, title: 'Event ID', data: 'eventid' },
                { targets: 4, title: 'Message', data: 'message' }
            ]
        });
    })

奖金：

您实际上可以在填充数据之前加载表，而且您也不需要<thead>or<tr/td>标签；只是一个<table>具有与 onClick 事件匹配的正确 ID的打开/关闭标签。我能够使用正确的标题和数据绑定正确格式化表格。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-07-22

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

从 ASP.NET Core web api 动态构建 DataTable 的 AJAX 调用

从 ASP.NET Core web api 动态构建 DataTable 的 AJAX 调用

如何从Web API调用ASP.NET Core Web MVC

如何从Web API调用ASP.NET Core Web MVC

ASP .Net Core Web 应用程序调用 Web API

从AngularJs Ajax调用Asp.Net Web Api获得的响应中缺少.Net属性

如何在 .Net Core 中为 web api ajax 调用启用 cors

如何使用GET / POST和Token键调用基于Ajax的ASP.NET Web API

找不到ASP.NET Web-API Ajax调用404方法

AngularJS $ http ajax无法在asp.net Web API调用上使用

如何在新的ASP.NET Core中调用Web API非默认构造函数

如何从单独的Docker容器中调用ASP.NET Core Web API端点

如何在新的ASP.NET Core中调用Web API非默认构造函数

调试asp.net core web API

通过AJAX将JSON对象发布到ASP.NET Core Web API

Ajax调用Web API

jQuery Ajax-调用我的asp.net Web API会给出错误的网址和404未找到消息

使用ASP.NET Core定义API调用程序类

对.NET Web API的jQuery Ajax调用返回错误

dot net core中基于web api调用的派生配置

网站对asp.net Web API的调用-图片上传失败

如何计算对ASP.NET Web API POST方法的调用

ASP.net Web API如何确定要调用的函数？

ASP.NET Web api2模拟webClient调用

ASP.NET Worker Service以安全的方式调用Web API

从jqgrid调用asp.net Web API删除问题

网站对asp.net Web API的调用-图片上传失败

Angular2调用ASP.NET Web API

如何从Android设备调用asp.net Web API

从ASP.NET网站Web表单调用ASP.Net Web API

jQuery DataTable将参数传递给ajax调用asp.net。无效的JSON原语