Ответ html-таблицы не отображается в виде MVC при нажатии кнопки jquery.

Question

Я работаю над приложением asp.net MVC.

При нажатии кнопки ниже вызывается функция jQuery.

Я получаю статус === "success" и в ответ все строки доступныв .html (ответ), но те же данные не отображаются в представлении, где определен 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>

Я получаю следующий результат с модальными всплывающими данными в виде пустого тела.

Обновление: .html (ответ) содержит следующие данные.

Также теперь я использую тег tbody вместо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>

Answer 1

Кажется, проблема исходит из этой строки:

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

Согласно документации, jQuery.html() используется для замены существующего содержимого HTML строкой HTML, переданной в качестве аргумента.Следовательно, он заменяет все дочерние HTML-элементы, которые используют modal-body CSS-класс, response объектными данными, включая элемент таблицы, даже response не содержит HTML-элементов.По этой причине элемент таблицы исчезает внутри модального всплывающего окна.

Если ваша цель - заменить существующие данные внутри таблицы данными, предоставленными из ответа AJAX, вам нужно выполнить итерацию объекта response, а затем создать <tr> &<td> элементы строки для каждой итерации и добавление каждой строки к элементу <tbody>, как показано в примере ниже:

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

Связанные проблемы:

Использование jQuery для построения таблицыстроки из ответа Ajax (Json)

Преобразование массива JSON в таблицу HTML в jQuery