使用 ajax 调用结果在引导框对话框中创建 table

Question

我目前正在开发一个应用程序，它应该报告特殊场合的出勤情况。我通过 AJAX 调用获得了 JSON 个对象的列表。

然后我会在引导框对话框中创建一个 table，这将为我的 AJAX 调用结果中的每个项目创建新行。每行将包含名称和一个链接到名称 ID 的复选框。

但是当我显示启动框时，它只显示 object.object 和下面的一个空框。

我做错了什么？

这是我的代码：

$.ajax({
    type: 'GET',
    url: '/Lecture/GetParticipantsToAttend',
    dataType: 'json',
    data: { id: lectureId },
    success: function (participants) {

        bootbox.dialog({
            backdrop: false,
            title: "Attendance",
            message: '<table class="table-striped form-control" id="tblParticipants"> '
                + $.each(participants, function (i, participant) {
                    '<tr> '
                        + '<td class="col-lg-11 col-md-11 col-sm-11 col-xs-11"> '
                    + '<label> ' + participant.FullName
                    + '</label>' + '</td> '
                    + '<td class="text-center col-lg-1 col-md-1 col-sm-1 col-xs-1">'
                    +
                (participant.Attended == true ? '<input type="checkbox" value="' + participant.ParticipantId + '" checked="checked"/>' : '<input type="checkbox" value="' + participant.ParticipantId + '" />')
                    + '</td> '
                    + '</tr> '
            }) + '</table> ',
            buttons: {
                success: {
                    label: "Save",
                    className: "btn-success",
                    callback: function () {

                    }
                },
                danger: {
                    label: "Cancel",
                    className: "btn-danger",
                    callback: function () {

                    }
                }
            }
        })            
    }
})

Answer 1

我认为这里的解决方案是在调用引导框之前创建字符串。尝试做这样的事情：

$.ajax({
type: 'GET',
url: '/Lecture/GetParticipantsToAttend',
dataType: 'json',
data: { id: lectureId },
success: function (participants) {

    var table = '<table class="table-striped form-control" id="tblParticipants"> ';
    $.each(participants, function (i, participant) {
        var tr = '<tr> ';
        tr += '<td class="col-lg-11 col-md-11 col-sm-11 col-xs-11"> ';
        tr += '<label> ' + participant.FullName;
        tr += '</label>' + '</td> ';
        tr += '<td class="text-center col-lg-1 col-md-1 col-sm-1 col-xs-1">';
        tr += (participant.Attended == true ? '<input type="checkbox" value="' + participant.ParticipantId + '" checked="checked"/>' : '<input type="checkbox" value="' + participant.ParticipantId + '" />');
        tr += '</td> ';
        tr += '</tr> ';
        table += tr;
    });
    table += "</table>";

    bootbox.dialog({
        backdrop: false,
        title: "Attendance",
        message: table,
        buttons: {
            success: {
                label: "Save",
                className: "btn-success",
                callback: function () {

                }
            },
            danger: {
                label: "Cancel",
                className: "btn-danger",
                callback: function () {

                }
            }
        }
    });

}});

使用 ajax 调用结果在引导框对话框中创建 table

Create table in bootbox dialog with ajax call result

html

c#

ajax

jquery

bootbox