Javascript 在按钮单击jquery函数时，html表响应不会显示在MVC视图中

我正在开发asp.NETMVC应用程序

单击下面的按钮，调用jQuery函数

I get status===success，作为响应，.htmlresponse中的所有行都可用，但在定义html的视图中没有显示相同的数据。html只是一个模式弹出窗口

jQuery函数调用：

        var url = '@Url.Action("UserDetails", "CompanyUsage")';
        var data1 = { dateTime: data.getValue(chart.getSelection()[0].row, 0), Company: company, serverID: ServerID, Organisation: Organisation, BusinessArea: BusinessArea, ApplicationName: ApplicationName, AppVersion: AppVersion, ADCheck: ADCheck }

        $.post(url, data1)
            .done(function (response, status, jqxhr) {

                if (status === "success") {
                    $('#modal .modal-body').html(response);
                    $('#modal').modal('show');
                    $("#exportPopUpUserToExcel").show();

                    $(".multiselect").click(function () {
                        $(".btn-group").toggleClass("open");
                    });

                }
                else {
                    /* your "email doesn't exist" action */
                    var pan = 0;
                }

            })
            .fail(function (jqxhr, status, errorThrown) {
                /* do something when request errors */
            });
    };

    return false;
};

视图：

<div id="modal" class="modal fade">
<div class="modal-dialog" style="overflow-y: scroll; max-height:80%; width: 1200px;  margin-top: 50px; margin-bottom:50px;left: 0px;">
    <div class="modal-content">
        <div class="modal-header">

        </div>

        <div class="modal-body">
            <p>One fine body&hellip;</p>

            @if (Model.UserList != null)
            {
                <div>
                    <table id="tableid" class="table table-striped table-hover3">
                        <tr>
                            <th>User ID</th>
                            <th>User Name</th>
                            <th>Company</th>
                            <th>License ID</th>
                            <th>Server ID</th>
                            <th>Start Time</th>
                        </tr>

                        @foreach (var item in Model.UserList)
                        {
                            <tr>
                                <td>
                                    @item.UserID
                                </td>
                                <td>
                                    @item.UserName
                                </td>
                                <td>
                                    @item.Company
                                </td>
                                <td>
                                    @item.LicenseId
                                </td>
                                <td>
                                    @item.ServerID
                                </td>
                                <td>
                                    @item.StartTime
                                </td>
                            </tr>
                        }

                    </table>
                </div>
            }
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

我得到以下结果，模态弹出数据为空白体

更新： .htmlresponse包含以下数据

现在我使用TBOSE标签代替TR和TH，但得到与以前一样的空白记录。 下面是更新的代码

    <div class="modal-body">
            <p>One fine body&hellip;</p>
            Hi
            @if (Model.UserList != null)
            {

                <div>
                    <table id="tableid" class="table table-striped table-hover3">
                        <thead>
                            <tr>
                                <th>User ID</th>
                                <th>User Name</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in Model.UserList)
                            {
                                <tr>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.UserId)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.UserName)
                                    </td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            }
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>

---

问题似乎来自这一行：

$('#modal .modal-body').html(response);

根据文档，用于将现有HTML内容替换为作为其参数传递的HTML字符串。因此，它用响应对象数据（包括table元素）替换所有使用模态体CSS类的子HTML元素，即使响应不包含HTML元素。这就是为什么表格元素在模态弹出窗口中消失的原因

如果您的目标是用AJAX响应提供的数据替换表中的现有数据，则需要迭代响应对象，然后为每次迭代创建&row元素，并将每一行附加到元素，如下例所示：

var url = '@Url.Action("UserDetails", "CompanyUsage")';
var data1 = { dateTime: data.getValue(chart.getSelection()[0].row, 0), Company: company, serverID: ServerID, Organisation: Organisation, BusinessArea: BusinessArea, ApplicationName: ApplicationName, AppVersion: AppVersion, ADCheck: ADCheck }

$.post(url, data1).done(function (response, status, jqxhr) {
    if (status === "success") {
       // set tbody selector
       var $tbody = $('#tableid tbody');

       // remove previous table entries
       $tbody.empty();

       var row = $('<tr>');
       var cell = $('<td>');

       // iterate the response and create table elements
       $.each(response, function(i, item) {
           row.append(
              cell.text(item.UserId),
              cell.text(item.UserName)
           ).appendTo($tbody);
       });

       // show the modal with table inside
       $('#modal').modal('show');
       $("#exportPopUpUserToExcel").show();

       $(".multiselect").click(function () {
           $(".btn-group").toggleClass("open");
       });

    }
    else {
       /* your "email doesn't exist" action */
       var pan = 0;
    }
})
.fail(function (jqxhr, status, errorThrown) {
    /* do something when request errors */
});

相关问题：

---

尝试检查响应对象内AJAX调用返回的字符串，它是否包含和标记以形成表数据？还要检查控制台中是否存在可能的错误。@TetsuyaYamamoto响应对象不包含和。我认为它不是必需的，因为html中已经提到了它。控制台中没有错误。感谢$'modal.modal body'。htmlresponse将替换元素中具有modal body CSS类的现有内容。表元素也将被清除。如果只想更新表内容，请放置一个，并将其用作选择器。这个回答有什么样的数据？@TetsuyaYamamoto感谢您的解释。我尝试使用标签代替TR和TH，但获得与以前相同的空白记录。还提到了响应数据快照。感谢您的详细解释。我解决了这个问题。这很有帮助。