Javascript 从ASP.NET核心web api动态构建数据表的AJAX调用

当用户单击另一个表的行时，我试图填充一个表。我在第一个表的

标记中有一个

onClick

事件，它触发一个函数，向我的webapi发送三个属性。我有一个命名处理程序，它接受这三个属性，并将它们用作另一个方法的输入值，以从Azure表检索数据。响应是预先格式化的JSON数据，我将其提供给JavaScript代码

我在渲染视图中看到的是一长串JSON文本；完全没有列或行。根据定义，我应该能够将

数据集

绑定到

数据表

的

数据

值，并动态构建该表

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'
            }
        ]
    });
})

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

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

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 }));
}

Razor/HTML:

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'
            }
        ]
    });
})

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

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

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 }));
}

HTML表格：

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'
            }
        ]
    });
})

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

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

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 }));
}

C#代码：

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'
            }
        ]
    });
})

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

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

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 }));
}

公共异步任务OnGetActivityLog（[FromQuery]string PartitionKey、string RowKey、string ComputerName） { Activities=await_azureTableConnection.GetActivitiesAsync（分区键、行键、计算机名）； 返回内容（JsonConvert.SerializeObject（新的{Activities}））； } console.dir（数据集）输出：

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'
            }
        ]
    });
})

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

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

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 }));
}

更新：

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'
            }
        ]
    });
})

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

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

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 }));
}

---

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

您只需要对代码进行一些小的更改：

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

根据Kevin的帖子（），以及@Hackerman的建议，我终于找到了一个可行的解决方案

为了以我尝试的方式动态构建表，必须在构建DataTable对象时定义列值

如果不使用

ajax:

关键字，则不能使用

ajax.reload（）

或

DataTables（）.destroy（）

或任何其他方法（请参阅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' }
            ]
        });
    })

奖金：

---

实际上，您可以在填充数据之前加载表，并且不需要

或

标记；只有一个打开/关闭

标记，该标记具有与onClick事件匹配的正确ID。我能够用正确的标题和数据绑定正确地格式化表格。

Hi@Jason，你能在

GetActivityLog

函数中添加

console.dir（dataSet）

并将输出添加到你的问题中吗？当然可以。做了，做了。有趣的是，

数据集

似乎是一个表对象本身，而不是我所认为的原始JSON。也许我不应该做

$（“#tblActivityLogs”）。加载

？让我回答你的问题。我编辑你的问题是为了不暴露机密信息。这看起来更好，但我的表现在是空的。在Chrome的预览窗格中，我可以看到三个实体，它们的格式看起来都是正确的。当我在Razor页面中尝试使用部分视图时，我的代码的另一个变体遇到了同样的问题。有什么想法吗？你能用工作参数从控制台选项卡调用函数来检查它是否工作…只是为了测试的目的好的建议。如果我在

$.ajax

设置断点，我可以看到传递的三个输入属性。此时，我复制/粘贴了整个函数（如上所述），得到了“未定义”。在控制台选项卡上，尝试调用函数，只需

GetActivityLog（pk，rk，cn）

用正确的参数替换pk，rk和cn。只是看看函数是否被调用，数据表是否被填充。用图像更新了原始帖子（相同的未定义结果）。